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

我是一名新的c开发人员，我有一个dropdownlist，其中填充了如下格式的字符串日期：2017年7月。列表中最多可以有12个条目

当用户选择日期时，我希望将该选择传递给控制器方法，将其转换为日期时间格式，然后使用该日期进行进一步处理

如何将用户选择传递给控制器，以便转换和使用？我在下面加入了注释掉的代码，以显示我希望如何进行转换。把日期交给管制员是我的挑战

我在这个网站上看过类似的问题，它们看起来都过于复杂，也许是因为我太天真了，但我希望有一个更精简的解决方案

Html视图代码

视图模型代码

控制器功能

---

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

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来处理请求错误，但我将把它留给您

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

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

---

在某些罕见的情况下，您会希望页面上的UX元素能够根据服务器计算立即得到更新，而不会发布页面。如果这是您想要的，那么您必须使用其他海报提供的AJAX解决方案。这要复杂得多，工作量也要大得多。如果您不需要，请使用我上面提供的解决方案之一。

Mostafa ELite，听起来不错。但是作为一个新手，我对语法不太了解，无法做到这一点。您能给我指出一个关于OnChange EventHandler语法的简明参考源，以及一个关于如何向控制器执行包含用户选择的数据的Jquery Ajax请求的精确参考吗？我很乐意阅读。但是我在互联网和这个网站上转悠了几个小时，得到了很多令人困惑的信息。John Wu，我遵循了你的建议，使用了回帖方式。但是我的选择没有反映在屏幕上。刷新后，列表将恢复为默认选择。如何修复此问题？您需要修改呈现列表的视图，以确保它预先选择提交的任何值。我理解您的意思。但我不知道如何让它发生。你能提供更具体的指导吗？请看哪一个解释了视图如何在设置默认项时呈现Select。如果我不清楚，我很抱歉。我读了答案，但它没有解决我的问题。我已经有了一个默认项。当我选择一个新项目时，我的代码调用一个控制器函数来执行一些处理，当视图重新发布时，默认项目将再次被选择，而不是我上次所做的选择。这是我想在屏幕上看到的选定项目。

    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);
    }

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);
}