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

时间:2018-08-17 12:59:20

标签: asp.net-mvc parameters html.dropdownlistfor actionresult

我继承了一个需要更改的ASP.NET MVC项目(尚待解决),因此试图了解该项目的工作方式和修复方式。

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

当用户选择一个月时,显示将更改并显示该月的数据。麻烦的是,前一个家伙不允许有超过一年的时间,因此,例如单击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);
    }

我添加了年aparemeter并更改了查询以对年和月进行过滤。

他使用循环来创建每个月的按钮:

        @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事件,因此,当用户选择其他年份时,将使用该年份的新参数值调用操作事件:

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

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

        window.location.href = url;
    }

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

我现在所困扰的是,如果用户单击其他月份的按钮,如何将新的月份值和当前选定的年份作为年度参数传递给操作方法。

相反,如果更改年份,则将onclick事件传递给当前单击的月份。

1 个答案:

答案 0 :(得分: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;
    }

此代码可同时满足您所说的功能。

是的,我们有一个更好的选择,但是像您所做的那样继续执行代码以使您更轻松,我继续这样做。