JqueryUI dialog model和asp_UpdatePanel 例子

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测试通过