Sunday, March 11, 2012

How can I ajax gridview in a usercontrol and this usercontrol is loaded to a webpage(*.asp

Small example is given here. you can modify the ascx page given here to modify the grid view you are planning to use.

WebUserControl.ascx

<%@. Control Language="C#" ClassName="WebUserControl" %
<script runat="server"
</script
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="308px" Width="513px">
<asp:GridView ID="GridView1" runat="server"AutoGenerateColumns="False" CellPadding="4"
DataSourceID="XmlDataSource1" ForeColor="#333333" GridLines="None"AllowPaging="True">
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White"/>
<Columns>
<asp:BoundField DataField="name" HeaderText="name"SortExpression="name" />
<asp:BoundField DataField="age" HeaderText="age"SortExpression="age" />
<asp:BoundField DataField="country" HeaderText="country"SortExpression="country" />
</Columns>
<RowStyle BackColor="#E3EAEB" />
<EditRowStyle BackColor="#7C6F57" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True"ForeColor="#333333" />
<PagerStyle BackColor="#666666" ForeColor="White"HorizontalAlign="Center" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White"/>
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server"DataFile="~/App_Data/data.xml">
</asp:XmlDataSource>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

Default22.aspx

<%@. Page Language="C#" %
<%@. Register src="http://pics.10026.com/?src=WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<uc1:WebUserControl ID="WebUserControl1" runat="server" />

</div>
</form>
</body>
</html>


thank you for your answer. But now if I want to load two controls. Each control have a gridview and I want to load each of this control in to mydefault.aspx when I click links on this page. I use placeholder to load control when I click in these links. The problem will occur when I click on the page index (paging) in the gridview. The messege error: Could not find Updatepanel with ID "ctl01_UpdatePanel1".If it is being updated dynamically then it must be inside another UpdatePanel. Althought I use UpdatePanel with defferent ID but still get this message? How can I resolve this problem. Thank you so much.

You can see the following code:

user control1:

<%

@.ControlLanguage="C#"AutoEventWireup="true"CodeFile="WebUserControl1.ascx.cs"Inherits="Controls_WebUserControl1" %>

<

scriptrunat="server">

</

script>

<

asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate><asp:PanelID="Panel1"runat="server"Height="308px"Width="513px"><asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="False"CellPadding="4"DataSourceID="Stock"ForeColor="#333333"GridLines="None"AllowPaging="True"AllowSorting="True"PageSize="145"PagerSettings-Position="TopAndBottom"><FooterStyleBackColor="#1C5E55"Font-Bold="True"ForeColor="White"/><Columns><asp:BoundFieldDataField="ID"HeaderText="Stock ID"SortExpression="Stock ID"/><asp:BoundFieldDataField="Symbol"HeaderText="Symbol"SortExpression="Symbol"/><asp:BoundFieldDataField="FullName"HeaderText="FullName"SortExpression="FullName"/></Columns><RowStyleBackColor="#E3EAEB"/><EditRowStyleBackColor="#7C6F57"/><SelectedRowStyleBackColor="#C5BBAF"Font-Bold="True"ForeColor="#333333"/><PagerStyleBackColor="#666666"ForeColor="White"HorizontalAlign="Center"/><HeaderStyleBackColor="#1C5E55"Font-Bold="True"ForeColor="White"/><AlternatingRowStyleBackColor="White"/></asp:GridView><asp:SqlDataSourceID="Stock"runat="server"ConnectionString="<%$ ConnectionStrings:StockConnectionString %>"SelectCommand="SELECT [ID], [FullName], [Symbol] FROM [Stock]"></asp:SqlDataSource></asp:Panel></ContentTemplate>

</

asp:UpdatePanel>

user control2:

<%

@.ControlLanguage="C#"AutoEventWireup="true"CodeFile="WebUserControl2.ascx.cs"Inherits="Controls_WebUserControl2" %>

<

scriptrunat="server">

</

script>

<

asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate><asp:PanelID="Panel1"runat="server"Height="308px"Width="513px"><asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="False"CellPadding="4"DataSourceID="Location"ForeColor="#333333"GridLines="None"AllowPaging="True"AllowSorting="True"PageSize="12"PagerSettings-Position="TopAndBottom"><FooterStyleBackColor="#1C5E55"Font-Bold="True"ForeColor="White"/><Columns><asp:BoundFieldDataField="ID"HeaderText="Location ID"SortExpression="ID"/><asp:BoundFieldDataField="Symbol"HeaderText="Location Symbol"SortExpression="Symbol"/><asp:BoundFieldDataField="Location"HeaderText="FullName"SortExpression="Location"/></Columns><RowStyleBackColor="#E3EAEB"/><EditRowStyleBackColor="#7C6F57"/><SelectedRowStyleBackColor="#C5BBAF"Font-Bold="True"ForeColor="#333333"/><PagerStyleBackColor="#666666"ForeColor="White"HorizontalAlign="Center"/><HeaderStyleBackColor="#1C5E55"Font-Bold="True"ForeColor="White"/><AlternatingRowStyleBackColor="White"/></asp:GridView><asp:SqlDataSourceID="Location"runat="server"ConnectionString="<%$ ConnectionStrings:StockConnectionString %>"SelectCommand="SELECT [ID], [Symbol], [Location] FROM [Location]"></asp:SqlDataSource></asp:Panel></ContentTemplate>

</

asp:UpdatePanel>

And mydefault.aspx:

<%

@.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

scriptrunat="server">

</

script>

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headid="Head1"runat="server"><title>Untitled Page</title>

</

head>

<

body><formid="form1"runat="server"><div><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><table><tr><td><asp:LinkButtonID="LinkButton1"runat="server"OnClick="LinkButton1_Click">LoadGridView1</asp:LinkButton></td></tr><tr><td><asp:LinkButtonID="LinkButton2"runat="server"OnClick="LinkButton2_Click">LoadGridView2</asp:LinkButton></td></tr></table><asp:PlaceHolderID="PlaceHolder1"runat="server"></asp:PlaceHolder></div></form>

</

body>

</

html>


Try this. It is not perfect but a hack.

Default22.aspx

<%@. Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server">
protected void LinkButton1_Click(object sender, EventArgs e)
{
Control c = this.LoadControl("WebUserControl.ascx");
c.ID = "uc1";
Panel1.Controls.Clear();
Panel1.Controls.Add(c);
}
protected void LinkButton2_Click(object sender, EventArgs e)
{
Control c = this.LoadControl("WebUserControl2.ascx");
c.ID = "uc2";
Panel1.Controls.Clear();
Panel1.Controls.Add(c);

}
protected void Page_Load(object sender, EventArgs e)
{
if (ScriptManager1.IsInAsyncPostBack)
{
string info = ScriptManager1.AsyncPostBackSourceElementID; // sm -script manager
if (info.Contains("uc1"))
{
CurrentControl = "WebUserControl.ascx";
LoadControl();
}
else if (info.Contains("uc2") )
{
CurrentControl = "WebUserControl2.ascx";
LoadControl();
}

}

}

public string CurrentControl
{
get
{
return ViewState["CurrentControl"] == null ? "login.ascx" :(string)ViewState["CurrentControl"];
}
set
{
ViewState["CurrentControl"] = value;
}
}

void LoadControl()
{
Control ctl = LoadControl(CurrentControl);
Panel1.Controls.Clear(); // ph - place holder
Panel1.Controls.Add(ctl);
if (CurrentControl == "WebUserControl2.ascx")
{
ctl.ID = "uc2";
}
else if (CurrentControl == "WebUserControl.ascx")
{
ctl.ID = "uc1";
}
}
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table>
<tr>
<td><asp:LinkButton ID="LinkButton1" runat="server"OnClick="LinkButton1_Click">LoadGridView1</asp:LinkButton></td>
</tr>
<tr>
<td><asp:LinkButton ID="LinkButton2" runat="server"OnClick="LinkButton2_Click">LoadGridView2</asp:LinkButton></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="108px"Width="547px">
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

</div>
</form>
</body>
</html>


WebUserConrol.ascx &WebUserConrol2.ascx are same as below change only ClassName toWebUserConrol2

<%@. Control Language="C#" ClassName="WebUserControl" %
<script runat="server"
</script
<asp:Panel ID="Panel1" runat="server" Height="308px" Width="513px">
<asp:GridView ID="GridView1" runat="server"AutoGenerateColumns="False" CellPadding="4"
DataSourceID="XmlDataSource1" ForeColor="#333333" GridLines="None"AllowPaging="True" OnPageIndexChanged="GridView1_PageIndexChanged">
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White"/>
<Columns>
<asp:BoundField DataField="name" HeaderText="name"SortExpression="name" />
<asp:BoundField DataField="age" HeaderText="age"SortExpression="age" />
<asp:BoundField DataField="country" HeaderText="country"SortExpression="country" />
</Columns>
<RowStyle BackColor="#E3EAEB" />
<EditRowStyle BackColor="#7C6F57" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True"ForeColor="#333333" />
<PagerStyle BackColor="#666666" ForeColor="White"HorizontalAlign="Center" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White"/>
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server"DataFile="~/App_Data/data.xml">
</asp:XmlDataSource>
</asp:Panel

No comments:

Post a Comment