asp.net mvc 中的选项卡答案

【问题标题】：Tabs in asp.net mvcasp.net mvc 中的选项卡
【发布时间】：2010-05-15 11:47:12
【问题描述】：

我在页面上有三个选项卡和一个用户控件。我想在每个选项卡上 RenderPartial。

<script type="text/javascript">
    $(document).ready(function() {
        $("#tabs").tabs();               
    });    
</script>


<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Text 1</a></li>
        <li><a href="#tabs-2">Text 2</a></li>
        <li><a href="#tabs-3">Text 3</a></li>
    </ul>
    <div id="tabs-1">
        <% Html.RenderPartial("usercontrol", Model);  %>            
    </div>
    <div id="tabs-2">
        <% Html.RenderPartial("usercontrol", Model);  %>            
    </div>
    <div id="tabs-3">
        <% Html.RenderPartial("usercontrol", Model);  %>            
    </div>
</div>

如何从不同的选项卡中获取值。

【问题讨论】：

您希望从每个选项卡中获得什么类型的值？
当我提交表单时，我在用户控件中完成了表单的值将保存在数据库中。

标签： asp.net-mvc user-controls tabs

【解决方案1】：

如果要识别返回数据的选项卡，则必须将附加参数传递给每个部分视图：

public class UserControlModel
{
    ModelType ParentModel { get; set; }
    string ID { get; set; }
}

<div id="tabs-1">
    <% Html.RenderPartial("usercontrol", new UserControlModel { ParentModel = Model, ID = "tab1" });  %>            
</div>
<div id="tabs-2">
    <% Html.RenderPartial("usercontrol", new UserControlModel { ParentModel = Model, ID = "tab2" });  %>            
</div>
<div id="tabs-3">
    <% Html.RenderPartial("usercontrol", new UserControlModel { ParentModel = Model, ID = "tab3" });  %>            
</div>

然后使用 Html.Hidden 在局部视图中将值存储在表单中，并通过在 post 方法中检查值，您可以识别选项卡。

您的局部视图必须继承自 ViewUserControl<TaskEditModel>：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TaskEditModel>" %>

【讨论】：