ajax gridview 嵌套
ajax GridView 嵌套 弹出模态窗口
页面结构 大体
第一层 updatepanel2
第二层 GridView1
GridView1的字段1
GridView1的字段2
GridView1的模板列1
第三层 1 GridView2
GridView1的模板列1
GridView1的模板列2
第三层 2 updatepanel1
第四层 GridView3
第三层 2 updatepanel1
GridView1的模板列2
第二层 GridView1
第一层 updatepanel2
特别说明
第四层的 GridView3 是由 GridView1 的模板列2 里 一个 LinkButton点击后填充的，
并由 AjaxControlToolkit 的 ModalPopupExtender 控件的模态弹出窗口负责显示的 ，
GridView3 里的数据是可以同时更新的。ModalPopupExtender 的显示控制是由后台负责的。
GridView 需要的数据 是由 linq提供的。所以这些代码拿过去是不能够直接使用的。
页面结构
<%@ Page Language="C#" MasterPageFile="~/Master/WareHouse.master" Theme="DataWebControls" AutoEventWireup="true" CodeFile="ProductionSearch.aspx.cs" Inherits="Pages_WareHouse_ProductionSearch" Title="Untitled Page" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MasterContent" Runat="Server">
<style type="text/css">
<!--
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
-->
</style>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
onrowdatabound="GridView1_RowDataBound" Width="700px" >
<Columns>
<asp:BoundField DataField="id" HeaderText="ID" />
<asp:BoundField DataField="name" HeaderText="Name" />
<asp:TemplateField>
<ItemTemplate>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false"
ShowHeader="false"
onrowediting="GridView2_RowEditing"
OnRowUpdating="GridView2_RowUpdating"
OnRowCancelingEdit="GridView2_RowCancelingEdit"
OnRowDeleting="GridView2_RowDeleting">
<Columns>
<asp:BoundField DataField="id" >
<HeaderStyle Width="50px" />
</asp:BoundField>
<asp:BoundField DataField="name" >
<HeaderStyle Width="50px" />
</asp:BoundField>
<asp:CommandField ShowEditButton="True" >
<HeaderStyle Width="100px" />
</asp:CommandField>
<asp:CommandField ShowDeleteButton="True" >
<HeaderStyle Width="50px" />
</asp:CommandField>
</Columns>
</asp:GridView>
</ItemTemplate>
<HeaderStyle Width="300px" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server"
oncommand="LinkButton1_Command"
CommandArgument='<%# Eval("id") %>'>修改</asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
PopupDragHandleControlID="Panel2"
BackgroundCssClass="modalBackground"
Enabled = "false"
CancelControlID="CencelButton">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" Width="300px" style="display:none; background-color:White;border:solid 1px black;">
<asp:Panel ID="Panel2" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
fdsafsda</asp:Panel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<asp:GridView ID="DetailGridView" runat="server"
AutoGenerateColumns="false"
>
<Columns>
<asp:TemplateField HeaderText="UserID">
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UserID">
<ItemTemplate>
<asp:TextBox ID="TB_UserID" runat="server" Text='<%# Eval("userid") %>' ReadOnly="true"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CarID">
<ItemTemplate>
<asp:TextBox ID="TB_CarID" runat="server" Text='<%# Eval("id") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CarName">
<ItemTemplate>
<asp:TextBox ID="TB_CarName" runat="server" Text='<%# Eval("name") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle ForeColor="#33CCFF" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<p>
<asp:Button ID="UpdateButton" runat="server" Text="确定" OnClick="UserCarUpdateButton_OnClick" />
<asp:Button ID="CencelButton" runat="server" Text="取消" />
</p>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
后台代码
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;
using AjaxControlToolkit;
public partial class Pages_WareHouse_ProductionSearch : System.Web.UI.Page
{
// 暂时使用的 userList 的缓存 key
private string user_LIST_CACHE_KEY = "userListCache";
private IUserService userService = null;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
initPage();
}
}
/// <summary>
/// 页面初始化
/// </summary>
public void initPage()
{
userService = ServiceFactory.getUserService();
IList<user> userList = userService.getUser();
//这个 将查出来的数据缓存一下 不应该写在这里
HttpRuntime.Cache.Insert(user_LIST_CACHE_KEY, userList);
this.GridView1.DataSource = userList;
this.GridView1.DataKeyNames = new String[] { "id" };
this.GridView1.DataBind();
}
/// <summary>
/// 子GridView2的删除事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView2_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
//这里 要有相应的代码
}
/// <summary>
/// 外层GridView1的 行绑定事件
/// 在这里绑定每行的 子 GridVeiw2
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int userID = int.Parse(GridView1.DataKeys[e.Row.RowIndex].Value.ToString());
GridView gv = (GridView)e.Row.FindControl("GridView2");
gv.DataSource = getCars(userID);
gv.DataKeyNames = new string[] { "id", "userid" };
gv.DataBind();
}
}
/// <summary>
/// 取得user的Car列表
/// </summary>
/// <param name="id">userID</param>
/// <returns></returns>
private IList getCars(int userID)
{
//IList<user> userList = ((IList<user>)Cache.Get(user_LIST_CACHE_KEY));
userService = ServiceFactory.getUserService();
IList<user> userList = userService.getUser();
return (from u in userList where u.id == userID select u.Cars).ToList()[0];
}
/// <summary>
/// 子GridView2的更新事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView2_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
//dataBind();
GridView gv2 = (GridView)sender;
Car car = new Car();
car.name = ((TextBox)gv2.Rows[e.RowIndex].Cells[1].Controls[0]).Text.ToString().Trim();
car.id = int.Parse(gv2.DataKeys[e.RowIndex].Values["id"].ToString());
int userID = int.Parse(gv2.DataKeys[e.RowIndex].Values["userid"].ToString());
//这里调用更新Car的方法
gv2.EditIndex = -1;
gv2.DataSource = getCars(userID);
gv2.DataBind();
}
/// <summary>
/// 子GridView2的到切换的编辑状态的事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView2_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView gv2 = (GridView)sender;
gv2.EditIndex = e.NewEditIndex;
int carID = int.Parse(gv2.DataKeys[e.NewEditIndex].Value.ToString());
int userID = int.Parse(gv2.DataKeys[e.NewEditIndex].Values["userid"].ToString());
gv2.DataSource = getCars(userID);
gv2.DataBind();
}
/// <summary>
/// 子GridView2的取消编辑状态
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView2_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
GridView gv2 = (GridView)sender;
gv2.EditIndex = -1;
int userID = int.Parse(gv2.DataKeys[e.RowIndex].Values["userid"].ToString());
gv2.DataSource = getCars(userID);
gv2.DataBind();
}
/// <summary>
/// 弹出详细页面的事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void LinkButton1_Command(object sender, CommandEventArgs e)
{
int userID = int.Parse(e.CommandArgument.ToString());
LinkButton lb = (LinkButton)sender;
GridView detailGV = (GridView)lb.Parent.FindControl("DetailGridView");
detailGV.DataSource = getCars(userID);
detailGV.DataKeyNames = new string[] { "id", "userid" };
detailGV.DataBind();
ModalPopupExtender mpe = (ModalPopupExtender)lb.Parent.FindControl("ModalPopupExtender1");
mpe.Enabled = true;
mpe.Show();
}
/// <summary>
/// 更新用户的汽车的事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void UserCarUpdateButton_OnClick(object sender, EventArgs e)
{
Button updateButton = (Button)sender;
GridView gv = (GridView)updateButton.Parent.FindControl("DetailGridView");
CarDao carDao = new CarDao();
//取得全部的汽车的信息 逐个更新
for (int i = 0; i < gv.Rows.Count; i++)
{
GridViewRow row = gv.Rows[i];
string userID = ((TextBox)row.Cells[0].FindControl("TB_UserID")).Text.Trim();
string carID = ((TextBox)row.Cells[1].FindControl("TB_CarID")).Text.Trim();
string carName = ((TextBox)row.Cells[1].FindControl("TB_CarName")).Text.Trim();
//这里应该作更新的操作
carDao.updateCarLinq(new Car { id = int.Parse(carID), name = carName, userid = int.Parse(userID)});
}
ModalPopupExtender mpe = (ModalPopupExtender)gv.Parent.FindControl("ModalPopupExtender1");
mpe.Enabled = false;
//更新后 重新更新一下页面
initPage();
this.UpdatePanel2.Update();
}
}
vs 2008 下测试通过