MVC 5 DropDown列表

时间:2016-10-22 00:33:13

标签: asp.net razor asp.net-mvc-5

所以我只是在使用一些控件来定制一些视图,这些控件允许用户缩小我们在页面上预期的结果,因为我们期待大量的信息。

我的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")

现在,当其中一个下拉列表发生更改时,我想将这两个控件的下拉选项从此控件发送到我的Controller,以及DD列表的内容。从那里我可以重新加载页面。 MSDN文档不清楚,因为DropDownList的唯一构造函数没有参数,所以我不清楚事件驱动的东西应该去哪里。

2 个答案:

答案 0 :(得分:0)

处理此用例的一种方法是将SELECT元素保留在form内,并在select元素发生更改事件时提交。

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

现在,您可以在SELECT元素上收听change事件并提交最接近的表单。

$(function () {

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

});

假设Index操作方法接受年份和月份作为参数

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
}

答案 1 :(得分:0)

使用表单标记(post action)包装元素。

在serverside上创建具有月份和年份参数的模型,如:

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' />
    } 

此行绑定您的下拉列表的更改事件,按ID查找您的表单并提交。

new {onchange =“document.getElementById('MyForm')。submit();”