asp.net ajax 4.0 客户端模板，如何绑定一个选择？答案

【问题标题】：asp.net ajax 4.0 client templates, how to bind a select?asp.net ajax 4.0 客户端模板，如何绑定一个选择？
【发布时间】：2009-09-30 22:17:06
【问题描述】：

我正在尝试创建一个简单的 ajax 网格，它允许我添加和删除行，还可以编辑一些列，并根据其他列的输入直接计算其他列。我认为这将是使用 asp.net ajax 4.0 和客户端模板的好机会。它工作得很好，但我似乎找不到将我的 json 数据绑定到 .我该怎么做？

一个普通的模板是这样的

<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>

我将如何使用带有下拉菜单的数据绑定语法

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

编辑：如果 select 标记具有 value 属性，那么显而易见的解决方案就是。编辑2：下面的语法实际上是解决方案，Thx Roatin，我不知道 select 实际上有一个 value 属性。

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

我也许可以使用自定义 javascript 来设置选定的选项，但重点是实时绑定到我的 json 对象，就像绑定到输入标签的值一样

【问题讨论】：

标签： javascript data-binding asp.net-ajax client-templates

【解决方案1】：

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

事实上，select DOM 元素做有一个value 属性（但没有在标记中作为属性公开）。设置它等同于（并且比）迭代子 <option>s 并将 selectedIndex 设置为具有匹配 value 的选项的已找到选项索引。

不管怎样，下面是直接用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(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>

如果您愿意，可以通过以下方式以声明方式执行相同的操作：

<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>

（当然要摆脱 pageLoad JavaScript 的东西......）

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

希望有帮助！

【讨论】：

ps 我使用的是 ASP.NET AJAX 预览版 5。
谢谢，正是我想要的，我稍后再试

【解决方案2】：

我实际上并没有尝试过，但看起来 these three links 博客文章中的任何一个都可以提供帮助。所有示例都显示绑定到数据列表。也许是这样的：

* 未测试的示例我的 VS 2010 比较被破坏，并且与 third link *

密切相关

var sampleData = [
    { Value: "1", Text: "1" },
    { Value: "2", Text: "2" },
];
var select = "1";

<select id="list" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ sampleData }}">
    <option value="{{ Value }}">{{ Text }}</option>
</select>

然后选择你想要的值（用蛮力的方式）

var list = document.getElementById( "list");
foreach ( var option in list.options)
{
    if( option.value == select)
    {
        option.selected = true;
        break;
    }
}

或调整模板以包含“选定”选项的绑定。（再次未测试，您可能无法执行 Selected === true）

var sampleData = [
    { Value: "1", Text: "1", Selected: true },
    { Value: "2", Text: "2" },
];
var select = "1";

<select id="list" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ sampleData }}">
    <option value="{{ Value }}" selected="{{ Selected === true }}">{{ Text }}</option>
</select>

【讨论】：

谢谢，但这不是我想要的。我不想填充下拉列表，它已经填充了。我希望能够使用客户端模板绑定语法从我的 json 对象中获取值并设置所选元素。可能是我从错误的角度看待问题。如果会很容易
你可以随时使用JS来设置select元素的选中索引。像 sel.selectedIndex 这样的东西，您可以通过查看选项数组来获得所需的索引。稍后我会在答案中添加代码示例。
这些额外的说明有帮助吗？我无法澄清您希望它如何设置选择。你在使用任何 JS 库吗？