#jquery #asp.net-mvc-2 #drop-down-menu
#jquery #asp.net-mvc-2 #выпадающее меню
Вопрос:
Я хотел бы сделать следующее: — Загрузка массива (имеется в виду использование EF для фильтрации результата запроса) на моей странице aspx в зависимости от выбора на стороне клиента моего выпадающего списка (содержащего идентификатор для передачи параметра в результате моего запроса).
Я полагаю, мне придется использовать jquery или что-то в этом роде.
Я начал искать решение, подобное этому. Я не уверен, что я на правильном пути поиска решения. Я довольно новичок в MVC и скрипте на стороне клиента, поэтому я открыт для любого другого решения или любого хорошего руководства, объясняющего результат моего вопроса.
<script type="text/javascript" src="/Scripts/jquery-1.5.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.11.custom.js"></script>
<script type="text/javascript">
$(function() {
$("#FK_MET_ID").change(function() {
$.get("/Provider/UpdateListProvider", function(data) {
// something must be written here ?
$("#ResultProvider").toggle(); // the div, containing my generated result ?
});
});
});
</script>
<% using (Html.BeginForm("Action", "Post")){%>
<div id="ResultProvider"></div>
<%= Html.DropDownList("FK_MET_ID"); %>
<% } %>
(Я использовал следующее руководство, чтобы начать кодирование этой части кода:http://www.dotnetcurry.com/ShowArticle.aspx?ID=443 )
Ответ №1:
Вы на правильном пути, вам нужно добавить какой-нибудь скрипт, чтобы заставить его работать. Вам нужно передать выбранное значение, вы должны добавить код контроллера к вопросу. Возможно, это скорее post, чем get, но это выходит за рамки данного вопроса. Какие данные вы возвращаете? Я думаю, вам следует использовать шаблон jquery для отображения ваших данных.
$(function() {
$("#FK_MET_ID").change(function() {
$.get("/Provider/UpdateListProvider/" $(this).val(), function(data) {
if (data) {
$("#contractsTemplate").tmpl(data).appendTo('#contracts');
}
});
});
});
Редактировать :
Лучший способ — работать с Json, в вашем контроллере вам нужен метод, подобный этому :
[HttpPost]
public virtual JsonResult GetContracts(string nameOfTheVariable)
{
var contracts = _session.All<Contract>();//add restriction with the variable
return Json(contracts);
}
На ваш взгляд, вы можете работать с шаблоном jquery :
<script id="contractsTemplate" type="test/x-jquery-tmpl">
<li><a href="/contract/${Id}/version/${Version}/edit">${Filename}</a>amp;nbsp;amp;nbsp;amp;nbsp;<span>${Status}</span></li>
</script>
<script type="text/javascript" src="@Links.Content.javascript.jquery_tmpl_min_js"></script>
<script type="text/javascript">
$(function () {
GetContracts();
});
function GetContracts() {
$.ajax({
type: "POST",
url: "/API/GetContracts",
dataType: "json",
success: function (data) {
$('#contracts').empty();
if (data) {
$("#contractsTemplate").tmpl(data).appendTo('#contracts');
}
}
});
}
</script>
Вам нужно добавить пользовательский маршрут в ваш global.ascx, который будет указывать на ваш контроллер с нужным вам действием и параметром, который вам нужен, или вы также можете сделать это в качестве параметра запроса yoururl.com $действие?nameOfTheVariable=»значение»
Дайте мне знать, если вам понадобится дополнительная помощь!
Комментарии:
1. Спасибо за ваш ответ. Тем не менее, у меня есть пара вопросов … : 1) Я полагаю, что мне придется создать controllercode типа: ActionRestut UpdateListProvider. Но какое имя я собираюсь присвоить входящей переменной, исходящей из «this.val» ? 2) Для чего используется функция (данные)??? Отвечая на ваш вопрос, данные, которые я верну, будут массивом внутри моей формы, форму, которую я не хочу перезагружать полностью. (извините за мой английский, надеюсь, я выразился достаточно ясно…
2. Я добавил некоторый код, дайте мне знать, если вас это устраивает. Для имени вы должны добавить пользовательский маршрут в global.ascx. функция (data) — это функция, которая будет вызвана после выполнения ajax-вызова вашему контроллеру, и данные будут такими, какие вы из него вернули. Вы можете console.log (данные) в консоли Chrome (ctrl shift j), чтобы посмотреть, что у вас в нем есть.
3. Большое спасибо, ВинниГ. После небольшого поиска по поводу JQueryTemplate мы наконец нашли решение, не совсем похожее на ваше, но оно работает. Еще раз большое спасибо 🙂