asp.net шаблоны клиентов ajax 4.0, как привязать выбор? - PullRequest
Новая
       40

asp.net шаблоны клиентов ajax 4.0, как привязать выбор?

3 голосов
/ 01 октября 2009

Я пытаюсь создать простую сетку 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>

EDIT: Если бы тег select имел атрибут value, очевидным решением было бы. Edit2: Синтаксис ниже был на самом деле решением, Thx Roatin, я понятия не имел, что выбор действительно имеет атрибут value. 

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

Возможно, я мог бы использовать пользовательский javascript для установки выбранной опции, но точка - это живая привязка к моему объекту json так же, как вы привязываетесь к значению входного тега

Ответы [ 2 ]

3 голосов
/ 09 октября 2009

Я не хочу заполнять раскрывающийся список, он уже заполнен. Я хочу использовать синтаксис привязки шаблона клиента, чтобы получить значение из моего объекта json и установить выбранный элемент.

Фактически, select элементы DOM do имеют свойство 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 обновляется с выбранным новым значением.

Надеюсь, это поможет!

0 голосов
/ 08 октября 2009

Я на самом деле не пробовал это, но похоже, что любая из этих трех ссылок сообщения в блоге может помочь. Все примеры показывают привязку к спискам данных. Может быть, что-то вроде этого:

* Образец не проверен, мой комп 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...