توضیحات و دانلود

استفاده از Modal Popup برای اضافه کردن ویرایش و به روز رسانی رکوردهادر GridView با ASP.Net
0 0
استفاده از Modal Popup برای اضافه کردن ویرایش و به روز رسانی رکوردهادر GridView با ASP.Net

با سلام در این مقاله، نحوه اضافه کردن و ویرایش سوابق در کنترل  GridView را با استفاده از ASP.NET AJAX Toolkit Modal Popup Extender توضیح خواهیم داد.
بانک اطلاعاتی
برای این آموزش، از پایگاه داده مایکروسافت NorthWind استفاده می کنیم. شما می توانید آن را با استفاده از لینک زیر دانلود کنید.
دانلود Northwind پایگاه داده
رشته اتصال
در زیر رشته اتصال برای اتصال به پایگاه داده است.

<connectionStrings>
    <addname="conString"
    connectionString="Data Source=.\SQLExpress;database=Northwind;
    Integrated Security=true"/>
</connectionStrings>

کد HTML
در زیر کد HTML از صفحه است. در کد زیر یک اسکریپت و پنل به روز رسانی را در صفحه قرار داده ایم. در داخل پنل Update، یک کنترل GridView را همراه با پلاگین افزونه Modal که برای افزودن یا ویرایش سوابق در کنترل GridView استفاده می شود قرار داده ایم.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" Width = "550px"
AutoGenerateColumns = "false" AlternatingRowStyle-BackColor = "#C2D69B" 
HeaderStyle-BackColor = "green" AllowPaging ="true"
OnPageIndexChanging = "OnPaging"
PageSize = "10" >
<Columns>
<asp:BoundField DataField = "CustomerID" HeaderText = "Customer ID" HtmlEncode = "true" />
<asp:BoundField DataField = "ContactName" HeaderText = "Contact Name" HtmlEncode = "true" />
<asp:BoundField DataField = "CompanyName" HeaderText = "Company Name" HtmlEncode = "true"/>
<asp:TemplateField ItemStyle-Width = "30px" HeaderText = "CustomerID">
   <ItemTemplate>
       <asp:LinkButton ID="lnkEdit" runat="server" Text = "Edit" OnClick = "Edit"></asp:LinkButton>
   </ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle BackColor="#C2D69B" />
</asp:GridView>
<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick = "Add" />
 
<asp:Panel ID="pnlAddEdit" runat="server" CssClass="modalPopup" style = "display:none">
<asp:Label Font-Bold = "true" ID = "Label4" runat = "server" Text = "Customer Details" ></asp:Label>
<br />
<table align = "center">
<tr>
<td>
<asp:Label ID = "Label1" runat = "server" Text = "CustomerId" ></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCustomerID" Width = "40px" MaxLength = "5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID = "Label2" runat = "server" Text = "Contact Name" ></asp:Label>
</td>
<td>
<asp:TextBox ID="txtContactName" runat="server"></asp:TextBox>   
</td>
</tr>
<tr>
<td>
<asp:Label ID = "Label3" runat = "server" Text = "Company" ></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCompany" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick = "Save" />
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick = "return Hidepopup()"/>
</td>
</tr>
</table>
</asp:Panel>
<asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="popup" runat="server" DropShadow="false"
PopupControlID="pnlAddEdit" TargetControlID = "lnkFake"
BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "GridView1" />
<asp:AsyncPostBackTrigger ControlID = "btnSave" />
</Triggers>
</asp:UpdatePanel>

اتصال GridView
 کد ارائه شده در زیر برای اتصال به کنترل GridView استفاده می شود. به سادگی query انتخاب را در جدول مشتریان پایگاه NorthWind وارد می کند.
C #

private String strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindData();
    }
}
 
private void BindData()
{
    string strQuery = "select CustomerID,ContactName,CompanyName" +
                       " from customers";
    SqlCommand cmd = new SqlCommand(strQuery);
    GridView1.DataSource = GetData(cmd);
    GridView1.DataBind();
}
 
private DataTable GetData(SqlCommand cmd)
{
    DataTable dt = new DataTable();
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            con.Open();
            sda.SelectCommand = cmd;
            sda.Fill(dt);
            return dt;
        }
    }
}

VB.Net

Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
 
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Me.BindData()
        End If
End Sub
 
Private Sub BindData()
        Dim strQuery As String = ("select CustomerID,ContactName,CompanyName" + " from customers")
        Dim cmd As SqlCommand = New SqlCommand(strQuery)
        GridView1.DataSource = GetData(cmd)
        GridView1.DataBind()
End Sub
 
Private Function GetData(ByVal cmd As SqlCommand) As DataTable
        Dim dt As DataTable = New DataTable
        Dim con As SqlConnection = New SqlConnection(strConnString)
        Dim sda As SqlDataAdapter = New SqlDataAdapter
        cmd.Connection = con
        con.Open()
        sda.SelectCommand = cmd
        sda.Fill(dt)
        Return dt
End Function

اضافه کردن قابلیت
در روش زیر بر روی دکمه افزودن، فراخوانی می شود که به سادگی جعبه های متنی را خالی می کند و پنجره بازاریابی را با فراخوانی AJAX ModalPopupExtender نمایش می دهد.
C #

protected void Add(object sender, EventArgs e)
{
    txtCustomerID.ReadOnly = false;
    txtCustomerID.Text = string.Empty;
    txtContactName.Text = string.Empty;
    txtCompany.Text = string.Empty;
    popup.Show();
}

