MVC5中的多个选项卡 [英] Multiple tabs in MVC5

问题描述

HI，



我们正在使用MVC5剃须刀，我需要显示多个标签，每个标签都有不同的数据输入屏幕，每个标签/屏幕属于不同的型号。



我可以在选项卡中显示数据，但是如何在单个选项卡中保存数据并在保存后显示该特定选项卡。



由于其他标签的帖子验证失败，因为在一个标签中填写数据并在帖子上发布了所有其他标签。



请为此提出建议。

WE are are using MVC5 razor , i have requirement to display multiple tabs and each tab has different data entry screen , each tab/screen belongs to different model.

I am able to display data in the tabs , but how to save data in individual tab and show that particular tab after saving.

As on post validation for other tabs failed as filling data in one tab and on post all other tab also posted.

Pleas suggest for this.

推荐答案

好的，使用引导选项卡，如 http://getbootstrap.com/javascript/#tabs [ ^ ]，您可以在每个表单上放置一个不同的表单，其中包含不同的目标控制器/操作。这样每个表单将针对不同的模型。最简单的方法是为每个编辑模型操作创建一个局部视图，然后使用它。请耐心等待，因为我做过剃刀已经有一段时间了：

Okay, using the bootstrap tabs, as described in http://getbootstrap.com/javascript/#tabs[^], You can put a different form with a different target controller/action on each form. That way each form will target a different model. Your easiest route is to create a partial view for each edit model action, and use that. Please bear with me, it's been awhile since I've done razor:

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">First</a></li>
    <li role="presentation"><a href="#second" aria-controls="second" role="tab" data-toggle="tab">Second</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="first">
        @Html.RenderAction("GetMyFirstForm","MyController)
    </div>
    <div role="tabpanel" class="tab-pane" id="second">
        @Html.RenderAction("GetMySecondForm","MyController)
    </div>
  </div>

</div>

表单页面，表单部分示例：

Form page, form section example:

@model MyNamespace.FirstModel
<div>
    @using(Html.BeginForm("EditMyFirstModel", "MyController", FormMethod.Post, 
                                      new { enctype = "multipart/form-data" }))
    {
        <!-- Needed fields here -->
        <input class="btn btn-default" type="submit" value="Submit" />
    }
</div>

您可以使用多步形式（具有您正在寻找的类似功能） ）。



http://codepen.io/atakan/pen/ gqbIz [ ^ ]

http://www.jqueryrain.com/demo/jquery-step-form-向导/页面/ 2 / [ ^ ]

http：//webdesign.tutsplus。 com / articles / build-a-multi-step-form-interface - webdesign-11715 [ ^ ]



大量的例子都在那里，你可根据您的需要进行修改。



-KR

You can use something like multi-step form (which has similar functionality that you're looking for).

http://codepen.io/atakan/pen/gqbIz[^]
http://www.jqueryrain.com/demo/jquery-step-form-wizard/page/2/[^]
http://webdesign.tutsplus.com/articles/build-a-multi-step-form-interface--webdesign-11715[^]

Loads of examples are there, you can modify it according to your need.

-KR

这篇关于MVC5中的多个选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！