从 html 视图中的 onchange 事件调用控制器函数答案

【问题标题】：Calling a controller function from onchange event in html view从 html 视图中的 onchange 事件调用控制器函数
【发布时间】：2017-07-08 08:56:48
【问题描述】：

我是一名新的 c# 开发人员，我有一个下拉列表，其中填充了格式如下的字符串日期：“2017 年 7 月”。列表中最多可以有 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);
    }

【问题讨论】：

标签： javascript c# asp.net drop-down-menu

【解决方案1】：

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

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

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

【讨论】：

John Wu，我听从了您的建议并使用了回发方式。但是我的选择没有反映在屏幕上。刷新后，列表恢复为默认选择。我该如何解决这个问题？
您需要修改呈现列表的视图，以确保它预先选择提交的任何值。
我明白你在说什么。但我不知道如何实现它。能否提供更具体的指导？
请参阅this answer，它解释了 View 如何在设置默认项时呈现 Select。
如果我不清楚，我深表歉意。我阅读了答案，但没有解决我的问题。我已经有一个默认项目。当我选择一个新项目时，我的代码会调用一个控制器函数来执行一些处理，当重新发布视图时，会再次选择默认项目，而不是我上次所做的选择。这是我希望在屏幕上看到的选定项目。

【解决方案2】：

您可以将 OnChange 事件处理程序用于 HTML 选择选项（DropDownList）要启动对控制器的 Ajax 调用，只需创建一个 JavaScript 函数，该函数执行包含用户选择的数据到控制器的 Jquery Ajax 请求，并使用 Return Json() 而不是 Return View() 从控制器检索 JSON，然后处理使用 JavaScript 检索到的数据，您的控制器将需要接受一个参数才能从 Ajax 请求中接收数据

【讨论】：

Mostafa ELite，听起来不错。但是作为一个新手，我对语法的了解不够好。您能否指出关于 OnChange EventHandler 语法的简明参考源以及关于如何“将包含用户选择的数据的 Jquery Ajax 请求执行到控制器”的参考？我很乐意阅读。但我已经在互联网和这个网站上转了几个小时，得到了很多令人困惑的信息。

【解决方案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 处理请求错误，但我将把它留给您

【讨论】：