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.
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ề.