Question

我正在尝试创建一个“锁定”/“解锁”按钮/链接，用户可以使用MVC4在列出用户帐户的网格中单击该按钮/链接。在WebForms中，这是一个相对简单的任务，即将ImageButton放入列的网格模板中，并将其连接到该按钮的Command事件，然后查找针对该用户显示的“Lock”/“Unlock”文本。但我似乎无法弄清楚如何在MVC4中做到这一点。或者至少不是没有跳过相当多的箍来让ajax / jquery与网格中的每个用户玩得很好。

目前我的网格列出了在系统上注册的用户，并且此网格正在正确显示。网格以简单视图显示，控制器返回属性为Users的模型。该属性反过来是UserInfo对象的列表，其中包含UserName，Name和IsActive等基本用户详细信息。

我尝试过使用Html.RenderAction来调用一个名为Lock的专用操作来完成任务但是在尝试将用户详细信息传递给控制器时遇到错误（In ASP.NET MVC 2 - How do I get Route Values into my navigation controller so I can highlight the current link? - 不适用于我）。

同样，我尝试创建局部视图，但又一次出现错误（Html.RenderPartial giving me strange overload error?而不是，它对我来说也不起作用）。

我一直在搜索这些个人问题以及我现在想要做的事情的替代方法，并且我没有接近成功完成这项任务。

有没有一种简单的方法来做我描述的事情？我是否必须为每个用户行写出单独编号的元素标记以将jquery函数附加到？

更新生成网格的代码;

if (Model != null && Model.Users != null && Model.Users.Count > 0)
{
    <table class="table table-striped">
        <tr>
            <th>
                User
            </th>
            <th>
                Name
            </th>
            <th>
                Lock/Unlock
            </th>
        </tr>
        @foreach (UserInfoModel user in Model.Users)
        {
            <tr>
                <td>
                    @Html.ActionLink(user.UserName, "Edit", new { id = user.PersonID })
                </td>
                <td>
                    @Html.DisplayFor(m => user.Name)
                </td>
                <td>
                    @*@Html.Action("Lock", new { personID = user.PersonID, isLocked = null as bool?})*@
                    @*@{ Html.Render("_Lock", new { personID = user.PersonID, isLocked = null as bool? }); }*@
                    @Html.ActionLink("Lock", "Lock", new { personID = user.PersonID, lockAccount = user.IsActive })
                </td>
            </tr>
        }
    </table>

控制器代码尝试;

[Authorize(Roles = LMSRoles.Administrators)]
public ActionResult Lock(int personID, bool lockAccount)
{
    return Json(null, JsonRequestBehavior.AllowGet);// PartialView("_Lock");
}

Answer 1

您的代码看起来很好。只要您点击链接Lock，就应该重定向到操作Lock（如果用户被授权使用角色Administrators）。

您似乎更愿意做一个ajax请求。在这种情况下，我更喜欢使用jquery，正如我在前面的评论中所说的那样。

为了做到这一点，请改变你的ActionLink：

@Html.ActionLink("Lock", "Lock", 
     new { personID = user.PersonID, lockAccount = user.IsActive }, 
     new { @class="lock" }) // Add a dummy css class 'lock'

在文档的就绪事件处理程序中编写以下脚本：

// Register click handler for any element with the class 'lock' (works only if the element an 'a' tag).
$('.lock').click(function (e) {
    // Prevent the default functionality.
    e.preventDefault();

    // Do the get ajax request (you can do post as well, but not required in this case).
    $.ajax({
        type: "GET",
        url: $(this).attr('href'), // Take the URL from link's href
        contentType: 'application/json',
        async: true,
        beforeSend: function () {
            // Display loading image
        },
        success: function (result) {
            // Handle the response here. Ex: Inform the user that, lock operation is succeeded.
        },
        complete: function () {
            // Hide loading image.
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // Handle error.
        }
    });

});

代码很简单＆amp;虽然jquery对你来说是新的，但我仍然会提出详细的评论。

PS：在使用此脚本之前，请不要忘记包含jquery文件。

在MVC4 Web网格中创建一个可切换的图像按钮

1 个答案: