使用 JQuery 将选择属性添加到 Html.DropDownList答案

【问题标题】：Add select attribute to Html.DropDownList using JQuery使用 JQuery 将选择属性添加到 Html.DropDownList
【发布时间】：2010-09-23 18:14:10
【问题描述】：

我有以下 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？

另外，如何完成函数blur，使得与GetOpenByUser返回的选项值相同的选项被选中？

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

我在 jquery 中使用this 作为选择框

【讨论】：

【解决方案2】：

您预期的（独立于 ASP.NET MVC 的）方法是正确的：

onblur：向数据库发出 Ajax 请求
关于 Ajax 成功：读取并解析响应
在#fogbugzUser中选择合适的值

示例代码，假设您的页面返回带有 ID 的纯字符串，没有其他内容。这里我使用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() 将是您的朋友。

【讨论】：

【解决方案3】：

这里是代码，供需要的人使用，测试使用 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

    });
    });

});

【讨论】：

$("#subForm select[@name='UserList']").val(result) 怎么样？
那会很好，但这更简洁： $(function() { $("#casenumber").blur(function() { $("#UserList").val(this .value) }); });

【解决方案4】：

或者，对于 JQuery 脚本部分，可以编写

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

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

    });
    });

});

【讨论】：