0

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

目前我的网格列出了在系统上注册的用户，并且该网格正确显示。网格显示在一个简单的视图中，控制器返回一个具有属性的模型Users。该属性又是UserInfo具有基本用户详细信息的对象列表，例如 UserName、Name 和 IsActive。

我尝试过使用 Html.RenderAction 来调用一个名为 Lock 的专用操作来执行该任务，但在尝试将用户详细信息传递给控制器​​时不断出错（在 ASP.NET MVC 2 中 - 我如何获取路由值到我的导航控制器，以便我可以突出显示当前链接？ -对我不起作用）。

同样，我尝试创建一个局部视图，但再次出现错误（Html.RenderPartial 给了我奇怪的重载错误？不，它也对我不起作用）。

我一直在搜寻这些个人问题和替代方法来做我想做一天的事情，但我离成功完成这项任务还差得远。

有没有一种简单的方法来做我描述的事情？我是否必须为每个用户行写出单独编号的元素标签才能将 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");
}
4

1 回答 1

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.
        }
    });

});

代码很简单且不言自明，但我仍然给出了详细的注释，假设这jquery对你来说是新的。

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

于 2013-09-12T18:22:18.087 回答