CODEWITHSUNDEEP
asp.net-core
JeremyK
JeremyK

Reputation: 1103

How to refresh a view's content in ASP.NET Core

I hate to ask what feels like such a basic question. However I have no idea how to do this and have been stuck for weeks.

I have a page of content that is loaded with data in my controller. On the view, I have some options to filter the view data with an apply button. Once that is clicked, I want the page to reload with the data filtered out, but without running the query again. I just want it to look at what it already has and hide the content that was filtered.

Can someone please give me a pointer in the right direction for this? The reason I do not want to query is because it is a very long call and can take up to 5 minutes to complete building the content.

Edit: Close to having it working, but the form data being sent to javascript is not up to date.

<div class="content">
<form id="form" asp-area="" asp-controller="Home">
    <div class="col-md-6">
        <div class="form-group">
            <label asp-for="EpicType" class="label-control"></label>
            <select asp-for="EpicType" class="form-control" asp-items="@QueryModel.EpicTypes"></select>
            <span asp-validation-for="EpicType" class="text-danger"></span>
        </div>
    </div>

    <p></p>
    <div class="form-group" style="align-content: center; text-align: center; padding-bottom: 5px;" ;>
        <button type="submit" id="submitbtn" class="btn btn-sm btn-primary rounded-0" onclick="javascript:filterResults('@QueryData.EpicType')">Apply</button>
    </div>
</form>

When I click submit, I am not getting the newly user selected value for EpicType, I instead get whatever it was set to when the page was loaded. How do I get the data to save in the model before passing it to the javascript call?

function filterResults(epicType) {
    $.ajax({
        type: 'POST',
        url: '/Home/refreshSummary',
        data: { epicType },
        dataType: 'json',
        success: function () {
            window.location.reload();
        },
        error: function (error) {
            alert(error);
        }
    });
}

Upvotes: 0

Views: 869

Answers (1)

David
David

Reputation: 218828

When I click submit, I am not getting the newly user selected value for EpicType, I instead get whatever it was set to when the page was loaded.

That's because the code is explicitly defining that value here:

onclick="javascript:filterResults('@QueryData.EpicType')"

So let's say the EpicType is 5, then what you have client-side is this:

onclick="javascript:filterResults('5')"

There's nothing dynamic about that. It's hard-coded in the JavaScript to always be 5.

Instead of passing the value there, just call the function:

onclick="javascript:filterResults()"

And within the function get the current value:

let epicType = $('#EpicType').val();

Note that I'm guessing on the id of the <select> element here. You'll want to examine your client-side code (view page source in the browser) to see what the <select> ends up being. This may also work:

let epicType = $('select[name="EpicType"]').val();

The point is, in the JavaScript code you need to fetch the currently selected value from the <select> element. The server-side code has no way of knowing what that value is going to be when the page is rendering.

Upvotes: 1

Related Questions