PartialView is not updating with new data - asp.net

Question

By default I am loading all data inside partial view
html code in Index.cshtml
#model GMWUI.ViewModel.MessageDisplayModel
<div id="divTblMsg" class="grid-content">
#{
Html.RenderPartial("filterMessages", Model);
}
</div>
HomeController.cs
public async Task<IActionResult> Index()
{
messageDisplayModel.Messages = await ApiClientFactory.Instance.GetMessages();
return View(messageDisplayModel);
}
when user click on filter button with search criteria
I am getting filtered data from web api to my home controller filtermessage method
here is my ajax call when I click filter button
$.ajax({
method: 'post',
url: "Home/postMessage",
data: JSON.stringify(model),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//my table element id is divTblMsg
$("#divTblMsg").html(data);
}
});
HomeController.cs
[HttpGet]
public async Task<IActionResult> filterMessages(GetMessageParams searchCriteria)
{
//I though adding below line will clear old data should update partial view with filtered data, but it is not working.
messageDisplayModel.Messages = Enumerable.Empty<Messages>();
messageDisplayModel.Messages = await ApiClientFactory.Instance.GetMessages(searchCriteria);
//I am getting filtered data to messageDisplayModel.messages and I am passing it to partial view
return PartialView("filterMessages", messageDisplayModel.Messages);
}
I was unable to find the issue

Answer 1

Is it by chance because your AJAX method is posting to Home/postMessage and not geting from filterMessages which you have marked with an [HttpGet] filter?

Answer 2

I fixed the issue by updating my ajax call as follows.
$.ajax({
method: 'GET',
url: '#Url.Action("filterMessages", "Home")',
async: true,
cache: false,
data: model,
dataType: 'HTML',
success: function (data) {
$("#divTblMsg").html(data);
}
});
I have updated Method to Get as I am using Get attribute for my action result and updated url and dataType to HTML because the response that we will get is in HTML.

Answer 3

Try changing URL path to match exactly as controller action name, and the method type equals to attribute set on that action:
$.ajax({
method: 'GET', // or type: 'GET'
url: '#Url.Action("filterMessages", "Home")',
data: JSON.stringify({ searchCriteria: model }), // here you should include action parameter name
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#divTblMsg").html(data);
}
});
If you want to use POST method, simply replace [HttpGet] with [HttpPost] and follow the URL convention as shown above.
Also take note that you should make sure that passed model contains object (an object defined like var model = {};) and then assign values for model properties.