MVC与JQuery选项卡式控件 [英] MVC with JQuery tabbed control
问题描述
对MVC以及Jquery来说是新手，我需要在冲动中完成它，所以需要一些帮助。
我有一个jquery Tabbed控制http://jqueryui.com/tabs/并且不确定如何在每个选项卡中包含文本框或按钮以及如何保存传递到服务器上的数据。
一些示例代码或有用的链接将有所帮助。
步骤1：下载jQuery API和jQueryTab API。您可以从这里下载 http://jquery.com/ [ ^ ]（jqueryApi）
http：// jqueryui。 com / download / [ ^ ]（为标签选择小部件）并下载。）
第二步：创建一个名为Tab的Model类，然后创建两个属性ContentOne和ContentTwo，如下所示$ / b $ bpublic class Tab
{
public string ContentOne { get ; set ; }
public string ContentTwo { get ; set ;}
}
步骤3：创建一个新的Mvc应用程序并首先创建一个控制器（TabTestController），然后右键单击控制器创建一个视图并选择Tab类作为Strongly Type类（选择空模板）。
Step4：放上面的两个头部的API如下所示
< head >
< meta charset = utf-8 / >
< script src = HTT p：//code.jquery.com/jquery-1.8.3.js > < / script >
< script src = http://code.jquery.com/ui/1.10.0/jquery-ui.js > < / script >
< / head >
步骤5：在该视图中创建一个正文部分，如下所示
< body >
@using（Html.BeginForm（TabTest，GetTabs，FormMethod.Post））{
< div id = 标签 >
< ul >
< li > < a href = ＃tabs-1 > 关于我们< / a >< / li >
< li > < a href = ＃tabs-2 > 与我们联系< / a > < / li >
< / ul >
< div id = 标签 - 1 >
< p > @ Model.TextBoxFor（x => x.ContentOne）< / p >
< 输入 type = 提交 name = button1 value = 点击此处 >
< / div >
< div id = tabs-2 >
< p > @ Model.TextBoxFor（x => x.ContentTwo ）< / p >
< 输入 type = submit 名称 = button2 value = < span class =code-keyword> clickhere！ >
< / div >
< / div >
}
< / body > < / body >
步骤6：在TabTestController中创建一个actionResult，如下所示
点ublic ActionResult GetTabs（Tab tabClass）
{
string content = tabClass.ContentOne;
return View（）;
}
在这里开始MVC
http://www.asp.net/mvc [ ^ ]
希望这会有所帮助。
[来自第2个回答]
http://www.c-sharpcorner.com/UploadFile/krishnasarala/tabs-using-j-query-for-an-Asp-Net-mvc-application/
通常，
我们将部分视图传递给标签。
所以每个标签包含一个部分视图。
这有助于您谷歌了解更多信息。
Am new to MVC as well as Jquery and i have a requirement to finish it off in urge so am need of some help.
I have a jquery Tabbed Control http://jqueryui.com/tabs/ and am not sure how to have Text boxes or buttons inside each Tabs and how to save the data passing onto the server.
Some sample codes or useful links will help.
Step 1 : Download jQuery API and jQueryTab API. You can download it from here http://jquery.com/[^](jqueryApi)
http://jqueryui.com/download/[^](select your widget for the tab and download.)
Step2:Create a Model class named Tab and then create two property ContentOne and ContentTwo like below
public class Tab { public string ContentOne{get;set;} public string ContentTwo{get;set;} }
Step3: Create a new Mvc Application and Create a controller first(TabTestController) and then right click the controller create a view and select Tab class as a Strongly Type class(Select Empty Template).
Step4: Put both the above api in the head section like below
<head> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> </head>
Step 5 : Create a body section in that view like below
<body> @using(Html.BeginForm("TabTest","GetTabs",FormMethod.Post)){ <div id="tabs"> <ul> <li><a href="#tabs-1">About Us</a></li> <li><a href="#tabs-2">Contact Us</a></li> </ul> <div id="tabs-1"> <p>@Model.TextBoxFor(x=>x.ContentOne)</p> <input type="submit" name="button1" value="Click here"> </div> <div id="tabs-2"> <p>@Model.TextBoxFor(x=>x.ContentTwo) </p> <input type="submit" name="button2" value="clickhere!"> </div> </div> } </body></body>
Step6: Create a actionResult in TabTestController like below
public ActionResult GetTabs(Tab tabClass) { string content=tabClass.ContentOne; return View(); }
Get Started MVC here
http://www.asp.net/mvc[^]
Hope this helps.
[Moved from 2nd answer]
http://www.c-sharpcorner.com/UploadFile/krishnasarala/tabs-using-j-query-for-an-Asp-Net-mvc-application/
usually,
we pass partial views to the tabs.
so each tab contain one partialview.
this help you google for more info.
这篇关于MVC与JQuery选项卡式控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
