Добавить атрибут select в Html.DropDownList с помощью JQuery
У меня есть следующие элементы 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?
Ответы 4
Я использую это для выбора в jquery
Подход (независимый от 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() будет вашим другом.
Вот код для тех, кому он понадобится, протестированный при работе с 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
});
});
});
Это было бы хорошо, но более лаконично: $ (function () {$ ("# casenumber"). Blur (function () {$ ("# UserList"). Value (this.value)});}) ;
Или, в качестве альтернативы, для части сценария JQuery можно написать
$(function() {
$("#casenumber").blur(function() {
$.getJSON("Home/GetOpenByUser",
{ casenumber: this.value },
function(result) {
if (result == "")
return;
$("#UserList").val(this.value)
});
});
});
Как насчет $ ("# subForm select [@ name = 'UserList']"). Val (result)?