Amir Jalali
Amir Jalali

Reputation: 3212

asp.net mvc partialview @Ajax.ActionLink doesn't work

I have a view page

my view page

<div id="beReplaced">
    @Ajax.ActionLink("please click on me to bring the partial view",
                     "PatrialViewToBeCalled",
                     new AjaxOptions()
                        {UpdateTargetId = "beReplaced",
                        InsertionMode = InsertionMode.InsertAfter,
                        HttpMethod="Get",
                        LoadingElementId = "prgress" })
 </div>

i have a Controller

public PartialViewResult PatrialViewToBeCalled()
{
    var customer = db.Customers.First();

    return PartialView("PartialViewThatMustBeShow",customer);
}   

but when i click on the generated link it brings me to a new page instead of replacing or appending the partial view to the div tag.

What's the problem?

Upvotes: 8

Views: 8359

Answers (5)

Br2
Br2

Reputation: 167

I've just been working on it for too long, thinking it did not work. Viewing the page source didn't show anything either.

Eventually, I found out it actually did work when I saw the successful requests in the console of Firebug. It only was showing it off screen. In the HTML tab of Firebug I finally found the output, even though it does not show up in the page source.

Upvotes: 0

NoWar
NoWar

Reputation: 37672

If you are working with ASP .NET MVC 4 make sure that

  @Scripts.Render("~/bundles/jquery")

is in the end of the body tag as well.

      @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html> 

Upvotes: 0

Amir Jalali
Amir Jalali

Reputation: 3212

I found the solution. The problem was due to the corrupted unobtrusive-ajax.min.js file.

Upvotes: 1

PreethaA
PreethaA

Reputation: 925

It could have been that you were missing the:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

In the main view. This tells the main view to recognize the ajax helper.

Upvotes: 10

Shyju
Shyju

Reputation: 218942

If you have jQuery loaded into your page, why not use the simple jquery get / load method to get the partial view ?

<div id="beReplaced">
  <a href="#" id="lnk1">please click on me to bring the partial view</a>
</div>

Javascript

$("#lnk1").click(function(){
$.get('/controller/PatrialViewToBeCalled', function(data) {
         $('#beReplaced').html(data);
      });
});

Upvotes: 0

Related Questions