如何在不返回调用页面的情况下从 Ajax.Post 调用 MVC 视图

Question

我有一个使用 JavaScript 更新本地对象数组的网页，我想导航到另一个页面，传递对象数组，这被转换为一个列表，我使用 Ajax.Post 可以正常工作，但是，我只希望返回视图（模型）像使用@Html.ActionScript 或@Url.Action 一样显示页面。但它会返回到调用函数，并带有一个构建的页面。

有没有办法将 post 函数调用为“即发即忘”类型的调用？

或者有没有办法调用@Html.ActionScript 或@UrlAction，将复杂数组作为参数传递？

这是我正在使用的一些代码

JS

    $.ajax({
    url: "/Home/About",
    type: "POST",
    data: JSON.stringify({ 'clients': clients }),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    traditional: true,
    success: function (data) {
        alert(data);
    },
    error: function (data){
        alert(data);
    },
    done: function (data) {
        alert(data);
    }
});

控制器

        [HttpPost]
    public ActionResult About(List<ClientDataModels> clients)
    {
        //Do something, all i need to do is pass the clients
        //to the view, and then dynamically add items based
        //on the content

        return View(clients);
    }

关于.cshtml

    @using SST.Monitoring.Models
@model IEnumerable<ClientDataModels>
@{
    //Layout = null;
    ViewBag.Title = "About";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<div class="container" style="width:900px">
    @if(@Model != null)
    { 
        foreach ( var client in @Model )
        {
            <div style="width:150px; float:left;">
                <div class="tile-container">
                    <div class="tile bg-cyan fg-white" data-role="tile">
                        <div class="tile-content iconic">
                            <span class="icon mif-display mif-2x"></span>
                            <span id="ClientCount" class="tile-badge bg-darkBlue">0</span>
                            <span class="tile-label">client.ClientGroup</span>
                        </div>
                    </div>
                </div>
            </div>
        }
    }
</div>

返回给 ajax 调用的页面具有我期望的 3 个项目（tiles），但我希望它只是触发并忘记，并让视图像使用 @html.actionscript 一样显示还是事件只是一个 href 链接？

Answer 1

据我了解，您想要实现这样的目标。

你可以有一个在你的控制器中渲染视图的方法。

public static string RenderPartialView(this Controller controller, 
        string viewName, object model)
    {
        if (string.IsNullOrEmpty(viewName))
            viewName = controller.ControllerContext.RouteData
                .GetRequiredString("action");

        controller.ViewData.Model = model;
        using (var sw = new StringWriter())
        {
            ViewEngineResult viewResult = ViewEngines.Engines
                .FindPartialView(controller.ControllerContext, viewName);
            var viewContext = new ViewContext(controller.ControllerContext, 
                viewResult.View, controller.ViewData, controller.TempData, sw);
            viewResult.View.Render(viewContext, sw);

            return sw.GetStringBuilder().ToString();
        }
    }

如果您要返回视图，此方法将创建您需要的 html。

您必须将此 html 添加到您的响应（json 响应）中。

return Json(new
{
    HtmlFromRenderPartialView = this.RenderPartialView("_SomeView", yourModel),
    Message = message
}, JsonRequestBehavior.AllowGet);

当您收到 ajax 响应时，您将拥有 html 和 empty() 您的容器和 append(response.HtmlFromRenderPartialView) 到您的容器。

更新：

    [HttpPost]
    public About(List<ClientDataModels> clients)
    {
        //Do something, all i need to do is pass the clients
        //to the view, and then dynamically add items based
        //on the content
      return Json(new
        {
    HtmlFromRenderPartialView = this.RenderPartialView("_About", clients),
        }, JsonRequestBehavior.AllowGet);
    }



$.ajax({
    url: "/Home/About",
    type: "POST",
    data: JSON.stringify({ 'clients': clients }),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    traditional: true,
    success: function (response) {
       $('#container').html(response.HtmlFromRenderPartialView );
    },

Answer 2

好的，因此基于我得到渲染页面的事实，我刚刚将它加载到当前窗口中..

        var w = window.open("","_self");
        $(w.document.body).html(data.responseText);

这似乎已经成功了...感谢您的帮助！