Cấp bậc tác giả:

DOTNET

Sử dụng GridView với Context Menu trong ASP.NET

Được viết bởi QuangIT ngày 24/03/2013 lúc 03:09 PM
Bài viết này sẽ hướng dẫn cách tạo ra GridView với Context Menu trong ASP.NET. Sử dụng đến trên tất cả các trình duyệt phổ biến hiện nay.
  • 0
  • 2694
Tải tệp tin: Click ở đây

Sử dụng GridView với Context Menu trong ASP.NET


Bài viết này sẽ hướng dẫn cách tạo ra GridView với Context Menu trong ASP.NET. Sử dụng đến trên tất cả các trình duyệt phổ biến hiện nay.

contextmenu.jpg

Bước 1: Tại trang ContextMenu.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ContextMenu.aspx.cs" Inherits="ContextMenu.ContextMenu" %>

<!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>Grid View Demo | DOTNET GROUP</title>
    <link href="_assets/css/StyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="_assets/css/confirm.css" rel="stylesheet" type="text/css" />
    <link href="_assets/css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
    <script src="_assets/js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="_assets/js/jquery.simplemodal-1.1.1.js" type="text/javascript"></script>
    <script src="_assets/js/jquery.contextMenu.js" type="text/javascript"></script>
    <!-- IE 6 hacks -->
    <!--[if lt IE 7]>
<link type='text/css' href='_assets/css/confirm_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
    <style type="text/css">
        .customerRow
        {
        }
        .gvhide
        {
            display: none;
        }
    </style>
    <script language="javascript" type="text/javascript">
        var CustomerID = null;
        var CompanyName = null;
        var ContactName = null;

        $(document).ready(function () {
            $(".customerRow").contextMenu({ menu: 'myMenu' }, function (action, el, pos) { contextMenuWork(action, el, pos); });
            $(".openmenu").contextMenu({ menu: 'myMenu', leftButton: true }, function (action, el, pos) { contextMenuWork(action, el.parent("tr"), pos); });
        });

        function contextMenuWork(action, el, pos) {
            var rowindex = (el[0].rowIndex * 1 - 1);
            CustomerID = $("#Gridview1_lbl_CustomerID_" + rowindex).html();
            CompanyName = $("#Gridview1_lbl_CompanyName_" + rowindex).html();
            ContactName = $("#Gridview1_lbl_ContactName_" + rowindex).html();
            switch (action) {
                case "delete":
                    {

                        var msg = "Delete " + ContactName + "?";
                        confirm(msg);
                        break;
                    }
                case "insert":
                    {
                        alert("Insert");
                        break;
                    }

                case "edit":
                    {
                        alert("Edit");
                        break;
                    }
            }
        }

        function pageLoad() {
            $(".customerRow").contextMenu({ menu: 'myMenu' }, function (action, el, pos) { contextMenuWork(action, el, pos); });
            $(".openmenu").contextMenu({ menu: 'myMenu', leftButton: true }, function (action, el, pos) { contextMenuWork(action, el.parent("tr"), pos); });
        }

        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
                AllowPaging="true" OnPageIndexChanging="Gridview1_PageIndexChanging" PageSize="5">
                <Columns>
                    <asp:TemplateField HeaderText="CustomerID">
                        <ItemTemplate>
                            <asp:Label ID="lbl_CustomerID" runat="server" Text='<%# Eval("customerid") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle CssClass="gvhide" />
                        <HeaderStyle CssClass="gvhide" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="CompanyName">
                        <ItemTemplate>
                            <asp:Label ID="lbl_CompanyName" runat="server" Text='<%# Eval("CompanyName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="ContactName">
                        <ItemTemplate>
                            <asp:Label ID="lbl_ContactName" runat="server" Text='<%# Eval("ContactName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </ContentTemplate>
    </asp:UpdatePanel>
    <!-- Right Click Menu -->
    <ul id="myMenu" class="contextMenu">
        <li class="insert"><a href="#insert">Add New</a></li>
        <li class="edit"><a href="#edit">Edit</a></li>
        <li class="delete"><a href="#delete">Delete</a></li>
    </ul>
    </form>
</body>
</html>

Bước 2: Tại ContextMenu.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;

namespace ContextMenu
    {
    public partial class ContextMenu : System.Web.UI.Page
        {
        protected void Page_Load(object sender, EventArgs e)
            {
            if (!IsPostBack)
                {
                BindGrid();
                }
            }

        private void BindGrid()
            {
            DataTable dt = new DataTable();
            dt = GetDatasource();
            Gridview1.DataSource = dt;
            Gridview1.DataBind();
            }

        private DataTable GetDatasource()
            {
            string path = Server.MapPath("~/customers.xml");
            DataSet ds = new DataSet();
            ds.ReadXml(path);
            return ds.Tables[0];
            }

        protected void Gridview1_RowDataBound(object sender, GridViewRowEventArgs e)
            {
            if (e.Row.RowType == DataControlRowType.DataRow)
                {
                DataTable dt = new DataTable();
                dt = (DataTable)Gridview1.DataSource;
                int rowindex = e.Row.RowIndex;
                e.Row.Attributes.Add("class", "customerRow");              
                                
                }
            }

        protected void Gridview1_PageIndexChanging(object sender, GridViewPageEventArgs e)
            {
            Gridview1.PageIndex = e.NewPageIndex;
            BindGrid();
            }
        }
    }

Chú ý:
  • Sử dụng jquery ContextMenu
  • Làm việc tốt trong tất cả các trình duyệt (IE, Mozilla, Chrome)
  • Làm việc tốt cả khi sử dụng Ajax Update Panel.
Bước 3: Tại customers.xml
<?xml version="1.0" encoding="utf-8" ?>
<customers>
  <customers>
    <CustomerID>1</CustomerID>
    <CompanyName>DOTNET GROUP</CompanyName>
    <ContactName>Long Thieng</ContactName>
    <ContactTitle>Quản trị viên</ContactTitle>
    <Address>143/2 Lý Tự Trọng</Address>
    <City>Đà Nẵng</City>
    <PostalCode>511</PostalCode>
    <Country>Việt Nam</Country>
    <Phone>0905042112</Phone>
    <Fax>0000000</Fax>
  </customers>
  <customers>
    <CustomerID>2</CustomerID>
    <CompanyName>Fsoft</CompanyName>
    <ContactName>Minh Trí</ContactName>
    <ContactTitle>Sr. Software Developer</ContactTitle>
    <Address>Ông ích khiêm</Address>
    <City>Đà Nẵng</City>
    <PostalCode>511</PostalCode>
    <Country>Việt Nam</Country>
    <Phone>0905181346</Phone>
  </customers>
</customers>

Ngoài ra còn có CSS, JS. Các bạn tải Source về.

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML