添加选择属性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的使用this为selectboxes

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的测试工作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) 

    }); 
    }); 

});