asp.net ajax 4.0客户端模板，如何绑定select？ [英] asp.net ajax 4.0 client templates, how to bind a select?

问题描述

我正在尝试创建一个简单的ajax网格，允许我添加和删除行，还可以编辑一些列，并根据其他列的输入直接计算其他列。我认为这是一个很好的对手玩asp.net ajax 4.0和客户端模板。它的工作非常好，但我似乎找不到一种方法绑定我的json数据到一个。如何做到这一点？

正常模板看起来像这样

 < div id =authorsTemplatestyle =visibility：hidden; display：none;> 
< ul> 
< li>名字：{{FirstName}}< / li> 
< li>姓：{{LastName}}< / li> 
< li> Url：< a href ={{Url}}> {{Url}}< / a>< / li> 
< / ul> 
< / div> 
  

如何使用数据绑定语法与下拉列表

 < select id => 
<选项值=1> 1< / option> 
< option value =2> 2< / option> 
< / select> 
  

编辑：
如果选择标签有一个值属性，那么明显的解决方案就是。
编辑2：
下面的语法实际上是解决方案，Thx Roatin，我不知道选择实际上有一个值属性。

 < select id =value ={binding nr}> 
< option value =1> 1< / option> 
< option value =2> 2< / option> 
< / select> 
  

我可以使用自定义javascript来设置选择的选项，但是点是一个活着的绑定到我的json对象的方式与绑定输入标签的值相同

解决方案

我不想填充下拉列表，它已经填充了。我想要使​​用客户端模板绑定语法从我的json对象获取值并设置所选元素。

事实上，选择 DOM元素 do 具有值属性（但不作为属性公开）在标记中）。设置它等同于（并且比）迭代孩子< option> 并将 selectedIndex 设置为找到具有匹配的值的选项的选项索引。

无论如何，直接与...绑定 Sys.Binding （完整的测试用例）：

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Transitional // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< style type =text / css> .sys-template {display：none}< / style> 
< script src =MicrosoftAjax.debug.js>< / script> 
< script src =MicrosoftAjaxTemplates.debug.js>< / script> 
 
< script type =text / javascript> 
 var dataItem = {Foo：'3'}; 
 function pageLoad（）
 {
 $ create（SysBinding，{
 target：$ get（list），
 targetProperty：'value'，
 source：dataItem，
 path：'Foo'，
 mode：Sys.BindingMode.twoWay 
}）; 
} 
< / script> 
< / head> 
< body> 
< select id =list> 
< option value =1> One< / option> 
< option value =2> Two< / option> 
< option value =3> Three< / option> 
< / select> 
< / body> 
< / html> 
  

如果您愿意，以下是如何做声明的相同的事情：

 < body xmlns：sys =javascript：Sys
 xmlns：binding =javascript：SysBinding
 sys： activate =*> 
 
< select id =list
 sys：attach =binding
 binding：target ={{$ get（'list'）}}
 binding：targetproperty =value
 binding：source ={{dataItem}}
 binding：path =Foo> 
< option value =1> One< / option> 
< option value =2> Two< / option> 
< option value =3> Three< / option> 
< / select> 
  

（当然，摆脱 pageLoad JavaScript东西...）

这两个例子都设置了双向绑定到 dataItem 对象。您可以看到页面何时加载，第三个< option> 被选中，因为该值与 dataItem.Foo 。当您从下拉列表中选择不同的项目时， dataItem.Foo 更新并选择新值。

希望有帮助！

I am trying to create a simple ajax grid that allows me to add and remove rows and also edit some of the columns and have others columns calculated directly based on the input in the others. I thought this would be a nice oppurtunity to play with asp.net ajax 4.0 and the client templates. It works pretty ok but I can't seem to find a way to bind my json data to a . How can I do this?

A normal template looks like this

<div id="authorsTemplate" style="visibility:hidden;display:none;"> 
    <ul> 
        <li>First Name: {{ FirstName }}</li> 
        <li>Last Name: {{LastName}}</li> 
        <li>Url: <a href="{{Url}}">{{Url}}</a></li> 
    </ul> 
</div> 

How would I use the data bind syntax with a dropdown

<select id="">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

EDIT: If the select tag had a value attribute the obvious solution would be. Edit2: The syntax below was actually the solution, Thx Roatin, I had no idea the select actually had a value attribute.

<select id="" value="{binding nr}">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

I could maybe use custom javascript to set the selected option but the point is a live binding to my json object the same way you bind to the value of a input tag

解决方案

I do not want to populate the dropdown, it is already populated. I want to be able to use the client template binding syntax to get the value from my json object and set the selected element.

In fact, select DOM elements do have a value property (but not exposed as an attribute in the markup). Setting it is equivalent to (and faster than) iterating the child <option>s and setting the selectedIndex to the found option index of the option that has a matching value.

Anyway, here's how to bind to it directly with Sys.Binding (complete test case):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">.sys-template {display:none}</style>
    <script src="MicrosoftAjax.debug.js"></script>
    <script src="MicrosoftAjaxTemplates.debug.js"></script>

    <script type="text/javascript">
    var dataItem = { Foo: '3' };
    function pageLoad()
    {
        $create(Sys.Binding, {
            target: $get("list"),
            targetProperty: 'value',
            source: dataItem,
            path: 'Foo',
            mode: Sys.BindingMode.twoWay
        });
    }
    </script>
</head>
<body>
  <select id="list">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</body>
</html>

Here is how to do the same thing declaratively, if you prefer:

<body xmlns:sys="javascript:Sys"
      xmlns:binding="javascript:Sys.Binding"
      sys:activate="*">

  <select id="list"
    sys:attach="binding"
    binding:target="{{ $get('list') }}"
    binding:targetproperty="value"
    binding:source="{{ dataItem }}"
    binding:path="Foo">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

(and of course get rid of the pageLoad JavaScript stuff...)

Both examples set up two-way binding to the dataItem object. You can see when the page loads, the third <option> is selected as that is the option with a value matching dataItem.Foo. When you select a different item from the drop-down, dataItem.Foo updates with the new value selected.

Hope that helps!

这篇关于asp.net ajax 4.0客户端模板，如何绑定select？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！