3

我正在尝试创建一个简单的 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>

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

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

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

4

2 回答 2

3

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

事实上，selectDOM 元素确实有一个value属性（但没有在标记中作为属性公开）。设置它等效于（并且比）迭代 child <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>

（当然要摆脱pageLoadJavaScript 的东西......）

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

希望有帮助！

于 2009-10-09T04:15:33.530 回答
0

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

* 样品未测试我的 VS 2010 比较被破坏，并密切来自第三个链接*

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>
于 2009-10-08T02:35:33.470 回答