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

Question

我有以下部分视图，它在表格中列出了用户。每行都有一个 Enroll 按钮，用于将用户注册到所选课程。

对于另一项任务，我需要几乎相同的视图。但是，我需要将用户添加到讨论中（而不是将他们注册到课程中）。我知道我可以创建另一个视图并将 Enroll 按钮更改为 Add 按钮。

但是，我想知道是否有更有效的方法来做到这一点。我的方法似乎不容易维护。

@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>

Answer 1

一种方法是通过设置将呈现此视图的调用操作方法的属性

<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 代码中的代码复杂。