Update ASP.NET Partial View With Ajax.BeginForm

Question

I am trying to update a partial view in ASP.NET MVC with an ajax form contained within the partial view. However whenever the form is submitted the entire page changes to the partial view, not just the part of the page where the partial view is contained.

My partial View Form:

@using (Ajax.BeginForm("Archive", "Products", new { id = note.ID }, 
    new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.ReplaceWith,UpdateTargetId = @*Unique ID*@ }))
{
    @Html.AntiForgeryToken()
    <input type="submit" value="Archive" class="btn btn-default"/>
}

The Function It Calls:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Archive(int ID)
{

    ProductNote model = db.ProductNotes.FirstOrDefault(x => x.ID == ID);

    model.Archived = true;
    db.SaveChanges();
    Product modelP = db.Products.FirstOrDefault(z => (z.ProductNotes.FirstOrDefault(y => y.ID == model.ID).NoteText != null));
    System.Diagnostics.Debug.WriteLine(modelP.ID.ToString() + "Test Test 123");
    System.Diagnostics.Debug.WriteLine("Test\n\n\n");
    return PartialView("_ProductNotes", modelP);

}

Have you implemented all jquery refrences needed to excecute that? I mean the jquery.ajax.unobtrusive file in your Main View. — MRebati
– MRebati, Commented Jul 7, 2016 at 15:16

MStew · Accepted Answer · 2016-07-07 15:56:30Z

1

Add a reference to the following jquery libraries at the bottom of your partial view:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

answered Jul 7, 2016 at 15:56

MStew

1,26510 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TranQ · Accepted Answer · 2016-07-07 16:00:46Z

0

I think you should try to put your Patialview inside a div tag with an id

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<div id="replace-this">
        @using (Ajax.BeginForm("Archive", "Products", new { id = note.ID }, 
    new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.ReplaceWith,UpdateTargetId = "replace-this" }))
{
    @Html.AntiForgeryToken()
    <input type="submit" value="Archive" class="btn btn-default"/>
}
</div>

edited Jul 7, 2016 at 16:00

answered Jul 7, 2016 at 14:48

TranQ

1391 silver badge7 bronze badges

4 Comments

Ellis Over a year ago

I actually tried this while debugging, doesn't have any affect on the outcome

TranQ Over a year ago

Did you have "jquery.unobtrusive-ajax.js" script in your view. Also, are there any element that have the same id like your target?

Ellis Over a year ago

Yes and no, all id's are the same and the script is included in the view

TranQ Over a year ago

I installed Microsoft.jQuery.Unobtrusive.Ajax in from Nuget Package. Then I added <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> to my page. It worked fine.

Collectives™ on Stack Overflow

Update ASP.NET Partial View With Ajax.BeginForm

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related