Блог

Итак, я просто работаю над настройкой некоторых представлений с некоторыми элементами управления, которые позволят пользователям сузить область результатов, которые мы ожидаем на странице, поскольку мы ожидаем много информации.

Мой intellisense сломан в VS2015, поэтому я немного спотыкаюсь в темноте.

Итак, я заполнил пару выпадающих списков, месяц и год. Не самый красивый, но работает:

 @Html.DropDownList("Month", new List<SelectListItem>
           {
                new SelectListItem { Text = "January", Value = "1"},
                new SelectListItem { Text = "February", Value = "2"},
                new SelectListItem { Text = "March", Value = "3"},
                new SelectListItem { Text = "April", Value = "4"},
                new SelectListItem { Text = "May", Value = "5"},
                new SelectListItem { Text = "June", Value = "6"},
                new SelectListItem { Text = "July", Value = "7"},
                new SelectListItem { Text = "August", Value = "8"},
                new SelectListItem { Text = "September", Value = "9"},
                new SelectListItem { Text = "October", Value = "10"},
                new SelectListItem { Text = "November", Value = "11"},
                new SelectListItem { Text = "December", Value = "12"}
           }, "Month")
           @Html.DropDownList("Year", new List<SelectListItem>
            {
                new SelectListItem { Text = Convert.ToString(DateTime.Now.Year - 1), Value = Convert.ToString(DateTime.Now.Year - 1)},
                new SelectListItem { Text = Convert.ToString(DateTime.Now.Year), Value = Convert.ToString(DateTime.Now.Year), Selected = true},
                new SelectListItem { Text = Convert.ToString(DateTime.Now.Year   1), Value = Convert.ToString(DateTime.Now.Year   1)},
            }, "Year")
  

Теперь, когда один из выпадающих списков изменен, я хотел бы отправить выпадающий выбор из обоих элементов управления на мой контроллер для этого представления с содержимым списка DD. Оттуда я могу перезагрузить страницу. Документация MSDN неясна, поскольку единственный конструктор для DropDownList не имеет параметров, поэтому мне неясно, куда должны идти материалы, управляемые событиями.

Один из способов справиться с этим случаем использования — сохранить выбранные элементы внутри form и отправить их, когда произойдет событие изменения выбранных элементов.

 @using (Html.BeginForm("Index","Home",FormMethod.Get))
{
  <!-- your existing code for SELECT elements goes here-->
}
  

Теперь вы можете прослушать change событие для ВЫБРАННЫХ элементов и отправить ближайшую форму.

 $(function () {

    $("#Year,#Month").change(function() {
        $(this).closest("form").submit();
     });

});
  

Предполагая, что Index метод action принимает год и месяц в качестве параметров

 public ActionResult Index(int? year,int? month)
{
  // Check the year and month values, if not null, use them to filter your data
  // to do  : Return something
}
  

оберните элементы тегом формы (post action).

на стороне сервера создайте модель, которая имеет параметры месяца и года, такие как:

 public class MyModel{
    public string Month {get;set;}
    public string Year {get;set;}
}
  

и ваш html должен быть чем-то вроде:

    @using (Html.BeginForm("Index", "Home", FormMethod.POST, new { id = "MyForm" })) 
    {
       @Html.DropDownList("Month", *your data*, "select month",   new{ onchange = "document.getElementById('MyForm').submit();" })

       @Html.DropDownList("Year", *your data*, "select year",   new{ onchange = "document.getElementById('MyForm').submit();" })

       <input type='submit' value='make the magic' />
    } 
  

эта строка привязывает событие изменения вашего выпадающего списка, находит вашу форму по идентификатору и отправляет ее.

new{ onchange = «document.getElementById(‘MyForm’).submit();»