نحوه استفاده از Balloon Pop Extender و کنترل Ajax Calendar در ASP.Net

پنجشنبه 4 تیر 1394

در این مقاله نحوه استفاده از Balloon Pop Extender و کنترل Ajax Calendar را در ASP.Net به شما آموزش خواهیم داد.

نحوه استفاده از Balloon Pop Extender و کنترل Ajax Calendar در ASP.Net

جهت استفاده از Balloon Pop Extender و کنترل Ajax Calendar را در ASP.Net مراحل زیر را انجام می دهیم.

بخش آغازین

مرحله 1

Visual Studio را اجرا کنید و یک empty website ایجاد کنید و آن را Calendar_demo بنامید.

مرحله 2

در Solution Explorer بر روی اسم پروژه راست کلیک کنید و یک Web Form به پروژه اضافه کنید و آن را calendar_demo.aspx بنامید.

بخش طراحی

مرحله 3

حال فایل calendar_demo.aspx را باز کنید و کدهای زیر را در آن وارد کنید.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style2
        {
            width: 95px;
        }
        .style3
        {
            width: 188px;
        }
        .style4
        {
            width: 23px;
        }
        .style5
        {
            text-decoration: underline;
            font-size: large;
        }
        
        .style6
        {
            width: 226px;
        }
        
        .style7
        {
            text-decoration: underline;
            font-size: x-large;
        }
        .style8
        {
            width: 258px;
        }
        .style9
        {
            width: 40px;
        }
        
        .auto-style2 {
            width: 365px;
        }
        
        .auto-style3 {
            width: 101px;
        }
        
    </style>
