Question

I've run into a problem with rendering a partialView in my web application. What I'm trying to do is using a @Ajax.ActionLink() to fill a div when a button/link is pressed with the content of another view. The issue I'm meeting is that instead of filling the div it reloads the content into a new page, rather than filling the div. All the other answers I've looked up says the same and my syntax is pretty much the same. Is there something in between I've missed or that I should've know before I started attempting this?

Here's my 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");

Here's the div I want to fill in

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

Here's the controller

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

EDIT:

Forgot to mention that I've got a BundleConfig.cs set up and I've made sure it works as I'm rendering my css through it, though this is the first script I've tried.

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

EDIT: added some text to the question to make it clearer, bolded it out to make it clear. I'm very much open to alternative solutions

EDIT: Realized what I was really looking for was the modal framework in bootstrap. Thanks for the suggestions

Answer 1

Please run this in console:

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

For install please follow next steps: https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/

Then you must use script file which is located in Scripts folder

Answer 2

Install the Unobtrusive js file:

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

Add this to your view:

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

Answer 3

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

使用html.action

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

这将调用一个动作并渲染您从动作返回的视图。

Answer 4

发现我真正想要的是bootstrap中的模态框架。在5分钟内解决了我的问题。

Ajax MVC partialView

4 个答案: