asp.net Ajax 4.0-Client-Vorlagen, wie eine Auswahl zu binden?

StackOverflow https://stackoverflow.com/questions/1500942

Frage

Ich versuche, ein einfaches Ajax-Raster zu erstellen, die ich Zeilen hinzufügen können und entfernen und auch einige der Spalten bearbeiten und auf dem Eingang direkt mit Sitz in den anderen berechnet anderen Spalten hat. Ich dachte, das wäre ein schönes oppurtunity sein mit asp.net Ajax spielen 4.0 und den Client-Vorlagen. Es funktioniert ziemlich ok, aber ich kann nicht scheinen, einen Weg zu finden, um meine Json Daten ein zu binden. Wie kann ich das tun?

Eine normale Vorlage sieht wie folgt aus 

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

Wie würde ich die Daten binden Syntax mit einem Drop-Down verwenden 

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

EDIT: Wenn der select-Tag hatte Attribut einen Wert die offensichtliche Lösung wäre. Edit2: Die Syntax unten war eigentlich die Lösung, Thx Roatin, ich hatte keine Ahnung, der Wert auswählen Attribut tatsächlich hatte. 

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

ich vielleicht benutzerdefinierte Javascript verwenden könnte die gewählte Option zu setzen, aber der Punkt ist ein Live meiner json Binding-Objekt auf die gleiche Weise auf den Wert eines Eingangs-Tag binden

War es hilfreich?

Lösung

  

Ich will nicht die Drop-down füllen, ist es bereits ausgefüllt. Ich möchte in der Lage, die Client-Vorlage verwenden Syntax Bindung den Wert von meinem Json-Objekt zu erhalten und stellen Sie das ausgewählte Element.

In der Tat, select DOM-Elemente tun hat eine value Eigenschaft (aber nicht als Attribut in der Markup ausgesetzt). Eine Einstellung entspricht (und schneller als) Iterieren das Kind <option>s und die selectedIndex den gefundenen Option Index der Option Einstellung, die ein entsprechenden value hat.

Wie auch immer, hier ist, wie mit Sys.Binding (vollständigem Testfall), um es direkt zu binden: 

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

Hier ist, wie die gleiche Sache deklarativ zu tun, wenn Sie es vorziehen: 

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

(und natürlich die pageLoad JavaScript Sachen loszuwerden ...)

Beide Beispiele einrichten Zwei-Wege zum dataItem Objekt zu binden. Sie können sehen, wenn die Seite geladen wird, die dritte <option> ausgewählt wird, wie dass die Option mit einem Wert Anpassung dataItem.Foo ist. Wenn Sie wählen Sie ein anderes Element aus der Dropdown-Liste dataItem.Foo Updates mit dem neuen Wert ausgewählt.

Ich hoffe, das hilft!

Andere Tipps

Ich habe nicht wirklich versucht, dies aber es sieht aus wie jeder von diese drei Links Blog-Post helfen könnte. Alle Beispiele zu Datenlisten anzeigen zu binden. Vielleicht so etwas wie folgt aus:

* Muster meines VS 2010 nicht getestet comp gesprengt und sind eng von dem dritter 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>

Dann den Wert auszuwählen (done die Brute-Force-Weg)

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

oder die Vorlage zwicken eine Bindung für eine "ausgewählte Option enthält. (Wieder nicht getestet, können Sie möglicherweise nicht zur Leistung Ausgewählte === 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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top