ورود / ثبت نام
0
0

فرم های چند مرحله ای در ASP.NET

462 بازدید
فرم های چند مرحله ای

فرم های چند مرحله ای

آموزش ساده امروز برای افراد تازه واردی است که می خواهند Tab یا multi step form با به اصطلاح فرم های چند مرحله ای در ASP.NET ایجاد کنند. در این مقاله قدم به قدم مراحل ایجاد یک Tab view در ASP.NET (با استفاده از Multiview control  پیش فرض) می بینیم.

بدون اتلاف وقت به سراغ اصل مطلب می رویم:

فرم های چند مرحله ای

Multiview برای نمایش محتوای Tabها استفاده می شود.

برای نمایش tab در قسمت بالای صفحه، از Menu control استفاده می کنیم. بنابراین به قسمت toolbox رفته و menu control را اضافه می کنیم. در کدهای زیر orientation(جهت) را Horizontal می کنیم پس Tab به صورت افقی نمایش داده می شود.


<asp:Menu

ID="menuTabs"

Orientation="Horizontal"

Width="100%"

runat="server">

<Items>

<asp:MenuItem Text="Employee Info" Value="0" Selected="true"/>

<asp:MenuItem Text="Contact Info" Value="1" />

<asp:MenuItem Text="Salary Info" Value="2" />

</Items>

</asp:Menu>

برای نمایش محتوای هر tab از Multiview control استفاده می کنیم. برای Employee Info یک ویژگی Selected=”true” ایجاد می کنیم بنابراین وقتی یک صفحه راه اندازی شد، محتوای مربوط به اطلاعات کارمندان (Employee Info) نمایش داده می شود.


<asp:MultiView ID="multiviewEmployee"

runat="server" ActiveViewIndex="0">

</asp:MultiView>

در مرحله بعدی، در داخل Multiview ، view‌ اضافه می کنیم. چون سه منو داریم پس باید سه view به Multiview اضافه کنیم.


<asp:MultiView ID="multiviewEmployee"

runat="server" ActiveViewIndex="0">

<asp:View runat="server">

<div>

<%--To do--%>

</div>

</asp:View>

<asp:View runat="server">

<div>

<%--To do--%>

</div>

</asp:View>

<asp:View runat="server">

<div>

<%--To do--%>

</div>

</asp:View>

</asp:MultiView>

با صفر کردن مقدار مربوط به ویژگی ActiveViewIndex ، وقتی صفحه راه اندازی بشود اولین view نمایش داده می شود. در ادامه وقتی روی corresponding view کلیک کنیم menu items باز می شود برای انجام این کار باید در قسمت Menu control، رویداد مربوط به OnMenuItemClick را تنظیم کنیم. پس موارد گفته شده را به کد اضافه می کنیم مانند آن چه در زیر نمایش داده شده است.


<asp:Menu

ID="menuTabs"

Orientation="Horizontal"

Width="100%"

runat="server"

OnMenuItemClick="menuTabs_MenuItemClick">

<Items>

<asp:MenuItem Text="Employee Info" Value="0" Selected="true"/>

<asp:MenuItem Text="Contact Info" Value="1" />

<asp:MenuItem Text="Salary Info" Value="2" />

</Items>

</asp:Menu>

در صفحه CS، menu item را با multiview مقداردهی می کنیم.

protected void menuTabs_MenuItemClick(object sender, MenuEventArgs e)

{

Menu menuTabs = sender as Menu;

MultiView multiTabs = this.FindControl("multiviewEmployee") as MultiView;

multiTabs.ActiveViewIndex = Int32.Parse(menuTabs.SelectedValue);

&nbsp;

}

و حالا ساختار تب آماده است. کد کامل ASPX را در زیر مشاهده کنید.


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

.viewCSS {

border: solid 2px black;

padding: 20px;

}

&nbsp;

&nbsp;

#menuTabs a.static.selected {

border-bottom-color: red;

border-bottom-style: solid;

border-bottom-width: 3px;

color: red;

}

</style>

</head>

<body>

<form id="form1" runat="server" style="width: 100%">

<div style="width: 100%; margin-left: 20px; margin-top: 50px; margin-right: 20px;">

&nbsp;

<asp:Menu

ID="menuTabs"

Orientation="Horizontal"

Width="100%"

runat="server"

OnMenuItemClick="menuTabs_MenuItemClick">

<Items>

<asp:MenuItem Text="Employee Info" Value="0" Selected="true" />

<asp:MenuItem Text="Contact Info" Value="1" />

<asp:MenuItem Text="Salary Info" Value="2" />

</Items>

</asp:Menu>

<asp:MultiView ID="multiviewEmployee"

runat="server" ActiveViewIndex="0">

<asp:View runat="server">

<div style="margin-top: 40px;">

<asp:Table runat="server" CssClass="viewCSS">

<asp:TableRow>

<asp:TableCell>

<asp:Label runat="server">First Name</asp:Label>

</asp:TableCell>

<asp:TableCell>

<asp:TextBox runat="server"></asp:TextBox>

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell>

<asp:Label runat="server">Last Name</asp:Label>

</asp:TableCell>

<asp:TableCell>

<asp:TextBox runat="server"></asp:TextBox>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</div>

</asp:View>

<asp:View runat="server">

<div style="margin-top: 40px;">

<asp:Table runat="server" CssClass="viewCSS">

<asp:TableRow>

<asp:TableCell>

<asp:Label runat="server">Address</asp:Label>

</asp:TableCell>

<asp:TableCell>

<asp:TextBox runat="server"></asp:TextBox>

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell>

<asp:Label runat="server">Mobile</asp:Label>

</asp:TableCell>

<asp:TableCell>

<asp:TextBox runat="server"></asp:TextBox>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</div>

</asp:View>

<asp:View runat="server">

<div style="margin-top: 40px;">

<asp:Table runat="server" CssClass="viewCSS">

<asp:TableRow>

<asp:TableCell>

<asp:Label runat="server">Hire Date</asp:Label>

</asp:TableCell>

<asp:TableCell>

<asp:TextBox runat="server"></asp:TextBox>

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell>

<asp:Label runat="server">Salary</asp:Label>

</asp:TableCell>

<asp:TableCell>

<asp:TextBox runat="server"></asp:TextBox>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</div>

</asp:View>

</asp:MultiView>

</div>

</form>

</body>

</html>

امیدوارم از این آموزش لذت کافی ببرید.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=22101
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
محمد دهقانی
مطالب بیشتر
برچسب ها:

نظرات

1 نظر در مورد فرم های چند مرحله ای در ASP.NET

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *