我想将从 MVC 视图生成的选项卡与仅包含用于 Google 地图的 html div 的常规选项卡相结合

Question

与MVC和选项卡上的其他问题不同，我想将从MVC视图生成的选项卡与仅包含用于谷歌地图的htmldiv的常规选项卡结合起来。

我将选项卡放在_Layout.cshtml文件中：

<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>

我有一个MVC商务控制器。业务视图正在使用_Layout.cshtml，并且不是部分视图。因此，它几乎可以工作，但每次单击选项卡都会重新加载整个页面，并将活动选项卡重置为第一个选项卡，即使我单击了第二个选项卡。

我认为有一件事是可行的，那就是如果我使用助手向Business视图的Index.chtml添加一个额外的脚本。这将插入此脚本以选择页面头部的"业务"选项卡。如编辑器/显示模板中使用部分所述

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

但是，这样做的缺点是，当我单击"业务"选项卡，然后在地图上单击时，URL会切换到localhost:XXXX/Business并保持不变，而不是localhost:XXXX。地图切换得还可以，但整件事都很时髦。

什么是正确的解决方案？

Answer 1

您的问题是使用actionlink，它将始终链接到新页面。试着这样做：

在UL中

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

选项卡的容器

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

这将从业务控制器中的索引中呈现一个局部视图

控制器

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

Ajax更新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脚本

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

还可以观看来自http://www.asp.net/mvc在复数形式的右边。

这个答案将使选项卡工作，但实际上，它更干净，可以避免使用MVC 的jquery选项卡