asp.net ajax 4.0 modèles de clients, comment lier une sélection?

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

Question

Je suis en train de créer un simple réseau ajax qui me permet d'ajouter et de supprimer des lignes et modifier également certaines des colonnes et ont d'autres colonnes calculées directement en fonction de l'entrée dans les autres. Je pensais que ce serait une belle opportunite jouer avec asp.net ajax 4.0 et les modèles de clients. Il fonctionne très bien, mais je ne peux pas sembler trouver un moyen de lier mes données JSON à un. Comment puis-je faire?

Un modèle normal ressemble à ceci 

<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. Edit2: La syntaxe ci-dessous était en fait la solution, Thx Roatin, je ne savais pas la sélection avait en fait 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

Était-ce utile?

La solution

  

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 modèle client pour obtenir la valeur de mon objet JSON et de définir l'élément sélectionné.

En fait, les éléments select DOM faire une propriété value (mais pas exposée comme un attribut dans le balisage). Un réglage est équivalent à (et plus rapide que) itérer les <option>s enfants et le réglage de la selectedIndex à l'index de l'option trouvée de l'option qui a un value correspondant.

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 des trucs de pageLoad JavaScript ...)

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

L'espoir qui aide!

Autres conseils

Je n'ai pas vraiment essayé, mais il semble que l'une des ces trois noreferrer liens de blog pourrait aider. Tous les exemples montrent la 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 troisième lien * 

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 modifier le modèle pour inclure une liaison pour une option sélectionnée. (Encore une fois n'a pas été 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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top