Binding a select in a client template
Posted
by Bertrand Le Roy
on ASP.net Weblogs
See other posts from ASP.net Weblogs
or by Bertrand Le Roy
Published on Fri, 12 Mar 2010 07:30:17 GMT
Indexed on
2010/03/12
7:37 UTC
Read the original article
Hit count: 418
I recently got a question on one of my client template posts asking me how to bind a select tag’s value to data in client templates. I was surprised not to find anything on the web addressing the problem, so I thought I’d write a short post about it.
It really is very simple once you know where to look. You just need to bind the value property of the select tag, like this:
<select sys:value="{binding color}">
If you do it from markup like here, you just need to use the sys: prefix. It just works.
Here’s the full source code for my sample page:
<!DOCTYPE html> <html> <head> <title>Binding a select tag</title> <script
src=http://ajax.microsoft.com/ajax/beta/0911/Start.js
type="text/javascript"></script> <script type="text/javascript"> Sys.require(Sys.scripts.Templates, function() { var colors = [
"red", "green", "blue",
"cyan", "purple", "yellow"
]; var things = [ { what: "object", color: "blue" }, { what: "entity", color: "purple" }, { what: "thing", color: "green" } ]; Sys.create.dataView("#thingList", { data: things, itemRendered: function(view, ctx) { Sys.create.dataView( Sys.get("#colorSelect", ctx), { data: colors }); } }); }); </script> <style type="text/css"> .sys-template {display: none;} </style> </head> <body xmlns:sys="javascript:Sys"> <div> <ul id="thingList" class="sys-template"> <li> <span sys:id="thingName" sys:style-color="{binding color}" >{{what}}</span> <select sys:id="colorSelect" sys:value="{binding color}" class="sys-template"> <option sys:value="{{$dataItem}}" sys:style-background-color="{{$dataItem}}" >{{$dataItem}}</option> </select> </li> </ul> </div> </body> </html>
This produces the following page:
Each of the items sees its color change as you select a different color in the drop-down.
Other details worth noting in this page are the use of the script loader to get the framework from the CDN, and the sys:style-background-color syntax to bind the background color style property from markup.
Of course, I’ve used a fair amount of custom ASP.NET Ajax markup in here, but everything could be done imperatively and with completely clean markup from the itemRendered event using Sys.bind.
© ASP.net Weblogs or respective owner
