发布到 MVC 控制器操作以使用 jquery 返回视图

Question

我对微软的 MVC 框架有点陌生，似乎被困在这个问题上。

我正在尝试将一个 json 格式的 id 发布到我的控制器操作中，控制器返回一个带有模型的视图，所以我没有返回任何响应来处理数据的成功回调。该调用不需要是 ajax 调用，我想从我的表行上的点击事件中显示一个全新的视图。

我的代码如下：

Jquery，在我的表格主体行上添加了一个点击事件，当我点击一行时，我会获取该行的 id 并发布到特定的控制器操作（/Document/Details）

$(document).ready(function () {
$("#tbdocuments").on("click", "tbody tr", function (e) {
    var id = $(this).attr("data-id");
    console.log(id);
    $.post("/Document/Details", { "id": id })
});
})

Mvc 控制器：

控制器成功接收到客户端传来的id（点击表格行），我正确地获取我的模型传递给视图。

  public ActionResult Details(string id)
    {
        var model = documentHelper.FetchSingleDocument(Guid.Parse(id));

        return View(model);
    }

Razor 查看详情.cshtml：

这是我的标记所在的视图。

@model DocumentBuddy.Mvc.ViewModels.DocumentViewModel

@{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_LayoutSecure.cshtml";
}
<h2>Details</h2>
<div>
<h4>DocumentViewModel</h4>
<hr />
<dl class="dl-horizontal">
    <dt>
        @Html.DisplayNameFor(model => model.DocumentId)
    </dt>
    <dd>
        @Html.DisplayFor(model => model.DocumentId)
    </dd>
    <dt>
        @Html.DisplayNameFor(model => model.Name)
    </dt>
    <dd>
        @Html.DisplayFor(model => model.Name)
    </dd>
    <dt>
        @Html.DisplayNameFor(model => model.Description)
    </dt>
    <dd>
        @Html.DisplayFor(model => model.Description)
    </dd>
    <dt>
        @Html.DisplayNameFor(model => model.MimeType)
    </dt>
    <dd>
        @Html.DisplayFor(model => model.MimeType)
    </dd>
    <dt>
        @Html.DisplayNameFor(model => model.Length)
    </dt>
    </dl>
</div>
<p>
 @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
 @Html.ActionLink("Back to List", "Index")
</p>

单击表格行后，它会触发控制器并获取模型，但是“详细信息”视图永远不会显示，并且仍停留在同一视图上。我也检查了页面，没有显示任何错误。我很困惑如何在没有 ajax 调用的情况下在 MVC 中执行此操作，我需要重定向到新视图。任何帮助将不胜感激。谢谢。

Answer 1

到目前为止，您的代码是完美的。您现在要做的就是显示详细信息页面。您必须在 post 方法中处理来自服务器的响应。它看起来像这样

$(document).ready(function () {
    $("#tbdocuments").on("click", "tbody tr", function (e) {
        var id = $(this).attr("data-id");
        console.log(id);
        $.post("/Document/Details", { "id": id }, function(detailsHtml){
           $("selector here").html(detailsHtml);
        })
    });
})

所以只需更新“此处的选择器”，它就会在所选元素中显示您的详细信息表单。

如果您想重定向到全新的详细信息页面，则不要使用 jquery post 方法，而是设置窗口位置。即

$(document).ready(function () {
    $("#tbdocuments").on("click", "tbody tr", function (e) {
        var id = $(this).attr("data-id");
        window.location.href = "/Document/Details/" + id;
    });
})

希望它清楚。