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

استفاده از GridView برای پنجره توسعه دهنده ی Modal در ASP.NET

536 بازدید
Modal در ASP.NET

Modal در ASP.NET

این مقاله به شما نشان خواهد داد که چگونه میتوانید با استفاده از یک GridView از پنجره ی توسعه دهنده ی Modal در ASP.NET استفاده کنید.

ما یک Link Button که به وسیله ی آن قادر به دیدن کنترل GridView خواهیم بود ، داریم و سپس داخل GridView هرچیزی را که انتخاب کنید در پنجره ی دیگر نمایش داده میشود. با من در این مقاله ی کاربردی همراه باشید ….

بخش ورودی

گام اول

ویژوال استودیوی ۲۰۱۰ را باز کنید و یک وب سایت خالی بسازید ، نامی مناسب همانند gridview_demo برای آن انتخاب کنید.

گام دوم

در قسمت Solution Explorer یک وب سایت خالی خواهید داشت. یک وب فرم و پایگاه داده SQL همانند زیر بسازید.

برای وب فرم

Gridview_demo (وب سایت خالی تان) و سپس راست کلیک و Add New Item و Web Form . نام آن را نیز gridview_demo.aspx قرار دهید.

برای پایگاه داده سرور SQL

Gridview_demo (وب سایت خالی تان) و سپس راست کلیک و Add New Item و SQL Server Database. (پایگاه داده را درون App_Data_folder اضافه کنید)

بخش پایگاه داده

گام سوم

پایگاه داده تان را دریافت کنید (Database.mdf). ما یک جدول tbl_Data ایجاد میکنیم. حال به database.mdf میرویم ، سپس جدول جدیدی بیافزایید و آن را همانند زیر طراحی کنید :

جدول : tbl_data فراموش نکنید تا ID را به عنوان Identity Specification بر روی Yes تعیین کنید.

Modal در ASP.NET

بخش طراحی

گام چهارم

حال فایل gridview_demo.aspx را باز کنید ، جایی که ما پنجره ی توسعه دهنده ی modal خود را طراحی کردیم.

Gridview_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: 116px;   
        }   
        .style3   
        {   
            width: 202px;   
        }   
          
        #man   
        {   
           margin:200px,500px,0px,200px;   
           padding:200px,550px,0px,200px;   
              
              
               
          }   
           
           
        .style4   
        {   
            font-size: large;   
            text-align: left;   
        }   
           
           
    </style>   
</head>   
<body>   
    <form id="form1" runat="server">   
       
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">   
    </asp:ToolkitScriptManager>   
    <div>   
   
        <asp:ModalPopupExtender ID="ModalPopupExtender1" EnableViewState="true" CancelControlID="Button2" TargetControlID="LinkButton1" PopupControlID="Panel1" runat="server">   
        </asp:ModalPopupExtender>   
        <div class="man">    
            <asp:LinkButton ID="LinkButton1" runat="server"    
                style="text-align: center" BackColor="#CCFFFF" ForeColor="#666633">Open your Grid View Here!!</asp:LinkButton>   
        </div>       
   
        <asp:LinkButton ID="Linkbtn" runat="server"></asp:LinkButton>   
        <asp:ModalPopupExtender ID="ModalPopupExtender2" TargetControlID="Linkbtn" CancelControlID="btnclose" PopupControlID="Panel2"  runat="server">   
        </asp:ModalPopupExtender>   
   
   
   
        <asp:Panel ID="Panel1" runat="server">   
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"    
                CellPadding="4" onselectedindexchanged="GridView1_SelectedIndexChanged"    
                ForeColor="#333333" GridLines="None">   
                <AlternatingRowStyle BackColor="White" />   
                <Columns>   
                    <asp:TemplateField HeaderText="id">   
                        <EditItemTemplate>   
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("id") %>'></asp:TextBox>   
                        </EditItemTemplate>   
                        <ItemTemplate>   
                            <asp:Label ID="Label1" runat="server" Text='<%# Bind("id") %>'></asp:Label>   
                        </ItemTemplate>   
                    </asp:TemplateField>   
                    <asp:TemplateField HeaderText="Name">   
                        <EditItemTemplate>   
                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("name") %>'></asp:TextBox>   
                        </EditItemTemplate>   
                        <ItemTemplate>   
                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("name") %>'></asp:Label>   
                        </ItemTemplate>   
                    </asp:TemplateField>   
                    <asp:TemplateField HeaderText="City">   
                        <EditItemTemplate>   
                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("city") %>'></asp:TextBox>   
                        </EditItemTemplate>   
                        <ItemTemplate>   
                            <asp:Label ID="Label3" runat="server" Text='<%# Bind("city") %>'></asp:Label>   
                        </ItemTemplate>   
                    </asp:TemplateField>   
                    <asp:ButtonField CommandName="Select" Text="Select" />   
                </Columns>   
                <FooterStyle BackColor="#990000" ForeColor="White" Font-Bold="True" />   
                <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />   
                <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />   
                <RowStyle ForeColor="#333333" BackColor="#FFFBD6" />   
                <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />   
                <SortedAscendingCellStyle BackColor="#FDF5AC" />   
                <SortedAscendingHeaderStyle BackColor="#4D0000" />   
                <SortedDescendingCellStyle BackColor="#FCF6C0" />   
                <SortedDescendingHeaderStyle BackColor="#820000" />   
            </asp:GridView>   
            <br />   
        </asp:Panel>   
   
        <asp:Panel ID="Panel2" runat="server">   
            <table style="width: 100%;" bgcolor="#FFFFCC" border="1px">   
                <caption class="style4">   
                    <strong>                   This is your Selected Data</strong></caption>   
                <tr>   
                    <td class="style2">   
                        <asp:Label ID="Label7" runat="server" Text="ID:"></asp:Label>   
                    </td>   
                    <td class="style3">   
                            
                        <asp:Label ID="Label4" runat="server" ForeColor="#009933" Text="Label"></asp:Label>   
                    </td>   
                </tr>   
                <tr>   
                    <td class="style2">   
                        <asp:Label ID="Label8" runat="server" Text="Name:"></asp:Label>   
                    </td>   
                    <td class="style3">   
                            
                        <asp:Label ID="Label5" runat="server" Text="Label" ForeColor="#009933"></asp:Label>   
                    </td>     
                </tr>   
                <tr>   
                    <td class="style2">   
                         <asp:Label ID="Label9" runat="server" Text="City:"></asp:Label>   
                    </td>   
                    <td class="style3">   
                            
                        <asp:Label ID="Label6" runat="server" ForeColor="#009933" Text="Label"></asp:Label>   
                    </td>        
                </tr>   
                <tr>   
                    <td class="style2">   
                         </td>   
                    <td class="style3">   
                        <asp:Button ID="btnclose" runat="server" BackColor="#99CCFF" Text="Close"/>   
                    </td>              
                </tr>   
            </table>   
        </asp:Panel>   
    </div>   
    </form>   
