Question

我有一种奇怪的情景。我使用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而不进行回发。什么是实现这一目标的最佳方式？

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

Answer 2

我可能会误解事物。我认为您正在尝试翻转页面某一部分的显示视图，以获取该部分页面的编辑视图。

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

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

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

在MVC中的局部视图中重定向

2 个答案: