MVC Asp.net заполнить список с помощью JQuery? - PullRequest
Новая
       2

MVC Asp.net заполнить список с помощью JQuery?

3 голосов
/ 29 января 2011

У меня есть список получателей в раскрывающемся списке в моей форме.Я хотел бы заполнить другой раскрывающийся список, основанный на выбранном элементе раскрывающегося списка Получателя, без обратных ссылок и всего этого.

Итак, я создал в своем контроллере метод, который выполняет эту работу: 

        private JsonResult GetCategories(int payeeId)
    {
        List<CategoryDto> cats = Services.CategoryServices.GetCategoriesByPayeeId(payeeId);
        List<SelectListItem> items = new List<SelectListItem>();

        foreach(var cat in cats)
        {
            items.Add(new SelectListItem {Text = cat.Description, Value = cat.CategoryId.ToString()});
        }

        return Json(items);

    }

Теперь я не уверен, что добавить к моему мнению, чтобы заставить это работать.

На данный момент все, что у меня есть, это: 

 <% using (Html.BeginForm())
   {%>

   <p>
   <%=Html.DropDownList("SelectedAccountId", Model.Accounts, "Select One..", null) %>
   </p>
   <p>
   <%=Html.DropDownList("SelectedPayeeId", Model.Payees, "Select One...", null) %>
   </p>

                         <input type="submit" value="Save" />
<%
    }%>

онизаполнить нормально ... поэтому, когда пользователь выбирает раскрывающийся список SelectedPayeeId, он должен затем заполнить новый (еще не созданный?) раскрывающийся список, содержащий категории на основе SelectedPayeeId.

Итак, я думаю, что янеобходимо создать функцию JQuery (никогда не выполнял JQuery .. поэтому даже не уверен, куда она идет), которая следит за выпадающим списком получателей на событие onChange?А затем вызовите метод, который я создал выше.Звучит ли это правильно, и если да, то можете ли вы подсказать мне, как этого добиться?

Ответы [ 2 ]

8 голосов
/ 29 января 2011

Ваши рассуждения пока полностью обоснованы.Сначала вы захотите включить библиотеку jquery в свой View / Master.Вы можете скачать копию jquery с http://jquery.com/. Добавить файл в свой проект и включить <script src="/path/to/jquery.js"> в <head> вашего документа.Вы захотите добавить еще один раскрывающийся список в свое представление (и, возможно, другое свойство в вашей модели).Мы назовем это «SelectedCategoryId:» 

<%=Html.DropDownList("SelectedCategoryId", null, "Select One...", new { style = "display:none;"}) %>

Мы установили стиль этого выпадающего меню, чтобы изначально не отображаться, потому что внутри него нечего выбирать.Мы покажем это позже, после того, как сгенерируем для него контент.Теперь где-нибудь на вашей странице вы захотите включить блок <script>, который будет выглядеть примерно так: 

$(document).ready(function() { $('#SelectedPayeeId').change(function() { 
$.ajax({
  type: 'POST',
  url: urlToYourControllerAction,
  data: { payeeId: $(this).val() },
  success: function(data) { 
     var markup = '';
     for (var x = 0; x < data.length; x++ ) {
        markup += '<option value="' + data[x].Value + '">'+data[x].Text+'</option>';
     }
     $('#SelectedCategoryId').html(markup).show();
  }
}); }); });

Этот код связывает анонимную функцию, написанную выше, с элементом DOM с идентификатором SelectedPayeeId'(в этом случае ваш выпадающий список).Функция выполняет AJAX-вызов URL вашего метода.Когда он получает результаты запроса (ваш JSON, который вы вернули), мы перебираем массив и создаем строку HTML, которую мы хотим внедрить в наш документ.Наконец, мы вставляем html в элемент 'SelectedCategoryId' и меняем стиль элемента, чтобы он был видим для пользователя.

Обратите внимание, что я не запускал этот код, но это должно быть (почти)что вам нужно.Документация jQuery доступна по адресу http://docs.jquery.com/Main_Page, а функции, которые я использовал выше, приведены здесь:

1 голос
/ 29 января 2011

Вам нужно сделать GetCategories открытым методом, так как он соответствует обработчику действий в вашем контроллере.

Ваш код jquery может выглядеть следующим образом: 

<script type="text/javascript">
    $(function() {
 $('#SelectedPayeeId').change(function() {
          $.get('<%= Url.Action("GetCategories", "YourControllerName") %>',
                    {payeeId: $(this).val()}, 
                    function(data) {
                       populateSelectWith($("#Category"), data);

           });
        });
   //Place populateSelectWith method here
});
</script>
The populateSelectWith can fill your dropdown with data like:

  function  populateSelectWith($select, data) {
    $select.html('');
    $select.append($('<option></option>').val('').html("MYDEFAULT VALUE"));
    for (var index = 0; index < data.length; index++) {
        var option = data[index];
        $select.append($('<option></option>').html(option));
      }
    }

Я не тестировал этот код, но надеюсь, что он работает нормально.

Вы можете найти синтаксис для jquery ajax get здесь Поскольку вы не публикуете какие-либо данные на сервере, вы также можете украсить действие вашего контроллера атрибутом [HttpGet]

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...