Refresh MVC View on button click

Question

I have a MVC view which contains a year dropdown and a submit button. By default the current year (i.e. 2017 year) data is loaded on page load and it works fine but when I select some other year from the dropdown its not refreshing the view. Please see the code below:

HistoricData.cshtml

<div class="form-group">
            <label for="year">Year</label>
            <select id="year" name="year" class="form-control">
                <option>2017</option>                    
                <option>2016</option>
                <option>2015</option>
                <option>2014</option>
                <option>2013</option>
            </select>
        </div>
        <button id="btnData" class="btn btn-default" onclick="GetData()">Get Data</button>

        <table id="tblData" class="table table-condensed table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Date/Time</th>  
            </tr>
        </thead>
        <tbody>    
            @foreach (var d in Model.AllData)
            {
                <tr>
                    <td>@d.ID</td>
                    <td>@d.Name</td>
                    <td>@d.DateTime</td>                   
                </tr>
            }
        </tbody>
    </table>

Script:

function GetData() {   
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetData")',
                data: JSON.stringify({
                    year: $("#year option:selected").text()
                }),
                contentType: "application/json; charset=utf-8"                
            });
        }

Controller: HistoricDataController.cs

//this gets called on page load
public ActionResult HistoricData()
{
    var year = 2017;
    return View(GetHistoricData(year));            
}

//trying to call this method to refresh the data with the year selected
public ActionResult GetData(int year)
{
    var model = GetHistoricData(year);
    return View("HistoricData", model);
}

private SomeData GetHistoricData(int year)
{
    return SomeData;
}

Ilya Sulimanov · Accepted Answer · 2017-07-14 20:42:05Z

2

You missed a part when you have to handle response, for that you can add callback on success and insert response (HistoricData view) to relevant place. Also in your case better to use GET rather than POST

       $.ajax({
            type: "POST",
            url: '@Url.Action("GetData")',
            data: JSON.stringify({
                year: $("#year option:selected").text()
            }),
            contentType: "application/json; charset=utf-8",
            success: function(data) { $("#somePlace").html(data); },                
        });

answered Jul 14, 2017 at 20:42

Ilya Sulimanov

7,8666 gold badges50 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Travis Acton Over a year ago

And add [httppost] tag in your controller method

Chris Pratt Over a year ago

And remember to return PartialView rather than View from this action. Otherwise, you'll get your whole layout rendered in the AJAX response.

user972255 Over a year ago

@IIya.Sulimanov - Sorry I forgot to add the model related details and just added the code.

user972255 Over a year ago

When I click the button first the HistoricData() method is getting called and then the GetData(int year) is getting called but the data is not refreshed at all.

Collectives™ on Stack Overflow

Refresh MVC View on button click

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related