Partial View is not reloading using Jquery in MVC3

Question

I am created a application in MVC3 and I want to reload the partial view on button click, but partial view is not updating.

ActionResult Method

  public ActionResult CommentForPost(int postId)
    {
        var PostComments = _commentsRepository.GetCommentsByPostID(postId).Select(u => new CommentsViewModel()
       {
           CommentUserFullName = u.CommentUserFullName,
           CommenterEmailId = u.CommenterEmailId,
           CommenterSite = u.CommenterSite,

       }).ToList();

        return PartialView("PostedComments",PostComments);
    }

Partial View inside Main View

<div id="dvPostedComment">
@Html.Partial("PostedComments", Model.Post)
</div>

Jquery

           var postId = $("#hdnPostId").val();

            var d = "postId=" + postId;
            $.ajax({
                type: "POST",
                url: "/Comments/CommentForPost",
                data: d,
                success: function (r) {
                    $('#dvPostedComment').html(data);
                },
                complete: function () {
                    alert('hello2');
                },
                error: function (req, status, error) {
                    alert('helll3');
                }
            });

It always goes in error section.

Anyone can help me.

try url: "/Comments/CommentForPost/" + postId without data: d, and why do you use POST request for this? As per your action you should do GET request — Dmitry Pavliv
– Dmitry Pavliv, Commented Jan 4, 2015 at 14:03
in your code success: function (r), but you try insert $('#dvPostedComment').html(data); — Grundy
– Grundy, Commented Jan 4, 2015 at 14:06
Hi Grundy... Error : Internal server error and status : prevent this page from creating additional dialogs. — Mukesh Kumar
– Mukesh Kumar, Commented Jan 4, 2015 at 14:10

Dr. Rahul Jha · Accepted Answer · 2015-01-05 07:36:48Z

Please try like this. I have created a small example which exactly do same which you want to achieve in your code. You can do this in two ways- using $.ajax() or using $.load(). $.load() method do same what you want.

_InnerPartial.cshtml

@model int
@{
     <h1>This is a partial view</h1>
     <h3>Your passed value=@Model</h3>         
}

Controller method

[HttpPost]
    public PartialViewResult CallPartial(int value)
    {
        return PartialView("_InnerPartial", value);
    }

Index.cshtml

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<div id="divPartial"></div>

<script>
$(document).ready(function () {
    AsyncAjaxCallback();
    //AsyncCallback();

});
function AsyncCallback() {
    var ctrl = $("#divPartial");
    var url = "/Example/CallPartial";

    if (url && url.length > 0) {
        ctrl.load(url, { value: 45 });
    }

}

function AsyncAjaxCallback() {
    $.ajax({
        type:"POST",
        url: "/Example/CallPartial",
        data: { value: 78 },
        success:function(result)
        {
            debugger;
            $("#divPartial").html(result);

        }
    });
}

</script>

For more details please see this link. http://dotnet-concept.com/Article/2014/8/15/How-to-load-partial-from-jquery-in-MVC

Hope this can help you.

user3263194 · Accepted Answer · 2015-01-04 15:53:40Z

0

You are trying to load "data" in the partial view div but "data" doesn't exist. The result of ajax call is r as you have mentioned.

So try using

success: function (r) {
                $('#dvPostedComment').html(r);
            },

If you are using $.get then, use the below code:

$.get(url, 
     { "postId": PostId},
      function (data) { $('#dvPostedComment').html(data); 
});

answered Jan 4, 2015 at 15:53

user3263194

4537 silver badges20 bronze badges

Collectives™ on Stack Overflow

Partial View is not reloading using Jquery in MVC3

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related