[RESOLVED]Ajax post not refresing the view in mvc 4 Razor.

Hello MVC Experts,

I am using an ajax post on dropdownlist selection change event in mvc 4 razor syntax as follows:

  @Html.DropDownListFor(m => m.ProgramViewModel.SelectedPrograms, new SelectList(((List<SelectListItem>)Model.ProgramViewModel.Programs), "Value", "Text"), new { id = "Programs", @class = "fixed", onchange="getProgramDetails();" })

Ajax Post:

<script>
    function getProgramDetails() {
        if ($("#Programs").val() != "") {
            $.post("/AuxiliaryProgramMapping/ProgramIndexChanged",
               { ProgramID: $("#Programs").val() })            
        }        
    }
</script>

Controller:

[HttpPost]
        public ActionResult ProgramIndexChanged(string ProgramID) 
            {
                Session["SessionItems"] = null;
                return RedirectToAction("AuxiliaryProgramMapping", new { @Info = "RedirectFromProgramIndexChanged", @ProgramID = ProgramID });                
            }

After redirecting to AuxiliaryProgramMapping with the programid i am refresing the model as follows:

[HttpGet]
        public ActionResult AuxiliaryProgramMapping(string Info, string ProgramID)
        {
          if (Info == "RedirectFromProgramIndexChanged")
            {               
                IList<AuxiliaryProgramMappingDTO> objAuxiliaryProgramMapping = objAdminBusinessLayer.GetAuxiliaryProgramMappingInfo(Convert.ToInt32(ProgramID));
                if (Session["SessionItems"] == null)
                {
                    parent.AuxiliaryProgramMappingDTO = objAuxiliaryProgramMapping;
                    Session["SessionItems"] = parent.AuxiliaryProgramMappingDTO;
                }
                else
                {
                    parent.AuxiliaryProgramMappingDTO = Session["SessionItems"] as List<AuxiliaryProgramMappingDTO>;
                }              
                return View(parent);  
            }
            else
            {
                IList<AuxiliaryProgramMappingDTO> objAuxiliaryProgramMapping = objAdminBusinessLayer.GetAuxiliaryProgramMappingInfo(currentProgramID);
                if (Session["SessionItems"] == null)
                {
                    parent.AuxiliaryProgramMappingDTO = objAuxiliaryProgramMapping;
                    Session["SessionItems"] = parent.AuxiliaryProgramMappingDTO;
                }
                else
                {
                    parent.AuxiliaryProgramMappingDTO = Session["SessionItems"] as List<AuxiliaryProgramMappingDTO>;
                }
                return View(parent);            
            }         
        }

In the view the model information is going correctly (using debugger i checked this).But the table is not getting refreshed.

Hi,

In your code i don’t see done() or success() in $.post(), might be you are after sync post.

try adding this code before "getProgramDetails()" function:

//might be for <jquery 1.8
$.ajaxSetup({
async : false
});

if you mean like this:

<script>
    $.ajaxSetup({
        async: false
    });
    function getProgramDetails() {
        if ($("#Programs").val() != "") {
            $.post("/AuxiliaryProgramMapping/ProgramIndexChanged",
               { ProgramID: $("#Programs").val() })            
        }        
    }
</script>

then i tried , and its not working.

Ashim Chatterjee

$.post("/AuxiliaryProgramMapping/ProgramIndexChanged",
               { ProgramID: $("#Programs").val() })

change and check

$.post("/AuxiliaryProgramMapping/ProgramIndexChanged",
           { ProgramID: $("#Programs").val() }).done(function (tabledata) { $("#table").html(tabledata); });

cnuonline

change and check

$.post("/AuxiliaryProgramMapping/ProgramIndexChanged",
           { ProgramID: $("#Programs").val() }).done(function (tabledata) { $("#table").html(tabledata); });

i tried this , it do refresh the view but its keep on creating the textbox like below:

You have to wrap your table in a container div and update its html with the response html from the ajax call:

<div id="tableContainer">

// your table here

</div>

and update the div content this way:

$.post("/AuxiliaryProgramMapping/ProgramIndexChanged",
       { ProgramID: $("#Programs").val() },function(response){

$("#tableContainer").html(response)

});    

or use $.ajax:

$.ajax({

type : 'post',

data: { ProgramID: $("#Programs").val() },

url : "/AuxiliaryProgramMapping/ProgramIndexChanged",

success : function(response) {

$("#tableContainer").html(response);

}

error: function(response) {

alert("Error occured");

}

});

tried that its not working .. used a partialview also ..same here.can anyone show me how to use a partialview in this scenario ?

I solved this problem using Partial views ….

THANK YOU ALL FOR YOUR GREAT SUPPORT.

If you want you entire page to be refreshed, you can do synchronous submit on dd change right? instead of ajax post? 

cnuonline

If you want you entire page to be refreshed,

For now it all about dropdownlist and the table , in later stages i have to add more functionality , at that time an asynchronous refresh would be helpful.The problem was i was refreshing the whole view ,thats why the textbox was recreating again and
again.

In ajax calls, It does not matter what you are returning. It gets whatever you return in controller and replaces the target container element

Is textbox being created only first time (first dd change) or it keep on recreating? then u need to think about the proper container to replace

And is it mandatory to redirection in controller?

cnuonline

Is textbox being created only first time (first dd change) or it keep on recreating?

It was keep on creating the copy of own.

cnuonline

then u need to think about the proper container to replace

Thats why to separate the table from my main form i created a partial view.So that i can refresh only the table when i need to do so.

cnuonline

is it mandatory to redirection in controller?

Yes , because my bussiness logic is present in the controller.

Leave a Reply