asp.net ajax 4.0 modèles de clients, comment lier un select?

J'essaye de créer une grille ajax simple qui me permet d'ajouter et de supprimer des rangées et également d'éditer certaines colonnes et d'avoir d'autres colonnes calculées directement en fonction de l'entrée dans les autres. Je pensais que ce serait une bonne occasion de jouer avec asp.net ajax 4.0 et les modèles de clients. Cela fonctionne assez bien mais je n'arrive pas à trouver un moyen de lier mes données json à un. Comment puis-je faire ceci?asp.net ajax 4.0 modèles de clients, comment lier un select?

Un modèle normal ressemble à ce

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

Comment puis-je utiliser la syntaxe de liaison de données avec un menu déroulant

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

EDIT: Si la balise select avait une valeur attribuer la solution évidente serait être. Edit2: La syntaxe ci-dessous était en fait la solution, je ne savais pas que le select avait un attribut de valeur.

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

Je pourrais peut-être utiliser JavaScript personnalisé pour définir l'option sélectionnée, mais le point est un live de liaison à mon JSON objet de la même manière vous liez à la valeur d'une variable d'entrée

Source

2009-09-30 terjetyl

Je ne veux pas remplir la liste déroulante, il est déjà peuplé. Je veux être en mesure d'utiliser la syntaxe de liaison de modèle client pour obtenir la valeur de mon objet json et définir l'élément sélectionné.

En fait, select éléments DOM faire ont une propriété value (mais pas exposés comme un attribut dans le balisage). Le réglage est équivalent à (et plus rapide que) l'itération de l'enfant <option> et la définition du selectedIndex à l'index d'option trouvé de l'option associée à value.

Quoi qu'il en soit, voici comment s'y lier directement avec Sys.Binding (cas de test complet):

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

Voici comment faire la même chose déclarative, si vous préférez:

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

(et bien sûr se débarrasser de la pageLoad choses JavaScript ...

Les deux exemples établissent une liaison bidirectionnelle avec l'objet dataItem. Vous pouvez voir quand la page se charge, le troisième <option> est sélectionné car c'est l'option avec une valeur correspondant à dataItem.Foo. Lorsque vous sélectionnez un autre élément dans la liste déroulante, les mises à jour dataItem.Foo avec la nouvelle valeur sélectionnée.

Espérons que ça aide!

Source

2009-10-09 04:15:33

ps J'utilise ASP.NET AJAX Preview 5. –

Thx, juste ce que je cherchais, je vais l'essayer plus tard – terjetyl

Je n'ai pas vraiment essayé ceci, mais il ressemble à l'un des three links blog pourrait aider. Tous les exemples montrent une liaison à des listes de données. Peut-être quelque chose comme ceci:

* échantillon non testé mon VS 2010 comp est en panne et est étroitement dérivé du third 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>

ensuite pour sélectionner la valeur que vous voulez (fait le chemin de la force brute)

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

Ou modifiez le modèle pour inclure une liaison pour une option 'sélectionnée'. (Encore une fois non testé, vous pourriez ne pas être en mesure d'exécuter sélectionné === 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>

Source

2009-10-08 02:35:33 smaclell

Thx, mais ce n'est pas tout à fait ce que je cherchais. Je ne veux pas remplir le menu déroulant, il est déjà rempli. Je veux être en mesure d'utiliser la syntaxe de liaison de modèle client pour obtenir la valeur de mon objet json et définir l'élément sélectionné. Il se pourrait que je regarde le problème du mauvais angle cependant. Il aurait été facile si la balise

asp.net ajax 4.0 modèles de clients, comment lier un select?

Répondre