MVC/Razor：使用来自下拉列表 onchange 事件的参数和来自 actionlink 按钮值的参数调用操作方法

Question

我继承了一个 ASP.NET MVC 项目（剩下的那个）需要更改，因此试图了解该项目的工作原理以及如何修复它。

这是一个记录和编辑时间表的应用程序 Timesheet snippet

当用户 select 一个月时，显示会发生变化并显示该月的数据。问题是，前面的人不允许超过一年，所以点击 8（例如），显示今年和前几年 8 月的数据。我添加了年份按钮，这样用户就可以 select 年份。

控制器是：

        public ActionResult MyTimesheets(int? month, int? year)
    {
        if(year == null)
        {
            year = DateTime.Now.Year;
        }

        if(month == null)
        {
            month = DateTime.Now.Month;
        }

        ViewBag.UserName = GetCurrentUserName();

        //  Get list of years in data for drop-down box
        var yearList = new SelectList(contextdb.TimeSheetsDb.Select(y => y.TimeSheetDate.Year).Distinct().OrderByDescending(y => y.ToString()).ToList());
        ViewData["YearList"] = yearList;

        var myTimeSheets = contextdb.TimeSheetsDb.Include(x => x.UserTS).Where(x => x.UserTS.UPN == User.Identity.Name && x.TimeSheetDate.Month == month.Value && x.TimeSheetDate.Year == year.Value).ToList();
        return View(myTimeSheets);
    }

我添加了年参数表并更改了查询以按年和月进行过滤。

他使用循环为每个月创建按钮：

        @for (int i = 1; i <= 12; i++)
    {
        if (Model.First().TimeSheetDate.Month == i)
        {
            @Html.ActionLink(i.ToString(), "MyTimesheets", new { month = i }, new { @class = "btn btn-success", style = "margin-left: 3px" });
        }
    else
        {
        @Html.ActionLink(i.ToString(), "MyTimesheets", new { month = i }, new { @class = "btn btn-default", style = "margin-left: 3px" });
        }
    }

我在控制器中添加了基于视图数据的下拉列表：

        <td>@Html.DropDownList("YearList", (IEnumerable<SelectListItem>)ViewData["YearList"], new { @onchange = "CallChangefunc(this.value)" })</td>

这有一个 onchange 事件，所以当用户 select 是不同的年份时，将使用该年份的新参数值调用操作事件：

<script>
    function CallChangefunc(val) {
        var url;

        url = "/TimeSheets/MyTimeSheets/?year=" + val;

        window.location.href = url;
    }

这行得通，我花了很长时间才到达这里。

我现在纠结的是，如果用户单击不同月份的按钮，如何将新月份值和当前 selected 年份作为年份参数传递给操作方法。

相反，如果更改年份，则通过 onchange 事件传递当前点击的月份。

Answer 1

如果您需要像处理 onchange 事件那样执行相同的 javascript 代码只需在创建按钮时为按钮添加 onClick 例如：

@Html.ActionLink(i.ToString(), "MyTimesheets", new { month = i }, new { @class = "btn btn-success", style = "margin-left: 3px", @onclick = "CallClickfunc("+i+")" });

在该函数上传递 i 值现在 Javascript 函数为

function CallClickfunc(val){
    //Here get the selected value of Year drop down and pass it to URL
    var year = $('#YearList').val();
    $('#hdnMonth').val(val);
    var url;

    url = "/TimeSheets/MyTimeSheets/?year=" + year +"&month="+val;

    window.location.href = url;
}

这适用于按钮点击和年份。

********************对于年份下拉按钮****************** ** 您可以简单地创建一个隐藏值来存储我们将在我们创建的上述函数中更改的月份值您可以添加

    @for (int i = 1; i <= 12; i++)
    {
        if (Model.First().TimeSheetDate.Month == i)
        {
             @Html.ActionLink(i.ToString(), "MyTimesheets", new { month = i }, new { @class = "btn btn-success", style = "margin-left: 3px", @onclick = "CallClickfunc("+i+")" });
<input type="hidden" name="hdnMonth" id="hdnMonth" value=""+i+"">
        }
    else
        {
         @Html.ActionLink(i.ToString(), "MyTimesheets", new { month = i }, new { @class = "btn btn-default", style = "margin-left: 3px", @onclick = "CallClickfunc("+i+")" });
<input type="hidden" name="hdnMonth" id="hdnMonth" value=""+i+"">
        }
    }

在此之后，您的 onchange 函数将更改为从隐藏中获取值并附加 URL

function CallChangefunc(val) {
        var month = $('#hdnMonth').val();
        var url;

        url = "/TimeSheets/MyTimeSheets/?year=" + val+"&month="+month;

        window.location.href = url;
    }

此代码适用于您所说的两种功能。

是的，我们有更好的选择来执行此操作，但为了让您更轻松地继续使用代码，我继续这样做。

MVC/Razor：使用来自下拉列表 onchange 事件的参数和来自 actionlink 按钮值的参数调用操作方法

MVC/Razor: Call action method with parameter from dropdownlist onchange event and parameter from an actionlink button value

parameters

asp.net-mvc

actionresult

html.dropdownlistfor