在 MVC 中的部分视图内重定向答案

【问题标题】：Redirect within partial view in MVC在 MVC 中的部分视图内重定向
【发布时间】：2016-03-23 19:24:25
【问题描述】：

我有一种奇怪的情况。我正在使用 ASP.NET MVC 框架创建一个站点，其中包含一个包含用户图片、信息等的配置文件页面。我有一个名为 Profile 的视图，它使用 Ajax 操作链接将部分视图加载到一个 div 中。这是一个例子：

    @Ajax.ActionLink("Basic Info", "Index", "BasicInfo", 
    new {id=Model.UserName},new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "content",
        HttpMethod = "GET"
    })

BasicInfo 的 Index 动作只是显示用户的基本信息。我想在该部分视图中有一个编辑链接，当按下时加载另一个操作方法，编辑我可以在其中编辑值（另一个部分视图）。我有几个问题：

1) 我没有将 Profile 设置为布局，即使它类似于 ASP.NET 中的母版页，因为它需要一个控制器。有没有办法创建一个拥有自己控制器的布局？

2) 如何在不进行回发的情况下在局部视图中进行重定向，即将包含先前由 Ajax 调用的局部视图的 div 更新为编辑视图？

3) 我希望这一切都有意义。我会看到一个包含此人基本信息的个人资料，我可以在该视图中按编辑，然后将该基本信息控制器的编辑视图加载到 div 中，而无需进行回发。实现这一目标的最佳方法是什么？

【问题讨论】：

标签： c# asp.net .net asp.net-mvc asp.net-mvc-4

【解决方案1】：

您会发现使用 jQuery ajax 方法比使用 Ajax.ActionLink() 和 Ajax.BeginForm() 方法更容易。在主视图中

<button type="button" class="details" data-id="Model.UserName">View details</button>
<div id="content"></div>

var detailsUrl = '@Url.Action("Details", "User")';
var editUrl = '@Url.Action("Edit", "User")';
// Display the details view
$('.details').click(function() {
    $.get(detailsUrl, { id: $(this.data('id') }, function(response) {
        $('#content').html(response);
    });
});
// Display the edit view
$('#content').on('click', '#edit', function() {
    $.get(editUrl, { id: $(this.data('id') }, function(response) {
        $('#content').html(response);
    });
});
// Post the edit form and replace with the updated details view
$('#content').on('click', '#save', function() {
    var id = $(this).data('id');
    var data = $(this).closest('form').serialize();
    $.post(editUrl, data, function(response) {
        if (response) {
            $.get(detailsUrl, { id: id }, function() {
                $('#content').html(response);
            });
        } else {
            // Oops
        }
    }).fail(function (result) {
        // Oops
    });
});

以上假设UserController具有以下方法

public PartialViewResult Details(int ID) // or string?
{
    // Get the user model based on the ID
    return PartialView("_Details", model);
}
public PartialViewResult Edit(int ID) // or string?
{
    // Get the user model based on the ID
    return PartialView("_Edit", model);
}
public JsonResult Edit(UserModel model) // replace with the name of your model
{
    // Save the model
    return Json(true); // indicate success
}

部分视图在哪里

_Details.cshtml

@model UserModel
.... // display properties of the model
<button type="button" id="edit" data-id="Model.UserName">Edit</button>

_Edit.cshtml

@model UserModel
<form>
    .... // controls for properties of the model
    <button type="button" id="save" data-id="Model.UserName">Save</button>
</form>

【讨论】：

这看起来很棒！不过，快速的问题，如果某些事件的处理存在于视图之外，这不会破坏详细信息和编辑视图的某种自包含封装规则吗？我还想加载多个视图，每个视图都有自己的逻辑，并带有自己的编辑和保存网址。
不，一点也不。但请注意，我只是在答案中给出了基本结构。还有很多其他的事情需要考虑，例如你有客户端验证吗，在这种情况下你需要在保存之前触发它。

【解决方案2】：

我可能会误解一些事情。我认为您正在尝试将页面的一部分的显示视图翻转为页面的该部分的编辑视图。

我会保持一般性，因为没有足够的代码可以直接引用。

您应该针对可能发生的各种点击注册 javascript 事件处理程序（在单独文件中的 jquery 闭包中是我个人的偏好）。这些处理程序应请求所需的任何操作（返回部分视图）。

例如当有人单击编辑链接时，处理程序调用 /GetEditStuff 操作，获取部分视图，并在成功时清除父 div 的先前内容并将其替换为部分视图。

【讨论】：