I'd like to combine a tab generated from a MVC View with a regular tab containing only a html div which is for a Google map

Question

Unlike other questions on MVC and tabs, I'd like to combine a tab generated from a MVC View with a regular tab containing only a html div which is for a Google map.

I placed my tabs in the _Layout.cshtml file:

<div id="tabs">
<ul>
    <li>@Html.ActionLink("Businesses", "Index", "Business")</li> 
    <li><a href="#tab1" id="MapTab">Map</a> </li>
</ul>
<div class="container" id="tab2" style="margin-left: 25px;">
    <div style="margin-left: 25px;">
        @RenderBody()
        @RenderSection("scripts", required: false)
    </div>
</div>
<div class="container" id="tab1" style="margin-left: 25px;">
<table id="tablegrid1">
<tr>
    <td>
        <div id="map" class="mapclass" style="width: 850px;height: 500px;">                                               
        </div>
    </td>
</tr>
</table>
</div>
</div>

I have a MVC controller for Business. The Business View is using the _Layout.cshtml and is not a partial view. So, it almost works but each click on a tab reloads the whole page and it resets the active tab to the first one, even when I clicked on the second one.

One thing I thought could work is if I added an extra script to the Index.cshtml of the Business view using a helper. This inserts this script to select the Business tab in the head of the page. As discussed in Using sections in Editor/Display templates

@Html.Script(
@<script src="@Url.Content("~/tuxmap/scripts/tabSelectBusinesses.js")" type="text/javascript"></script>)

But, the downside of that is that when I click to the Business tab and then on the map, the URL switches to localhost:XXXX/Business and stays there instead of localhost:XXXX. The map toggles okay but the whole thing is funky.

What's the right solution ?

Answer 1

Your problem is that you use actionlink, that will always link to a new page. Try to do this instead:

In UL

<li><a href="#business">business</a></li>

Container for tab

<div id="business">
   @{
        Html.RenderAction("Index", "Business", new{ Id = Model.Id});
    }
</div>

this will render a partialview from index in business controller

Controller

public PartialViewResult(int Id){
    return PartialView(...) and so on
}

Ajax update div

@using Ajax.BeginForm("action","controller", null, new AjaxOptions{UpdateTargetId = "yourDivIdToPutResultIn"}, new{id="frmEdit"}){
    <input type="hidden" value="@Model.PutInIdHere" name="Id" id="editId"/>
}

**JS script to fire edit from button

$('#buttonId').click(function(){ 
    $('#editId').val('theIdYouWantToSend');
    $('#frmEdit').submit();
});

Also watch the vids from http://www.asp.net/mvc on the right side from pluralsight.

This answer will make the tabs work but really, its cleaner to avoid jquery tabs with MVC