Question

Hi guys i have controller which returns a partial view, the controller is called by ajax script. The partical view has no problem showing viewdata first time, But when ajax script is invoked second time the partical view does not update it self with new viewdata.

code for controller

   [HttpGet]
    public ActionResult getPart(int id)
    {
        ViewData["partical"] = id;

        return PartialView("test");
    }

code for partial view

 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<PovertyBayHotel.Models.testmodel>" %>


 <p>just a test</p>

 <%: ViewData["partical"]%>

and the ajax which call the controller

 <script type="text/javascript">
 $(document).ready(function () {

     $("#DropDown").change(function () {
         var course = $("#DropDown > option:selected").attr("value");
         $.ajax({
             type: 'GET',
             url: '/Reservation/getPart',
             data: { id: course },
             success: function (data) {

                 $('#ExtraBox').replaceWith(data);
             }
         });

     });
 });

</script>

Answer 1

Might be a caching issue. Try HTTP POST instead of GET or set the ifModified and cache options to false as below:

 $("#DropDown").change(function () {
     var course = $("#DropDown > option:selected").attr("value");
     $.ajax({
         type: 'GET',
         ifModified: false,
         cache: false,
         url: '/Reservation/getPart',
         data: { id: course },
         success: function (data) {

             $('#ExtraBox').replaceWith(data);
         }
     });

Also, try to debug your code and see really what is going on.

Edit:

The problem has been solved by changing $('#ExtraBox').replaceWith(data); with $('#ExtraBox').html(data);.