Ajax MVC部分视图

本文关键字：视图 MVC Ajax | 更新日期: 2023-09-27 18:14:01

我在web应用程序中渲染partialView时遇到了一个问题。我要做的是使用@Ajax.ActionLink()来填充一个div当按钮/链接按下与另一个视图的内容。我遇到的问题是，而不是填充div它重新加载内容到一个新的页面，而不是填充div。我查过的所有其他答案都是一样的，我的语法几乎是一样的。在这两者之间有没有什么是我错过的或者是我在开始尝试之前就应该知道的?

这是我的actionlink

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

编辑:在问题中添加一些文本使其更清楚，将其加粗以使其更清楚。我对其他解决方案持开放态度

编辑:意识到我真正想要的是bootstrap中的模态框架。谢谢你的建议

Ajax MVC部分视图

请在控制台中运行:

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

安装请遵循以下步骤:https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/

那么你必须使用位于Scripts文件夹

中的脚本文件

安装Unobtrusive js文件:

Run in nuget: Install-Package Microsoft.jQuery.Unobtrusive.Ajax

添加到你的视图:

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

这不是最初问题的答案，而是另一种解决方案:

使用html.action 

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

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

发现我真正想要的是bootstrap中的模态框架。

相关文章：