</body>   
</html>  

 

طرح شما همانند زیر خواهد بود :

Modal در ASP.NET

بخش کد

گام پنجم

قسمت gridview_demo.aspx.cs خود را باز کنید و کد های لازم برای اجرای برنامه را بنویسید :

using System;   
using System.Collections.Generic;   
using System.Linq;   
using System.Web;   
using System.Web.UI;   
using System.Web.UI.WebControls;   
using System.Data;   
using System.Data.SqlClient;   
public partial class _Default : System.Web.UI.Page   
{   
protected void Page_Load(object sender, EventArgs e)   
{   
if (!Page.IsPostBack)   
{   
SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");   
SqlCommand cmd = new SqlCommand("select * from tbl_data", con);   
SqlDataAdapter sda = new SqlDataAdapter(cmd);   
DataTable dt = new DataTable();   
sda.Fill(dt);   
GridView1.DataSource = dt;   
GridView1.DataBind();   
}   
}   
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)   
{   
Label4.Text = (GridView1.SelectedRow.FindControl("Label1") as Label).Text;   
Label5.Text = (GridView1.SelectedRow.FindControl("Label2") as Label).Text;   
Label6.Text = (GridView1.SelectedRow.FindControl("Label3") as Label).Text;   
ModalPopupExtender2.Show();   
}   
}

 

بخش خروجی

Modal در ASP.NETModal در ASP.NETModal در ASP.NET

این پروسه به صورت زیر کار میکند. هنگامی که بر روی لینک اول کلیک میکنید ، پنجره ای باز میشود که gridview را نمایش خواهد داد. در داخل gridview دکمه ای به عنوان Select را درنظر میگیریم ، پس زمانی که شما بر روی دکمه ی Select هر یک از ID ها کلیک کنید ، پنجره ی دیگری صدا زده میشود جایی که آن داده ی ID مشخص که انتخاب کرده اید را نمایش خواهد داد.

روز خوبی داشته باشید! ممنون از وقتی که برای خواندن این مقاله گذاشتید. امیدوارم از آن لذت برده باشید.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=14660
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

5 نظر در مورد استفاده از GridView برای پنجره توسعه دهنده ی Modal در ASP.NET

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

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

  1. سلام
    می خواستم بپرسم که توسط کد if (!page.ispostback) p چگونه به کد فهماندیم که اطلاعات دیتابیس باید در gridview نمایش داده شود؟
    این کد یعنی: اگر صفحه برای اولین بار لود نشده بود آنگاه اطلاعات را در grid view نمایش بده. درست است؟

    ۲

    1. این کد یعنی: اگر صفحه برای اولین بار لود نشده بود (اگر برای بار دوم به بعد لود شده بود) آنگاه اطلاعات را در grid view نمایش بده. درست است؟

      ۱

  2. سلام
    می خواستم بپرسم که توسط کد if (!page.ispostback) p چگونه به کد فهماندیم که اطلاعات دیتابیس باید در gridview نمایش داده شود؟
    این کد یعنی: اگر صفحه برای اولین بار لود نشده بود (اگر برای بار دوم به بعد لود شده بود) آنگاه اطلاعات را در grid view نمایش بده. درست است؟

    ۱