</head>
<body dir="rtl">
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
    <div id="man" style="width: 400px; margin: 0px 50px 0px 0px;">
        <table style="width: 66%; margin-left: 119px;">
            <caption class="style5">
                </caption>
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="auto-style3">
                    &nbsp;</td>
                <td class="auto-style2">
                 <a href="http://www.barnamenevisan.org">
                       <asp:Label ID="Label2" runat="server" ForeColor="#6600FF" 
                        style="font-weight: 700; text-decoration: underline" 
                        Text="مرجع تخصصی برنامه نویسان"></asp:Label>
                     </a>
                </td>
            </tr>
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="auto-style3">
                    &nbsp;</td>
                <td class="auto-style2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="auto-style3">
                    &nbsp;</td>
                <td class="auto-style2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="auto-style3">
                    نام  </td>
                <td class="auto-style2" >
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    
                    <asp:BalloonPopupExtender ID="BalloonPopupExtender1"  BalloonPopupControlID="Panel1" TargetControlID="TextBox1" runat="server">
                    </asp:BalloonPopupExtender>
                        
                    <asp:Panel ID="Panel1" runat="server">
                    لطفا نام خود را وارد کنید
                    </asp:Panel>
                </td>
                <td>
                 
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="auto-style3">
                    نام پدر</td>
                <td class="auto-style2">
                    <asp:TextBox ID="TextBox2"  runat="server"></asp:TextBox>
                    
                    <asp:BalloonPopupExtender ID="BalloonPopupExtender2" BalloonPopupControlID="Panel2" TargetControlID="TextBox2" runat="server">
                    </asp:BalloonPopupExtender>
                    <asp:Panel ID="Panel2" runat="server">
                    لطفا نام پدر خود را وارد کنید
                    </asp:Panel>
                </td>
            </tr>
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="auto-style3">
                    نام مادر</td>
                <td class="auto-style2">
                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                    <asp:BalloonPopupExtender ID="BalloonPopupExtender3" BalloonPopupControlID="Panel3" TargetControlID="TextBox3" runat="server">
                    </asp:BalloonPopupExtender>
                    <asp:Panel ID="Panel3" runat="server">
                    لطفا نام مادر خود را وارد کنید
                    </asp:Panel>
                </td>


                <td>
                
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="auto-style3">
                   سن 
                </td>
                <td class="auto-style2">
                    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                    <asp:BalloonPopupExtender ID="BalloonPopupExtender5" BalloonPopupControlID="Panel5" TargetControlID="TextBox4" runat="server">
                    </asp:BalloonPopupExtender>
                     <asp:Panel ID="Panel5" runat="server">
                    شما چند سال دارید؟
                    </asp:Panel>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="auto-style3">  
                <asp:CalendarExtender ID="CalendarExtender1" OnClientDateSelectionChanged="SelectDate"  TargetControlID="TextBox4"  runat="server">
                </asp:CalendarExtender>

                 <script type="text/javascript">

                function SelectDate(e) {

                var PresentDay = new Date();

                var dateOfBirth = e.get_selectedDate();

                var months = (PresentDay.getMonth() - dateOfBirth.getMonth() + (12 * (PresentDay.getFullYear() - dateOfBirth.getFullYear())));

                alert("شما " + Math.round(months / 12) + " ساله هستید");

                document.getElementById("TextBox6").value = Math.round(months / 12);

            }

            </script>
                </td>
                <td class="auto-style2"> 
                <asp:TextBox ID="TextBox6" ReadOnly="true" runat="server" Font-Size="12px" ></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="auto-style3">
                    مقطع </td>
                <td class="auto-style2">
                    <asp:DropDownList ID="DropDownList1" runat="server">
                        <asp:ListItem>-- یک مقطع تحصیلی را انتخاب کنید--</asp:ListItem>
                        <asp:ListItem>اول ابتدایی</asp:ListItem>
                        <asp:ListItem>دوم ابتدایی</asp:ListItem>
                        <asp:ListItem>سوم ابتدایی</asp:ListItem>
                        <asp:ListItem>چهارم ابتدایی</asp:ListItem>
                        <asp:ListItem>پنجم ابتدایی</asp:ListItem>
                        <asp:ListItem>ششم ابتدایی</asp:ListItem>
                        <asp:ListItem>اول راهنمایی</asp:ListItem>
                        <asp:ListItem>دوم راهنمایی</asp:ListItem>
                        <asp:ListItem>سوم راهنمایی</asp:ListItem>
                        <asp:ListItem>اول دبیرستان</asp:ListItem>
                        <asp:ListItem>دوم دبیرستان</asp:ListItem>
                        <asp:ListItem>سوم دبیرستان</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="auto-style3">
                     تلفن
                </td>
                <td class="auto-style2">
                    <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
                    <span style="float: left">
                    <asp:BalloonPopupExtender ID="BalloonPopupExtender4"  BalloonPopupControlID="Panel4" TargetControlID="TextBox5" runat="server">
                    </asp:BalloonPopupExtender>
                        </span>
                     <asp:Panel ID="Panel4" runat="server">
                   لطفا شماره لطفا خود را وارد کنید
                    </asp:Panel>
                </td>
                
            </tr>
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="auto-style3">
                    &nbsp;</td>
                <td class="auto-style2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="auto-style3">
                    &nbsp;</td>
                <td class="auto-style2">
                    <asp:Button ID="Button1" runat="server" Text="ارسال" onclick="Button1_Click" />
                </td>
            </tr>
        </table>

    </div>
    <p>
        <table style="width:100%;">
            <caption class="style7">
            </caption>
            <tr>
                <td class="style6">
                    &nbsp;</td>
                <td align="center" class="style8">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style6">
                    &nbsp;</td>
                <td class="style8">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style6">
                    &nbsp;</td>
                <td class="style8">
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
    </p>
    </form>
</body>
</html>

صفحه Design به شکل زیر است.

بخش کد

مرحله 4

فایل calendar_demo.aspx.cs را باز کنید، کدهای زیر را جهت چاپ اطلاعات وارد شده در فرم در این فابل وارد کنید.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;


public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {

      
        Label1.Text = "نام من:" + TextBox1.Text + "</br>" + "نام پدر من:" + TextBox2.Text + "</br>" + "نام مادر من:" + TextBox3.Text + "</br>" + "تاریخ تولد من:"+TextBox4.Text+"</br>" + "مقطع تحصیلی من:" + DropDownList1.SelectedItem.Text + "</br>" + "شماره تلفن من:" + TextBox5.Text + "</br>";
        Label1.ForeColor = System.Drawing.Color.Green;

    }
    
}

خروجی های موردنظر را ببینید.

در این قسمت با توجه تاریخ تولدی که وارد کرده اید سن شما را محاسبه می کند.

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید