CODEWITHSUNDEEP
javascriptajaxasp.net-mvcasp.net-mvc-4
desmondlee
desmondlee

Reputation: 1703

MVC on bootstrap tab click reload controller and refresh

Basically i implement a bootstrap tab like this in ASP.NET MVC I would like to call the controller on tab click to fetch the latest data from database and display the latest data. How could this be done? Assume my controller name is TabList(int? id)

The code for triggering onclick is as follow but i am not sure of what code to be put inside

  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            //code here
        });

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab-2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#tab-3" data-toggle="tab">Tab 3</a></li>
</ul>

<div id="tab-1" class="tab-pane">
{ Html.RenderPartial("_Tab1", Model.Tab1); }
</div>

<div id="tab-2" class="tab-pane">
{ Html.RenderPartial("_Tab2", Model.Tab2); }
</div>

<div id="tab-3" class="tab-pane">
{ Html.RenderPartial("_Tab3", Model.Tab3); }
</div>

Upvotes: 2

Views: 1927

Answers (2)

usefulBee
usefulBee

Reputation: 9692

Another way of doing it using Ajax:

    function GetPartialView() {
    $.ajax({
        type: "POST",
        url: siteRoot + 'ControllerName/ActionName',
        dataType: "html",
        success: function (data) {
            debugger;
            $('#AnyDivIdYouWant').html(data);
        }
    }).error(function () {

    });;
}

Upvotes: 0

Peter Dempsey
Peter Dempsey

Reputation: 495

By using JavaScript and Ajax this can be achieved in a fairly simple way. If you attach a function to the onClick of that tab and get the function to make a GET request to your data and then processes the data returned ready to be placed onto your page.

function getDataFunction()
{
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //Data is now loaded. Display the data on the page by using "xmlhttp.responseText"
            }
        }
        xmlhttp.open("GET","Url/To/Data/");
        xmlhttp.send();
}

I am not sure if there is some cool MVC way of doing this but the solution above will easily solve your problem.

For more information on Ajax, W3Schools have some great beginner guides http://www.w3schools.com/ajax/

Upvotes: 2

Related Questions