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

Question

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

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

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

控制器是：

        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 事件，因此当用户选择不同的年份时，将使用该年份的新参数值调用 action 事件：

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

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

        window.location.href = url;
    }

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

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

反之，如果更改年份，则通过 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;
    }

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

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