Question

我对microsofts MVC框架有点新意，似乎仍然坚持这个问题。

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

我的代码如下：

Jquery，在我的表体行上添加了一个click事件，当我点击一行时，我得到行的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 Controller：

控制器成功接收从客户端传递的id（表行单击），然后我正确获取模型以传递给视图。

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

        return View(model);
    }

Razor查看Details.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>

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

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

希望它清楚。

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

1 个答案: