Updating partial view with Jquery in ASP.NET MVC C#

Question

I am using MVC C# along with Jquery.

I have a partial view in a rather large page that has a number of tabs.

On a click of a checkbox, I like to update the partial view WITHIN the form. What I am getting instead is just the partial view

Here is my code in Jquery:

   $('#activelist,#inactivelist').change(function () {

        var status = 'inactive';
        window.location.href = '@Url.Action("Skits","KitSection")' + '?id=' + id+ '&status=' + status;

    });

Any idea on how I could update the partial view within a form in terms of how I would make a call to it?

Here is the code for the PartialView

     return PartialView(Kits);

As mentioned, what I see is just the partial view displayed and not the whole form.

Answer 1

window.location.href will reload the entire page. You need to reload some part of your page without a complete reload. We can use jQuery ajax to do this. Let's Find out what jQuery selector you can use to get the Partialview.

For example , Assume your HTML markup is like this in the main form ( view)

<div>
  <p>Some content</p>
  <div id="myPartialViewContainer">
      @Html.Partial("_FeaturedProduct")
  </div>
  <div>Some other content</div>
</div>

And here the DIV with ID myPartialViewContainer is the Container div which holds the content of the partial view.So we will simply reload the content of that div using jQuery load method

$(function(){

   $('#activelist,#inactivelist').change(function () {
      var id="someval"; 
      var status = 'inactive';
      $("#myPartialViewContainer").load('@Url.Action("Skits","KitSection")' + '?id=' + id+ '&status=' + status)
  });

});

Answer 2

You are redirecting the user, via the window.location.href property, to the URL of your partial, hence only displaying that partial.

You should instead do an AJAX call to the partial to retrieve it's HTML and then use something like the .append method to add it to whatever container element you want it to be added to.

EDIT: The .load() jQuery ajax method is actually better for this specific situation.