VB.Net

Protected Sub Add(ByVal sender As Object, ByVal e As EventArgs)
        txtCustomerID.ReadOnly = False
        txtCustomerID.Text = String.Empty
        txtContactName.Text = String.Empty
        txtCompany.Text = String.Empty
        popup.Show()
End Sub

عکس روی صفحه
در تصویر زیر نمایش داده می شود که دکمه Add را کلیک کرده است.

ویرایش عملکرد
در روش زیر بر روی دکمه ویرایش در ردیف GridView فراخوانی می شود که به سادگی کادرهای متن را با مقادیر مربوطه پر می کند.
C #

protected void Edit(object sender, EventArgs e)
{
    using (GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent)
    {
        txtCustomerID.ReadOnly = true;
        txtCustomerID.Text = row.Cells[0].Text;
        txtContactName.Text = row.Cells[1].Text;
        txtCompany.Text = row.Cells[2].Text;           
        popup.Show();
    }
}

VB.Net

Protected Sub Edit(ByVal sender As Object, ByVal e As EventArgs)
        Dim row As GridViewRow = CType(CType(sender, LinkButton).Parent.Parent, GridViewRow)
        txtCustomerID.ReadOnly = True
        txtCustomerID.Text = row.Cells(0).Text
        txtContactName.Text = row.Cells(1).Text
        txtCompany.Text = row.Cells(2).Text
        popup.Show()
End Sub

عکس روی صفحه
تصویری که در زیر نمایش داده می شود، پنجره ی modal popup که به دکمه ی Edit کلیک می شود را به کاربر نشان داده می شود.

 

به روزرسانی سوابق
پس از کلیک روی دکمه Save دکمه Modal، روش زیر فراخوانی می شود. روش زیر به سادگی روش AddUpdateCustomer ذخیره شده (که بعدا شرح داده شده است) را فراخوانی می کند .
C #

protected void Save(object sender, EventArgs e)
{
    using (SqlCommand cmd = new SqlCommand())
    {
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.CommandText = "AddUpdateCustomer";
        cmd.Parameters.AddWithValue("@CustomerID", txtCustomerID.Text);
        cmd.Parameters.AddWithValue("@ContactName", txtContactName.Text);
        cmd.Parameters.AddWithValue("@CompanyName", txtCompany.Text);
        GridView1.DataSource = this.GetData(cmd);
        GridView1.DataBind();
    }
}

VB.Net

Protected Sub Save(ByVal sender As Object, ByVal e As EventArgs)
        Dim cmd As SqlCommand = New SqlCommand
        cmd.CommandType = CommandType.StoredProcedure
        cmd.CommandText = "AddUpdateCustomer"
        cmd.Parameters.AddWithValue("@CustomerID", txtCustomerID.Text)
        cmd.Parameters.AddWithValue("@ContactName", txtContactName.Text)
        cmd.Parameters.AddWithValue("@CompanyName", txtCompany.Text)
        GridView1.DataSource = Me.GetData(cmd)
        GridView1.DataBind()
End Sub

روش ذخیره شده زیر برای افزودن و به روزرسانی سوابق در پایگاه داده استفاده می شود. روش ذخیره شده برای اولین بار بررسی می کند که آیا در جدول وجود دارد. اگر رکورد وجود داشته باشد، جدول به به روز می شود و بعدی رکورد جدید وارد شده در پایگاه داده است.

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[AddUpdateCustomer]
      @CustomerID NCHAR(5),
      @ContactName NVARCHAR(30),
      @CompanyName NVARCHAR(40)
AS
BEGIN
      SET NOCOUNT ON;
    IF EXISTS(SELECT * FROM Customers WHERE CustomerID = @CustomerID)
    BEGIN
            UPDATE [Customers]
            SET [CompanyName] = @CompanyName
               ,[ContactName] = @ContactName
            WHERE CustomerID = @CustomerID
    END
    ELSE
    BEGIN
            INSERT INTO [Customers]
           ([CustomerID]
           ,[CompanyName]
           ,[ContactName])
        VALUES
           (@CustomerID
           ,@CompanyName
           ,@ContactName)
    END
   
    SELECT [CustomerID]
          ,[CompanyName]
          ,[ContactName]
      FROM Customers         
END

عکس روی صفحه
تصویر زیر داده ای را که در جدول پایگاه داده ذخیره شده است را توصیف می کند. تا زمانی که داده ها در پایگاه داده به روز شود یک نوار پیشرفت در حال نمایش است .  تا از انجام دوباره کار توسط کاربر جلوگیری کند . در زیر اسکریپت سمت سرویس گیرنده است که به شما کمک می کند تا همانند سازی کنید.

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.blockUI.js" type="text/javascript"></script>
<script type = "text/javascript">
    function BlockUI(elementID) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(function() {
            $("#" + elementID).block({ message: '<table align = "center"><tr><td>' +
     '<img src="images/loadingAnim.gif"/></td></tr></table>',
                css: {},
                overlayCSS: { backgroundColor: '#000000', opacity: 0.6
                }
            });
        });
        prm.add_endRequest(function() {
            $("#" + elementID).unblock();
        });
    }
    $(document).ready(function() {
 
        BlockUI("<%=pnlAddEdit.ClientID %>");
        $.blockUI.defaults.css = {};
    });
    function Hidepopup() {
        $find("popup").hide();
        return false;
    }
</script>

امیدواریم این مقاله مورد پسند شما قرار بگیرد .


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :