Ajax 注入局部视图 - Javascript/JQuery 放置答案

【问题标题】：Ajax Injected Partial View - Javascript/JQuery placementAjax 注入局部视图 - Javascript/JQuery 放置
【发布时间】：2023-03-16 09:20:01
【问题描述】：

我有一个局部视图，我需要在页面加载时将其加载到 div 中，有人知道我该怎么做吗，我很确定它需要通过 Ajax 加载，而不仅仅是作为 @Html.Partial 加载。

我有一个 div，我将几乎所有内容加载到整个网站中，并且希望能够在页面加载时仅加载这一个部分视图，我的网站的其余部分使用 Ajax.ActionLink 来完成：

<div id="placeholder""></div>

这真是漫长的一天，我很确定我现在只是脑死了。

感谢您的帮助。

谢谢，

标记

【问题讨论】：

可能重复：stackoverflow.com/questions/3992789/…
这正是您所需要的：stackoverflow.com/questions/1570127/…

标签： c# jquery ajax asp.net-mvc

【解决方案1】：

你可以这样做：

在document.ready() 中调用您的Action，它将以字符串形式返回您的部分视图，然后您可以在jquery 中使用replace() 替换此结果：

Ajax 调用：

    $(document).ready(function() {
    $.ajax({
        url: "/ControllerName/ActionName",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data) {
            $("#placeholder").replaceWith(data);
        }
    });
});

控制器：

    [HttpPost]
    public JsonResult ActionName(ModelType model)
    {
      ......
        return Json((RenderRazorViewToString("PartialViewName", model)), JsonRequestBehavior.AllowGet);
    }

    [NonAction]
    public string RenderRazorViewToString(string viewName, object model)
    {
        ViewData.Model = model;
        using (var sw = new StringWriter())
        {
            var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
            var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
            viewResult.View.Render(viewContext, sw);
            viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
            return sw.GetStringBuilder().ToString();
        }
    }

【讨论】：

【解决方案2】：

我很确定它需要通过 Ajax 加载，而不仅仅是作为 @Html.Partial。

我有点误会了，那有什么困难？您只需通过 ajax 调用您的部分控制器方法并将返回的数据放入您的控制器中，如下所示：

客户：

<script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script>
<script>
    $(function() {
        $.ajax({
            url: "/Home/MyPartial",
            success: function(data) {
                $("#placeholder").html(data);
            }
        });
    });
</script>

<div id="placeholder"></div>

控制器：

   public ActionResult MyPartial()
    {
        return PartialView();
    }

MyPartial.cshtml：

<div>my partial</div>

【讨论】：

【解决方案3】：

如果你使用 jQuery，你可以这样做：

$('#foo').load('path/to/your/partial/file');

【讨论】：