ASP.NET MVC Page not Updated when using AJAX

Question

I have an ASP.NET MVC project where I want to post an article to the database then display a snippet of the article on the page. When a user comments, I also want to display the comment once I have saved to the database. I am using AJAX for this and call OnFailure and OnSuccess methods in both cases.

The OnFailure method only fires up when I save a post and not a comment (this is because the page isn't updated even when I save successfully). The OnSuccess method isn't invoked at all which is because my page isn't updated.

I am using jquery 2.1.4 and have jquery.unobtrusive-ajax script loaded in my project

Here is my code.

//View for creating a post

 @using (Ajax.BeginForm("Create", "Post",
new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "insertnewpostbelow",
    InsertionMode = InsertionMode.InsertAfter,
    OnSuccess = "postingSucceeded()",
    OnFailure = "postingFailed()"
}))
 {
  //View code left out 
 }

//Server side for saving post and updating PartialView

 [HttpPost, ValidateAntiForgeryToken, ValidateInput(false)]
    public async Task<PartialViewResult> Create
        ([Bind(Include = "ID,Title,Message,PostedOn,isAbuse,By")] Post post)
    {
        if (ModelState.IsValid)
        {
            var list = new List<Post>();
            list.Add(post);

            try
            {
                db.Posts.Add(post);
                await db.SaveChangesAsync();

                return PartialView("_Posts", list);
            }
            catch (RetryLimitExceededException)
            {
                ModelState.AddModelError("", "Unable to login, please try again and contact administrator if the problem persists.");

                //If we got this far, model has errors.
                ViewBag.By = new SelectList(db.Members, "ID", "FullNames", post.By);
                return PartialView("_Posts", post);
            }
        }

        //If we got this far, model has errors.
        ViewBag.By = new SelectList(db.Members, "ID", "FullNames", post.By);
        return PartialView("_Posts", post);
    }

//My JavaScript file

    function postingSucceeded() {
    alert("Posting succeeded.");
}

function postingFailed() {
    alert("Posting failured.");
}

//Portion of the View to update

<div id="big-posts">
        <span id="insertnewpostbelow"></span>

        @Html.Partial("_Posts", Model.Posts)
    </div>

What am I missing out, thanks in advance.

You don't need parenthesis in ajax.beginform parameters it should be OnSuccess = "postingSucceeded", OnFailure = "postingFailed" — Alex Art.
– Alex Art., Commented Sep 26, 2015 at 17:46
Thanks @AlexArt for pointing that out. However after changing the code, my problem isn't fixed — Dev
– Dev, Commented Sep 28, 2015 at 8:14

Mr. Robot Jr. · Accepted Answer · 2015-10-02 11:50:49Z

4

You need to put the content of the returned partial view somewhere on the page

<div id="big-posts">
   <span id="insertnewpostbelow"></span>
   <div id="newPost"></div>
</div>

On the call back function try:

function postingSucceeded(data) {
    $("#newPost").html(data);
}

Hope this helps!

answered Oct 2, 2015 at 11:50

Mr. Robot Jr.

665 bronze badges

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

Comments

Amirhossein Mehrvarzi · Accepted Answer · 2015-10-03 07:53:46Z

4

+50

This is because you have an Ajax form in _Posts PartialView. After the placement, say, after <span id="insertnewpostbelow"></span> you need to run jquery.unobtrusive-ajax on page again.

Note that the scripts will render on page loads, not after any changes in page (like updates by PartialView).

Solution: call the script again, after the page update :)

edited Oct 3, 2015 at 7:53

answered Oct 1, 2015 at 8:34

Amirhossein Mehrvarzi

19.1k7 gold badges52 silver badges74 bronze badges

Comments

Muhammad Usman · Accepted Answer · 2015-10-06 07:26:39Z

2

First thing you don't need to have parenthesis

OnSuccess = "postingSucceeded()"
                            ^^^

OnFailure = "postingFailed()"
                         ^^^

just

OnSuccess = "postingSucceeded",
OnFailure = "postingFailed"

and now HTML code

<div id="big-posts">
   <span id="insertnewpostbelow"></span>
   <div id="AppendPostsHere"></div>
</div>

and javascript code out side the $(document).ready(....)

function postingSucceeded(newPosts) {
    $("#AppendPostsHere").html(newPosts);
}

hope this willl work!

answered Oct 6, 2015 at 7:26

Muhammad Usman

1,3625 gold badges19 silver badges35 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC Page not Updated when using AJAX

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related