Добавьте атрибут select в Html.DropDownList с помощью JQuery

Question

У меня есть следующие HTML-элементы:

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

Теперь, когда «casenumber» теряет фокус, я хочу вызвать базу данных, чтобы вернуть мне выбранное значение в «UserList».

Вот Javascript:

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

А вот сценарии на стороне клиента:

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

Вопрос в том, как написать функцию «размытие», чтобы я мог передать значение текстового поля «casenumber» в GetOpenByUser?

Кроме того, как завершить функцию «размытия», чтобы был выбран параметр, значение которого совпадает с значением, возвращаемым GetOpenByUser?

Answer 1

Я использую это для выбора в jquery

Answer 2

(ASP.NET MVC независимый) подход, который вы ожидали, будет правильным:

• onblur: сделать Ajax-запрос к базе данных
• об успехе Ajax: чтение и анализ ответа
• выберите подходящее значение в #fogbugzUser

Пример кода, при условии, что ваша страница возвращает простую строку с идентификатором и ничего больше. Здесь я использую get() для выполнения запроса, но есть и другие способы сделать это.

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

Вы также можете вернуть JSON в ответе вашего сервера. В этом случае getJSON() будет вашим другом.

Answer 3

Или, альтернативно, для части сценария JQuery можно написать

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

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

    });
    });

});

Answer 4

Вот код, для тех, кому он понадобится, проверенный на работе с ASP.NET MVC beta 1:

AJAX на стороне сервера:

    public JsonResult GetOpenByUser(string casenumber)
    {

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

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>

Сценарий:

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

    });
    });

});