首页 > 编程语言> > javascript-asp.net ajax 4.0客户端模板,如何绑定选择？

javascript-asp.net ajax 4.0客户端模板,如何绑定选择？

2019-12-10 14:37:50 作者：互联网

我正在尝试创建一个简单的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 id="" value="{binding nr}">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

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

解决方法:

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.

实际上,选择的DOM元素确实具有value属性(但未在标记中作为属性公开).设置它等同于(且比其快)迭代子< option> s并将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(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将使用选定的新值进行更新.

希望有帮助！

标签：client-templates,data-binding,asp-net-ajax,javascript
来源： https://codeday.me/bug/20191210/2101953.html