Ajouter attribut de sélection à l'aide Html.DropDownList JQuery

Question

Je les éléments HTML suivants:

<tr> 
    <td> <label for="casenumber">Case:</label></td> 
    <td> 
    <%=Html.TextBox("casenumber", "", new Dictionary<string, object> 
    { 
     {"id", "casenumberID"} 
    })%> 
    </td> 
</tr> 
<tr> 
    <td><label for="fogbugzUser">Users:</label></td> 
    <td> 
    <%=Html.DropDownList("UserList", (SelectList)ViewData["UserList"], new Dictionary<string, object> 
    { 
     {"id", "userlistid"} 
    })%> 
    </td> 
</tr> 

Maintenant, lorsque le « casenumber » perd le focus, je veux appeler la base de données pour me renvoyer une valeur sélectionnée dans la "UserList".

Voici le Javascript:

$(function() { 
    $("#casenumberID").blur(function() { 
    //don't know how to do!!); 
    });  
}); 

Et voici le script côté client:

public JsonResult GetOpenByUser(string casenumber) 
{ 
    return Json(userContext.OpenBy(casenumber)); 
} 

La question est de savoir comment écrire la fonction « flou » pour que je puisse passer la valeur de la zone de texte "casenumber" à GetOpenByUser?

Aussi, comment compléter la fonction "flou" afin que l'option qui a la même valeur que celle qui est retournée par GetOpenByUser sera sélectionnée?

Answer 1

J'utilise this pour en jquery selectboxes

Answer 2

Le (ASP.NET MVC indépendant) approche que vous attendiez serait juste:

• onblur: faire une demande Ajax à la base de données
• sur le succès Ajax: lire et analyser la réponse
• sélectionner la valeur appropriée dans #fogbugzUser

Exemple de code, en supposant que votre page renvoie une chaîne de caractères avec l'ID et rien d'autre. Ici, j'utilise get() pour faire la demande, mais il y a plus de façons de le faire.

$(function() { 
    $("#casenumberID").blur(function() { 
    $.get(
     "url/to/some.page/fetching.the.userid", 
     // this will be turned into URL parameters, e.g.: "casenumberID=15" 
     { casenumberID: this.value }, 
     function(result) { 
     /* check if result is a string of numbers only (change for 
     * something that better suits your needs if numbers is not 
     * what you expect here */ 
     if (/^\d+$/.test(result)) 
      $("#fogbugzUser").val(result); 
     else 
      alert("Server returned an unexpected result: " + result); 
     } 
    });  
    }); 
}); 

Vous pouvez également renvoyer JSON dans la réponse de votre serveur. Dans ce cas, getJSON() serait votre ami.

Answer 3

est ici le code, pour ceux qui va avoir besoin, testé travailler avec ASP.NET MVC beta 1:

côté serveur AJAX:

public JsonResult GetOpenByUser(string casenumber) 
    { 

     return Json(userContext.OpenBy(casenumber)); 
    } 

Le code HTML:

<form id="subForm"> 
    <tr> 
    <td> <label for="casenumber">Case:</label></td> 
    <td><%=Html.TextBox("casenumber", "")%> </td> 
    </tr> 
    <tr> 
    <td><label for="fogbugzUser">Users:</label></td> 
    <td><%=Html.DropDownList("UserList", (SelectList)ViewData["UserList"])%></td> 
    </tr> 
</form> 

Le script:

$(function() { 
    $("#casenumber").blur(function() { 
     $.getJSON("Home/GetOpenByUser", 
    { casenumber: this.value }, 
    function(result) { 
     if (result == "") 
      return; 

     $("#subForm select[@name='UserList'] option[@selected='selected']").removeAttr("selected"); //remove any selected items 
     $("#subForm select[@name='UserList'] option[@value='" + result + "']").attr("selected", "selected"); //select the item that is returned from the server 

    }); 
    }); 

}); 

Answer 4

Ou encore, pour la partie du script JQuery, on peut écrire

$(function() { 
    $("#casenumber").blur(function() { 
     $.getJSON("Home/GetOpenByUser", 
    { casenumber: this.value }, 
    function(result) { 
     if (result == "") 
      return; 

$("#UserList").val(this.value) 

    }); 
    }); 

});