使用相同的局部视图和不同的按钮

时间:2016-02-29 03:06:16

标签: asp.net-mvc partial-views asp.net-mvc-views

我有以下部分视图,其中列出了表中的用户。每行都有一个“注册”按钮,用于将用户注册到所选课程。

我需要几乎相同的视图来完成另一项任务。但是,我需要将用户添加到讨论(而不是将他们注册到课程)。我知道我可以创建另一个视图并将“注册”按钮更改为“添加”按钮。

但是,我想知道是否有更有效的方法。我的方法似乎不容易维护。

@model IEnumerable<ApplicationUser>
<h4>Search results:</h4>
<table class="table-condensed" style="font-size:smaller">
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
                <input class="btn_Enroll" data-userid="@item.Id" value="Enroll" type="button" />
            </td>
        </tr>
    }

</table>

<script>
    $(".btn_Enroll").click(function () {
        //code for enrolling
        var course_id = $("#hdn_SelectedCourseId").val();
    })
</script>

1 个答案:

答案 0 :(得分:0)

实现此目的的一种方法是设置调用操作方法的属性,该属性将呈现此视图

<table class="table-condensed" style="font-size:smaller" data-module="@ViewData["module"]"></table>

然后在你的JS代码中使用它

<script>
$(".btn_Enroll").click(function () {
    //code for enrolling
    var course_id = $("#hdn_SelectedCourseId").val();
    var moduleType = $(this).closest("table").attr("data-module");
    if (moduleType === "enroll")
    {
        //Do enrollment
    }
    else if (moduleType === "discussion")
    {
        //discuss here
    }


})

例如,在主页上,您有

之类的链接
   @Html.ActionLink("enrollment", "Index", new { module = "enroll" })
   @Html.ActionLink("Discussion", "Index", new { module = "discussion" })

并且您的ApplicationUserController具有像这样的索引操作

public ActionResult Index(string module)
{
    ViewData["module"] = module;

    return View();
}

但是,如果项目或要求的范围可以针对注册和/或讨论进行更改,那么最好将其分开,以避免单个页面和单个JS代码中的代码复杂性。