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

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

435 بازدید
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 نمایش بده. درست است؟

    لایک