Asp.net页面如下：
需要jquery-UI.js 和Jquery.js
<%@ Page Title="" Language="C#" MasterPageFile="~/Test.Master" AutoEventWireup="true" CodeBehind="WebFormJQueryTest.aspx.cs" Inherits="WebFormJQueryTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<link href="http://www.cnblogs.com/Styles/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.6.2.js"></script>
<script language="javascript" type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-ui-1.8.14.custom.min.js"></script>
<script language="javascript" type="text/javascript" >
$(document).ready(function () {
//setup new person dialog
$('#newPerson').dialog({
autoOpen: false,
draggable: true,
modal: true,
title: "添加记录",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
//setup edit person dialog
$('#editPerson').dialog({
autoOpen: false,
draggable: true,
title: "编辑记录",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
function showDialog(id) {
$('#' + id).dialog("open");
}
function closeDialog(id) {
$('#' + id).dialog("close");
}
</script>
<asp:ScriptManager ID="mainScriptManager" runat="server"></asp:ScriptManager>
<input id="btnAdd" type="button" onclick="showDialog('newPerson');" value="添加" />
<hr />
<asp:UpdatePanel ID="upGrid" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:GridView ID="gvUsers" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
Names
</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton ID="lbName" CommandArgument='<%# Eval("Key") %>' Text='<%# Eval("Value") %>'
OnClientClick="showDialog('editPerson');" onclick="lbName_Click" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<div id='newPerson'>
<asp:UpdatePanel ID="upNewUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<asp:Label ID="lblNewName" runat="server" AssociatedControlID="txtNewName" Text="Name"></asp:Label>
<asp:TextBox ID="txtNewName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqName1" ControlToValidate="txtNewName" ValidationGroup="Add" runat="server" ErrorMessage="Name is required"></asp:RequiredFieldValidator>
<asp:Button ID="btnAddSave" OnClick="btnAddSave_Click" runat="server" Text="Save" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id='editPerson'>
<asp:UpdatePanel ID="upEditUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<asp:Label ID="lblEditName" runat="server" AssociatedControlID="txtEditName" Text="Name"></asp:Label>
<asp:TextBox ID="txtEditId" Visible="false" runat="server"></asp:TextBox>
<asp:TextBox ID="txtEditName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqName2" ControlToValidate="txtEditName" ValidationGroup="Edit" runat="server" ErrorMessage="Name is required"></asp:RequiredFieldValidator>
<asp:Button ID="btnEditSave" runat="server" Text="Save"
onclick="btnEditSave_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
.CS 页面代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Test
{
public partial class WebFormJQueryTest : System.Web.UI.Page
{
private Dictionary<Guid, string> Names
{
get { return (Dictionary<Guid, string>)ViewState["Names"]; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
/*
* to keep this sample really simple, we will populate some
* sample data in a Dictionary and store in the viewstate
*/
var names = new Dictionary<Guid, string>
{
{Guid.NewGuid(), "John"},
{Guid.NewGuid(), "Smith"},
{Guid.NewGuid(), "Arther"},
{Guid.NewGuid(), "Hari"}
};
//store the list in the viewstate.
ViewState.Add("Names", names);
//init grid
LoadNames();
}
}
private void LoadNames()
{
//databind grid
gvUsers.DataSource = ViewState["Names"];
gvUsers.DataBind();
}
protected void btnAddSave_Click(object sender, EventArgs e)
{
Page.Validate("Add");
if (Page.IsValid)
{
Names.Add(Guid.NewGuid(), txtNewName.Text);
LoadNames();
CloseDialog("newPerson");
//reset
txtNewName.Text = string.Empty;
//refresh grid
upGrid.Update();
}
}
protected void btnEditSave_Click(object sender, EventArgs e)
{
Page.Validate("Edit");
if (Page.IsValid)
{
Names[new Guid(txtEditId.Text)] = txtEditName.Text;
LoadNames();
CloseDialog("editPerson");
//reset
txtEditId.Text = string.Empty;
txtEditName.Text = string.Empty;
//refresh grid
upGrid.Update();
}
}
/// <summary>
/// Populate the Dialog with the existing name
/// and update the edit panel
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lbName_Click(object sender, EventArgs e)
{
var editLink = ((LinkButton)sender);
txtEditId.Text = editLink.CommandArgument;
txtEditName.Text = Names[new Guid(editLink.CommandArgument)];
upEditUpdatePanel.Update();
}
/// <summary>
/// Registers client script to close the dialog
/// </summary>
/// <param name="dialogId"></param>
private void CloseDialog(string dialogId)
{
string script = string.Format(@"closeDialog('{0}')", dialogId);
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}
}
}
vs2010、.net4.0测试通过