Add select attribute to Html.DropDownList using JQuery

Question

I have the the following html elements:

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

Now, when the "casenumber" loses focus, I want to call the database to return me a selected value in the "UserList".

Here's the Javascript:

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

And here's the client side scripting:

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

The question is how to write the function "blur" so that I can pass in the value of the textbox "casenumber" to the GetOpenByUser?

Also, how to complete the function "blur" so that the option that has the same value as the one that is returned by GetOpenByUser will be selected?

Answer 1

I use this for selectboxes in jquery

Answer 2

The (ASP.NET MVC independent) approach you anticipated would be right:

• onblur: make Ajax request to database
• on Ajax success: read and parse response
• select appropriate value in #fogbugzUser

Sample code, assuming your page is returning a plain string with the ID and nothing else. Here I'm using get() to make the request, but there are more ways to do it.

$(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);
      }
    });    
  });
});

You could also return JSON, in your server response. In this case, getJSON() would be your friend.

Answer 3

Here's the code, for those who's going to need it, tested working with ASP.NET MVC beta 1:

Server side AJAX:

    public JsonResult GetOpenByUser(string casenumber)
    {

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

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

The 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

Or, alternatively, for the JQuery script part, one can write

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

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

    });
    });

});