All geek questions in one place

Asp.net ajax 4.0 client templates, how to bind the choice?

I am trying to create a simple ajax grid that allows me to add and remove rows, as well as edit some columns, while other columns are calculated directly based on input in others. I thought it would be a good oppurtunity to play with asp.net ajax 4.0 and client templates. It works pretty well, but I can't find a way to bind my json data to. How can I do this?

The normal pattern is as follows

<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 to use dropdown menu data binding syntax

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

EDIT: If the select tag has a value attribute, the obvious solution would be. Edit2: The syntax below was actually a solution, thanks Roatin, I had no idea that the select element really had a value attribute.

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

javascript , - json- ,

+3
2

, . , json- .

, select DOM value ( ). ( ), <option> 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>

(, , JavaScript pageLoad...)

dataItem. , , <option>, , dataItem.Foo. , dataItem.Foo .

, !

+3

, . . , - :

* . 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". ( , , 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>
0

Source: https://habr.com/ru/post/1718953/

More articles:


All Articles