CODEWITHSUNDEEP
c#jqueryajaxasp.net-mvcrazor
Iltharion
Iltharion

Reputation: 165

Ajax MVC partialView

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

Upvotes: 1

Views: 342

Answers (4)

Iltharion
Iltharion

Reputation: 165

Found out what I was really looking for was the modal framework in bootstrap. Fixed my issues in 5 minutes.

Upvotes: 0

ThunD3eR
ThunD3eR

Reputation: 3456

This is not the the answer to the original question but an alternative soloution:

using html.action

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

This will call an action and render the view that you return from the action.

Upvotes: 0

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48367

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

Upvotes: 1

Ryan Searle
Ryan Searle

Reputation: 1627

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

Upvotes: 0

Related Questions