CODEWITHSUNDEEP
asp.netasp.net-mvcasp.net-core-mvc
gary
gary

Reputation: 150

PartialView is not updating with new data

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

Upvotes: 1

Views: 2615

Answers (3)

gary
gary

Reputation: 150

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.

Upvotes: 2

Tetsuya Yamamoto
Tetsuya Yamamoto

Reputation: 24957

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.

Upvotes: 1

Ryan Taite
Ryan Taite

Reputation: 839

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?

Upvotes: 2

Related Questions