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

问题描述

我想创建一个简单的Ajax格，让我根据其他输入添加和删除行，还可以编辑一些列的，具有直接计算其他列。我认为这将是一个不错的奥珀蒂尼蒂用asp.net AJAX 4.0和客户端模板玩。它的工作原理pretty确定，但我似乎无法找到我的JSON数据绑定到的方法。我怎样才能做到这一点？

一个正常的模板看起来像这样

 ＆LT; D​​IV ID =authorsTemplate的风格=能见度：隐藏;显示：无;＆GT;
    ＆LT; UL＆GT;
        ＆LT;李＆gt;首先名称：{{名字}}＆LT; /李＆GT;
        ＆LT;立GT;姓：{{姓氏}}＆LT; /李＆GT;
        ＆LT;立GT;地址：LT; A HREF ={{网址}}＆GT; {{URL}}＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

我将如何使用数据绑定语法下拉

 ＆LT;选择ID =＆GT;
  ＆LT;期权价值=1＆GT; 1 LT; /选项＆GT;
  ＆LT;期权价值=2＆GT; 2'; /选项＆GT;
＆LT; /选择＆GT;
 

编辑：
如果选择标记有一个属性值明显的解决办法是。
EDIT2：
下面的语法实际上是解决方案，THX Roatin，我不知道选择其实是有一个value属性。

 ＆LT;选择一个id =值={结合NR}＆GT;
    ＆LT;期权价值=1＆GT; 1 LT; /选项＆GT;
    ＆LT;期权价值=2＆GT; 2'; /选项＆GT;
＆LT; /选择＆GT;
 

我也许可以使用自定义JavaScript来设置选择的选项，但该点活绑定到我的JSON对象绑定到一个输入变量的值

以同样的方式

解决方案

  

我不想来填充下拉列表中，它已经填充。我希望能够使用客户端模板绑定语法从我的JSON对象的值，并把所选元素。

其实，选择 DOM元素的做的有值属性（但不暴露在标记的属性）。设置它相当于（和速度比）迭代子＆LT;选项＆GT; 和设置的selectedIndex 来的具有匹配的选项选项发现指数值。

总之，这里是如何绑定到它直接与 Sys.Binding （完整的测试用例）：

 ＆LT;！DOCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0过渡// EN
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
    ＆LT;风格类型=文/ CSS＆GT;的.sys模板{显示：无}＆LT; /风格＆GT;
    ＆所述; SCRIPT SRC =MicrosoftAjax.debug.js＆GT;＆下; /脚本＆GT;
    ＆所述; SCRIPT SRC =MicrosoftAjaxTemplates.debug.js＆GT;＆下; /脚本＆GT;    ＆LT;脚本类型=文/ JavaScript的＆GT;
    VAR的DataItem = {美孚：'3'};
    功能页面加载（）
    {
        $创建（Sys.Binding，{
            目标：$获得（名单），
            targetProperty：'值'，
            来源：DataItem的，
            路径：'富'，
            模式：Sys.BindingMode.twoWay
        }）;
    }
    ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
  ＆LT;选择一个id =清单＆GT;
    ＆LT;期权价值=1＆GT;的One＆LT; /选项＆GT;
    ＆LT;期权价值=2＆GT;二＆LT; /选项＆GT;
    ＆LT;期权价值=3＆GT;三＆LT; /选项＆GT;
  ＆LT; /选择＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
 

下面是如何做同样的事情声明，如果preFER：

 ＆LT;机身的xmlns：SYS =JavaScript的：SYS
      的xmlns：绑定=JavaScript的：Sys.Binding
      SYS：激活=*＆GT;  ＆LT;选择ID =清单
    SYS：附加=绑定
    绑定：目标={{$得到（'名单'）}}
    绑定：targetproperty =值
    绑定：来源={{DataItem的}}
    绑定：路径=富＆GT;
    ＆LT;期权价值=1＆GT;的One＆LT; /选项＆GT;
    ＆LT;期权价值=2＆GT;二＆LT; /选项＆GT;
    ＆LT;期权价值=3＆GT;三＆LT; /选项＆GT;
  ＆LT; /选择＆GT;
 

（当然摆脱页面加载 JavaScript的东西...）

这两个例子都建立双向绑定到的DataItem 对象。你可以看到在页面加载时，第三＆LT;选项＆GT; 选择，因为这是一个值的匹配选项 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的客户端模板，如何绑定一个选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！