使用 Bootstrap Modal 显示 View with MVC5/razor答案

【问题标题】：Using Bootstrap Modal to display View with MVC5/razor使用 Bootstrap Modal 显示 View with MVC5/razor
【发布时间】：2014-07-04 00:20:00
【问题描述】：

我有一个用户列表视图，其中包含一个用于显示用户的 foreach。

用户名可点击：

@Html.ActionLink(item.UserName, "UserSetAccess", new { id=item.Id }, new{ @class = "dialog" } )

呈现的 HTML：

<a href="/Admin/UserSetAccess/37ebbad8-c952-4a75-91d2-197d78d1b175" class="dialog">testCustomer7@example.com</a>

点击链接会触发这个 jQuery：

$(function () {
    $('a.dialog').click(function () {
        var url = $(this).attr('href');
        var dialog = $('<div style="display:none"></div>').appendTo('body');
        dialog.load(url, {},
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({
                    close: function (event, ui) {
                        dialog.remove();
                    }
                });
            });
        return false;
    });
});

此页面上没有 <form> 标记，但我在控制器中的 GET 和 POST UserSetAccess 操作上都设置了一个断点，唯一受到影响的是 POST，它弄乱了对话框。

为什么 .load() 发出 POST 而不是 GET？该对话框最初应弹出并包含来自 GET 的视图，然后允许更改，以便我可以提交它们并执行 POST。

有没有人发现上面的代码有问题，或者有其他方法可以让它正常工作？我研究了 .load() 并没有看到任何说它发出 POST 的地方。

编辑

根据要求，我将控制器操作方法包括在内。这两个几乎都是默认的。我在 POST 操作上注释掉了 ValidateAntiForgeryToken 属性，因为它出错了 - 可能与我的问题相同。稍后我会解决这个问题。

获取控制器操作：

    //
    // GET: /Admin/UserSetAccess/1
    public async Task<ActionResult> UserSetAccess(string id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        var user = await UserManager.FindByIdAsync(id);
        if (user == null)
        {
            return HttpNotFound();
        }

        var userRoles = await UserManager.GetRolesAsync(user.Id);

        return View(new UserProfileViewModel()
        {
            Id = user.Id,
            Email = user.Email,
            IsApproved = user.IsApproved,
            Name = user.Name,
            Company = user.Company,

            RolesList = RoleManager.Roles.ToList().Select(x => new SelectListItem()
            {
                Selected = userRoles.Contains(x.Name),
                Text = x.Name,
                Value = x.Name
            })
        });
    }

POST 控制器动作：

    //
    // POST: /Admin/UserSetAccess/5
    [HttpPost]
    //[ValidateAntiForgeryToken]
    public async Task<ActionResult> UserSetAccess([Bind(Include = "Email,Id,IsApproved,Name,Company")] 
        UserProfileViewModel editUser, params string[] selectedRole)
    {
        if (ModelState.IsValid)
        {
            var user = await UserManager.FindByIdAsync(editUser.Id);
            if (user == null)
            {
                return HttpNotFound();
            }

            user.UserName = editUser.Email;
            user.Email = editUser.Email;
            user.IsApproved = editUser.IsApproved;
            user.Name = editUser.Name;
            user.Company = editUser.Company;

            var userRoles = await UserManager.GetRolesAsync(user.Id);

            selectedRole = selectedRole ?? new string[] { };

            var result = await UserManager.AddToRolesAsync(user.Id, selectedRole.Except(userRoles).ToArray<string>());

            if (!result.Succeeded)
            {
                ModelState.AddModelError("", result.Errors.First());
                return View();
            }
            result = await UserManager.RemoveFromRolesAsync(user.Id, userRoles.Except(selectedRole).ToArray<string>());

            if (!result.Succeeded)
            {
                ModelState.AddModelError("", result.Errors.First());
                return View();
            }
            return RedirectToAction("Users");
        }
        ModelState.AddModelError("", "Something failed.");
        return View();
    }

【问题讨论】：

能否发布您的两个服务器端方法（GET 和 POST），包括它们或类的任何属性。
贾斯汀，我编辑了问题并包含了两个控制器操作。谢谢。

标签： jquery asp.net-mvc twitter-bootstrap razor

【解决方案1】：

POST 发生的原因是因为您将对象传递给 .load() 方法。来自jQuery documentation：

如果数据作为对象提供，则使用 POST 方法；否则，假定为 GET。

您的代码应如下所示：

$(function () {
    $('a.dialog').click(function () {
        var url = $(this).attr('href');
        var dialog = $('<div style="display:none"></div>').appendTo('body');
        dialog.load(url,
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({
                    close: function (event, ui) {
                        dialog.remove();
                    }
                });
            });
        return false;
    });
});

请注意，我在对 .load() 的调用中省略了 {}。

【讨论】：