How to load one jquery tab based on another tab in asp.net mvc

Question

Rite now i am using two tabs one for countries and one for cities.IF i click first tab, countries will be loaded and second tab, cities will be loaded.Now what i want to achieve is when i click any of countries coming under the grid of first tab,then second tab is filled with corresponding countries cities only ,how will i do that,, country id and city c_id has Primary key and foreign key relation ship

    <ul>
            <li><a href="#tabs-1">Tab Header 1</a></li>
            <li>@Html.ActionLink("Tab Header 2", "_gridsecondtab")</li>
        </ul>
        <div id="tabs-1">
            @Html.Action("_gridfirsttab");
        </div>

firstgrid

<div id="gridfirstContent">
    @grid.GetHtml(tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            columns: grid.Columns(
            grid.Column("id", format: (item) => item.GetSelectLink(item.id.ToString())),
            grid.Column("countryname", "CountryName"),
            grid.Column("continent", "Continent", style: "description"),
            grid.Column("language", "Language")
     )) 
    @{
    firstmvc4.Models.Country conuntry = new firstmvc4.Models.Country();
}

Controller

    public ActionResult _gridfirsttab()
    {
        return PartialView(db.Countries.ToList());

    }
      public ActionResult _gridsecondtab()
    {
        return PartialView(db.Citynews.ToList());

    }

Chris Flaat · Accepted Answer · 2015-04-26 19:58:08Z

1

The way this would normally be done is to use AJAX callbacks to populate the cities based on the user's country selection. You mentioned jQuery in your title so that's what I assume you want.

Have your main page return a grid of countries, as you've done. To populate the cities, normally one would return the data in JSON format and write some JavaScript to render the city list client-side. Alternatively you could render HTML server-side and display it directly but that's less efficient.

Also read http://api.jquery.com/jQuery.ajax/ for how jQuery can be used to do an AJAX call from JavaScript.

Hope that helps.

answered Apr 26, 2015 at 19:58

Chris Flaat

262 bronze badges

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

1 Comment

peter Over a year ago

small prototype is highly appreciated

Collectives™ on Stack Overflow

How to load one jquery tab based on another tab in asp.net mvc

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related