MVC: загрузка массива в зависимости от выбора клиентской стороны выпадающего списка

#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 мы наконец нашли решение, не совсем похожее на ваше, но оно работает. Еще раз большое спасибо 🙂