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

问题是如何编写函数“blur”，以便我可以将文本框“casenumber”的值传递给GetOpenByUser？

另外，如何完成“模糊”功能，以便选择与GetOpenByUser返回的值相同的选项？

Answer 1

我在jquery

中使用this来表示选择框

Answer 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()将是您的朋友。

Answer 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

    });
    });

});

Answer 4

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

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

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

    });
    });

});

使用JQuery将select属性添加到Html.DropDownList

4 个答案: