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

时间:2017-07-07 21:51:27

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

我是一名新的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);
    }

3 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

您可以使用OnChange EventHandler进行HTML选择 (DropDownList)启动对控制器的Ajax调用,只需创建一个JavaScript函数,该函数将包含用户选定数据的Jquery Ajax请求发送到控制器并使用Return Json()代替{{1}从控制器检索JSON然后,使用JavaScript处理检索到的数据,您的控制器将需要接受参数以便从Ajax请求接收数据

答案 2 :(得分:0)

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设置中使用失败的attr来处理请求错误但我会留给你

相关问题