MVC Multiple Ajax Calls

Question

I am having trouble making ajax calls in my MVC application. I have tried two different ways to be able to have an ajax actionlink load a partial and then that partial submit a form as an ajax call, but I am having trouble.

First Attempt

// will load the partial page and will submit the form successfully, but each time an actionlink is clicked it will load another ajax script so when clicking on an actionlink it will call to the controller one time on first click, two times on second, etc...

Index.cshtml

@Ajax.ActionLink("Car 1, "EditCars", new { role = @Model.Car1}, new AjaxOptions
               {
                   HttpMethod = "GET",
                   InsertionMode = InsertionMode.Replace,
                   UpdateTargetId = "permissions",
               })
@Ajax.ActionLink(Car 2, "EditCars", new { role = @Model.Car2}, new AjaxOptions
               {
                   HttpMethod = "GET",
                   InsertionMode = InsertionMode.Replace,
                   UpdateTargetId = "permissions",
               })

<div id="permissions"></div>
// need to include this script to get the ajax action links to work
@Html.Script("~/Scripts/Main/jQuery.unobtrusive-ajax.js")

EditCars.cshtml

@using (Ajax.BeginForm("EditCars", "CarManagement", new AjaxOptions()))
{
     @Html.EditorFor(model => model.CarName)
     <input type="submit" />
}

 // need to include this script to get the ajax submit form to work
@Html.Script("~/Scripts/Main/jQuery.unobtrusive-ajax.js")

Second Attempt

// the action links work, but the ajax submit form does not. The controller returns to a new page

Index.cshtml

@Ajax.ActionLink("Car 1, "EditCars", new { role = @Model.Car1}, new AjaxOptions
               {
                   HttpMethod = "GET",
                   InsertionMode = InsertionMode.Replace,
                   UpdateTargetId = "permissions",
               })
@Ajax.ActionLink(Car 2, "EditCars", new { role = @Model.Car2}, new AjaxOptions
               {
                   HttpMethod = "GET",
                   InsertionMode = InsertionMode.Replace,
                   UpdateTargetId = "permissions",
               })
@using (Ajax.BeginForm("EditCars", "CarManagement", new AjaxOptions()))
{
    <div id="permissions"></div>
    <input type="submit" />
}
// need to include this script to get ajax calls to work
@Html.Script("~/Scripts/Main/jQuery.unobtrusive-ajax.js")

EditCars.cshtml

@Html.EditorFor(model => model.CarName)

score 0 · Answer 1 · answered Jun 28 '15 at 09:11

0

Get the latest version of jQuery.unobtrusive-ajax.js using Nuget Manager:

Install-Package Microsoft.jQuery.Unobtrusive.Ajax

answered Jun 28 '15 at 09:11

Hedayat Abedijoo

67
2
10

MVC Multiple Ajax Calls

1 Answers1