CODEWITHSUNDEEP
ajaxasp.net-mvc
Shariful_Islam
Shariful_Islam

Reputation: 361

@Ajax.ActionLink not replacing partial view

I want to replace a div with a view using @Ajax.actionLink when I click on that link, but it isn't working.

Here is my link:

<div>
 <li>   @Ajax.ActionLink("settings","Create","Test",


new AjaxOptions { UpdateTargetId = "components" , InsertionMode = InsertionMode.Replace}
)  </li>
</div>

And my target div:

<div id="components">
</div>

I have also included these js file in the layout like that:

    <script src="~/Scripts/Controls/jquery-2.0.3.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/modernizr-2.5.3.js"></script>

And my action result:

    public PartialViewResult Create()
    {
        return PartialView("Create");
    }

Upvotes: 11

Views: 13477

Answers (4)

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

When you are writing new AjaxOptions{ --- }, instead write it as :

new AjaxOptions() { .... } and write HttpMethod also in ajaxoptions.

The correct usage of ajax.actionlink is:

@Ajax.ActionLink("Text", // <-- Text to display
                "Action method", // <-- Action Method Name
                "Controller Name", //  <--Controller Name
                new AjaxOptions()
                {
                 UpdateTargetId="CustomerList", // <-- DOM element ID to update
                 InsertionMode = InsertionMode.Replace, // <-- Replace the content of DOM element
                 HttpMethod = "GET" // <-- HTTP method(Post/Get)
                })

Upvotes: 1

EyeSirvived
EyeSirvived

Reputation: 141

For people who installed Microsoft.jQuery.Unobtrusive.Ajax(trough nu-get or not) and want to use it through a bundle, don't forget:

  • To add the library in your bundleconfig. For example:

            bundles.Add(new ScriptBundle("~/bundles/unobtrusive").Include(
                 "~/Scripts/jquery.unobtrusive*"));

  • To Render it (mine is rendered in _Layout.cshtml):

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

I know its an old post, but can't hurt to add additional information, I guess.

Upvotes: 13

Henrique de Sousa
Henrique de Sousa

Reputation: 5795

Believe it or not, I had everything setup correctly, except for one thing:

To install Microsoft jQuery Unobtrusive Ajax, run the following command in the Package Manager Console:

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

Instructions are here: https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/

Upvotes: 9

AGG
AGG

Reputation: 11

If it is MVC5? Make sure you include the correct unobtrusive ajax package i.e.,You can install NuGet package manager console with latest package

Install-Package Microsoft.jQuery.Unobtrusive.Ajax

After installing the latest one,its started working for me.

Upvotes: 1

Related Questions