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

时间:2015-05-19 13:32:32

标签: javascript ajax asp.net-mvc

我有一个使用JavaScript更新本地对象数组的网页,我想导航到另一个页面,传递对象数组,这会转换为List,我使用Ajax.Post工作正常,但是,我只想要返回视图(模型)来显示页面,就像使用@ Html.ActionScript或@ Url.Action一样。但它会返回到调用函数,并带有一个内置页面。

有没有一种方法可以将帖子功能称为“火”,然后忘记'打电话?

还是有办法调用@ 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);
    }

About.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项(tile)我期望,但我希望它只是触发并忘记,并让视图显示为与@ html.actionscript一样或事件只是一个href链接?

2 个答案:

答案 0 :(得分:0)

据我了解你想要达到这样的目的。

您可以使用一种方法在控制器内渲染视图。

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

答案 1 :(得分:0)

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

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

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