Ajax MVC 部分视图答案

【问题标题】：Ajax MVC partialViewAjax MVC 部分视图
【发布时间】：2016-10-19 13:36:36
【问题描述】：

在我的 Web 应用程序中呈现 partialView 时遇到了问题。我想要做的是使用 @Ajax.ActionLink() 在按下 按钮/链接 时填充另一个视图的内容。我遇到的问题是，它不是填充 div，而是将内容重新加载到新页面中，而不是填充 div。我查找的所有其他答案都说相同，我的语法几乎相同。在我开始尝试之前，我是否有遗漏或应该知道的事情？

这是我的操作链接

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar">Hei</span>
                <span class="icon-bar">På</span>
                <span class="icon-bar">Deg</span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
            </ul>
        </div>
        <div>
            @Ajax.ActionLink("Last inn partial view", "_LoadView", new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId="result"})
        </div>
    </div>
</div>

<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>
@Scripts.Render("~/bundles/ajax");

这是我要填写的 div

<div class="content">
    <div class="content background">
        <div id="result">Her står det masse text</div>
    </div>
</div>
</div>

这是控制器

 [HttpGet]
    public PartialViewResult _LoadView()
    {
        return PartialView();
    }

编辑：

忘了提到我已经设置了一个 BundleConfig.cs 并且我已经确保它在我通过它渲染我的 css 时可以正常工作，尽管这是我尝试的第一个脚本。

        public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/scripts/jquery-{version}.js"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/scripts/jquery.validate*"));
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/scripts/modernizr-*"));
        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/scripts/bootstrap.js"));
        bundles.Add(new ScriptBundle("~/bundles/ajax").Include("~/scripts/jquery.unobtrusive-ajax.js", "~/scripts/jquery.unobtrusive-ajax.min.js"));
        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/bootstrap-theme.css", "~/Content/bankstyle.css"));
    }
}

编辑：在问题中添加了一些文本以使其更清晰，将其加粗以使其清晰。我非常愿意接受替代解决方案

编辑：意识到我真正想要的是引导程序中的模态框架。感谢您的建议

【问题讨论】：

你安装 jquery unobtrusive 吗？
Ajax.ActionLink 生成一个标准的锚链接和一些 JavaScript 来劫持它以通过 AJAX 处理请求，而不是更改视图的默认行为。如果发生默认行为，则意味着 JavaScript 没有运行，这表明页面上存在某种错误。
很好的描述，@ChrisPratt
考虑使用@html.Action？当页面加载并返回视图时会调用一个动作
@Ra3IDeN 他显然不想要链接，他想要使用 html 帮助器在他的视图中的元素内加载部分视图。

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

【解决方案1】：

请在控制台中运行：

PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax -Version 3.2.2

如需安装，请按照以下步骤操作：https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/

那么您必须使用位于 Scripts 文件夹中的脚本文件

【讨论】：

【解决方案2】：

安装Unobtrusive js文件：

在 nuget 中运行：Install-Package Microsoft.jQuery.Unobtrusive.Ajax

将此添加到您的视图中：

@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")

【讨论】：

谢谢，忘了说我有一个 bundleconfig 正在加载我的脚本

【解决方案3】：

这不是原始问题的答案，而是另一种解决方案：

使用html.action

<div id="contentContainer">
   @Html.Action("Action", "Controller")
</div>

这将调用一个动作并呈现您从该动作返回的视图。

【讨论】：

【解决方案4】：

发现我真正需要的是引导程序中的模态框架。在 5 分钟内解决了我的问题。

【讨论】：