从HTML视图中的onchange事件调用控制器函数

Question

我是一名新的C＃开发人员，我有一个下拉列表，其中填充了以下格式的字符串日期：“ Jul 2017”。 列表中最多可以包含12个条目。

当用户选择一个日期时，我想将该选择传递给控制器​​方法，将其转换为DateTime格式，然后将该日期用于进一步处理。

如何将用户选择传递给控制器​​，以便可以转换和使用它？ 我在下面添加了注释掉的代码，以显示我要如何进行转换。 将日期告知控制器是我的挑战。

我在这个站点上看过类似的问题，它们似乎都过于复杂（也许是由于我的天真），但是我希望有一个更简化的解决方案。

HTML查看代码

@Html.DropDownList("selectList", Model.ReverseMonthsLists())

查看型号代码

public IEnumerable<SelectListItem> ReverseMonthsLists()
    {
        var selectListItems = GetDates()
            .Select(_ => _.ToString("MMM yyyy"))
            .Select((dateString, index) => new SelectListItem 
                { Selected = index == 0, Text = dateString, Value = dateString })
            .ToList();
        return selectListItems;
    }

public static IEnumerable<DateTime> GetDates()
{
    DateTime startDate = new DateTime(2017, 6, 1).Date;
    var currentDate = DateTime.Now.Date;
    int numberOfMonthsToShow = (currentDate.Year - startDate.Year) * 12 + 
        currentDate.Month - startDate.Month;
    var dates = new List<DateTime>(numberOfMonthsToShow);
    currentDate = currentDate.AddMonths(-1);

    for (int i = 0; i < numberOfMonthsToShow; i++)
    {
        dates.Add(currentDate);
        currentDate = currentDate.AddMonths(-1);
    }

    return dates;
}

控制器功能

    public ActionResult Report_Performance()
    {
        //var newDate = DateTime.Parse(strDate);  //<- Use newDate as parameter value into aVar to replace date at the end of the string
        var aVar = Models.Reporting.ListingStatsReportingViewModel.GetStats(userCurrentService.CompanyId.Value, Models.Reporting.DateTimePeriod.Monthly, DateTime.Now.Date.AddMonths(-1));
        return this.View(aVar);
    }

Answer 1

向控制器获取值的通常方法是让用户将页面发布回服务器，例如，通过提交按钮。 发生这种情况时，控制器的操作方法可以将所选项目作为参数接收，然后执行其需要执行的操作。 因此，如果您只希望用户提交表单，并允许网站根据所选值（以及根据该值计算的列表）呈现下一页，则只需要做。

另一方面，也许您不希望用户提交页面。 您希望在页面中显示一系列日期，或者希望通过浏览器中运行的代码处理日期。 如果是这种情况，我建议您在浏览器本身中使用Javascript执行计算，从而避免往返。 GetDates()方法中的任何内容都不需要任何服务器端数据，因此这只是将c＃代码转换为Javascript代码的问题。

在极少数情况下，您希望页面上的UX元素根据服务器计算立即得到更新，而无需发布页面。 如果您要这样做，则必须使用其他海报提供的AJAX解决方案。 它要复杂得多，工作也要多得多。 如果不需要，请使用我上面提供的解决方案之一。

Answer 2

您可以对HTML Select选项（DropDownList）使用OnChange EventHandler来启动对控制器的Ajax调用，只需创建一个JavaScript函数即可对包含用户所选数据的Jquery Ajax请求执行到控制器的操作，并使用Return Json()而不是Return View() ，然后使用JavaScript处理检索到的数据，您的控制器将需要接受一个参数，以便从Ajax请求中接收数据

Answer 3

function SendDataToController (TheDropDownName){
       var DataToSend = $('#'+TheDropDownName).text();
       // Or Pass `this` From The Html When Assigning The Event Listener 
       // and Do Something Like var DataToSend = this.text();
        $.ajax({
          url: "@(Url.Action("ActionName", "ControllerName"))",
          data: DataToSend,
          success: function(ResponseFromController){
            //Do Stuff With Response 
          }
    });
}

这会将数据发送到控制器，因此您应该在一个参数中接收它

public ActionResult MyAction (string DataToSend)
{
  //Do Stuff With Data and Get a Json Object To Return 
   Return Json(JsonObject);
}

MVC Ajax是必不可少的，因此您应该在尝试任何MVC项目之前先学习它，并且还应该在Ajax设置中使用fail attr处理请求错误，但我会留给您