Postback problem with dynamically added ModalPopupExtender

In my task i have to create ModalPopupExtender dynamically, and add an .ascx control to it. This is the code:

Test.aspx page:

<

asp:ScriptManagerProxyrunat="server"ID="proxy"/>

<

asp:UpdatePanelrunat="server"ID="ajaxPanel"RenderMode="Inline"UpdateMode="Conditional"><ContentTemplate><asp:Panelrunat="server"ID="panel"><asp:Buttonrunat="server"ID="btn2"Text="Show Control"OnClick="btn2_Click"/></asp:Panel>

<%

--<asp:Button runat="server" ID="btn1" Text="test1" OnClick="btn1_Click" />--%>

</ContentTemplate></asp:UpdatePanel>

test.ascx control:

<

asp:ScriptManagerProxyrunat="server"ID="proxy"/>

<

asp:UpdatePanelrunat="server"ID="ajaxPanel2"RenderMode="Inline"UpdateMode="Always"><ContentTemplate> <asp:Buttonrunat="server"ID="btnTest2"Text="test2"OnClick="btnTest2_Click"/></ContentTemplate></asp:UpdatePanel><asp:Buttonrunat="server"UseSubmitBehavior="false"ID="btnTest"Text="Close OK"OnClick="btnTest_Click"/><asp:Buttonrunat="server"UseSubmitBehavior="false"ID="btnTestClose"Text="Close"OnClick="btnTest_Click"/>

In aspx page:

protected

overridevoid OnInit(EventArgs e)

{

base.OnInit(e);Control c = LoadControl("~/test.ascx");

c.ID =

"customModalControl";Panel p =newPanel();

p.Width = 300;

p.Height = 200;

p.CssClass =

"modalPopup";

p.ID =

"modalPanel_";_modalPopup =newModalPopupExtender();

_modalPopup.ID =

"modalPopup";

_modalPopup.DropShadow =

true;

_modalPopup.BackgroundCssClass ="modalBackground";

_modalPopup.PopupControlID = p.ID;

_modalPopup.TargetControlID = btn2.ID;

Control c2 = c.FindControl("btnTest");

_modalPopup.OkControlID = c2.ClientID;

c2 = c.FindControl("btnTestClose");

_modalPopup.CancelControlID = c2.ClientID;

p.Controls.Add(c);

panel.Controls.Add(_modalPopup);

panel.Controls.Add(p);

}

protectedvoid btn1_Click(object sender,EventArgs e)

{

}

protectedvoid btn2_Click(object sender,EventArgs e)

{

_modalPopup.Show();

}

onInit event, i create ModalPopupExtender and a panel for ascx control. All works fine, but is one problem, when i click btnTest2 on ModalPopup, rises postback for the page, but ascx control didn't receive btnTest2 _OnClick event. Maybe someone know where is a problem. Thank you.

Try to change change some of your codes to specify asynchronous post back.
<asp:UpdatePanel runat="server" ID="ajaxPanel2" RenderMode="Inline" UpdateMode="Always">
<ContentTemplate>
??????<asp:Button runat="server" ID="btnTest2" Text="test2" OnClick="btnTest2_Click"/>
</ContentTemplate>
<triggers>
????<asp:AsyncPostBackTrigger ControlID="btnTest2" EventName="Click"/>
</triggers>
</asp:UpdatePanel>
Wish this can help you.

PostBack with query string...

hi,

Here is what I am trying to do, I have a user control, usercontrol is one of many being loaded in a single default.aspx, inside this user control, there are Atlas TabPanels, in several tab panels there are user controls, in these user controls, there are controls causing a postback, the problem is when page is reloaded, it returns to default tabs, I like to pass a query string that contains active tab, but how can I do this in javascript? I am not sure where to put this here or in Atlas forum. Thanks in advanced.

Hi,

I think u need to set the smartnavigation propery to true . so that focus will not be lost during the postback

Swati

Hi,

Because there is a full postback, you need to use a HiddenField to maintain the current active tab index.
After the postback completes, active the corresponding index with javascript.
Like this:
$find('<%=TabContainer1.ClientID%>').set_activeTabIndex(the value kept in the hiddenfield);

Hope this helps.

Problem displaying values in gridview using ajax

hi

I am using asp.net 2.0 version.and sql2005 database.

On my UpdateErrorLog.aspx page i have three dropdown.2nd dropdown is filled on basis of first and 3rd dropdown is filled on basis of second.On 3rd dropdown "onchange" event i have called javascript function"FetchDGContents()" defined in "AjaxScript.js" file using ajax.Ajax Request is send to page"AjaxServer.aspx" and i get the response from that page.Problem is coming when i am trying to use that response to display the data in gridview.Below i am writing the code for Ajax page,Design page and the javascript file.Error is mentioned in javascript file in FunctionFilltable() andCleartable().I have searched and found ,that the control name on page rendering is prefixed with its container name.So u can see in my code and in Javascript file the prefixed name is'ctl00_contentarea'.It is working fine for Dropdowns when i am accessing their values(below in code file u can see) but failed to do so for Gridview.Plz help me out.

Thanks is advance

Below Code ofUpdateErrorLog.aspx file-------

<%@dotnet.itags.org.PageLanguage="C#"MasterPageFile="~/Site.master"AutoEventWireup="true"CodeFile="UpdateErrorLog.aspx.cs"Inherits="UpdateErrorLog"Title="Untitled Page" %>

<asp:ContentContentPlaceHolderID="contentarea"Runat="Server">

<scriptsrc="js/filldropdown.js"type="text/javascript"></script>

<scriptsrc="js/AjaxScript.js"type="text/javascript"></script>//This is the file in which Prblem is coming

<divid="Headingtxt"class="containerheading">

Update Error Log</div>

<divid="formcontent"class="containerdiv">

<tablecellpadding="0"cellspacing="0"class="labelfont">

<tr>

<tdstyle="width: 65px; height: 30px">

<asp:LabelID="Label1"runat="server"Font-Names="Arial"Font-Size="X-Small"

Text="Project"></asp:Label></td>

<tdstyle="width: 100px; height: 30px">

<asp:DropDownListID="ProjectDropDown"runat="server"Width="179px">

</asp:DropDownList></td>

</tr>

<tr>

<tdstyle="width: 65px; height: 29px">

<asp:LabelID="Label2"runat="server"Font-Names="Arial"Font-Size="X-Small"

Text="WBS"></asp:Label></td>

<tdstyle="width: 100px; height: 29px">

<asp:DropDownListID="WBSDropDown"runat="server"Width="178px">

</asp:DropDownList></td>

</tr>

<tr>

<tdstyle="width: 65px; height: 34px;">

<asp:LabelID="Label3"runat="server"Font-Names="Arial"Font-Size="X-Small"

Text="Task"Width="32px"></asp:Label></td>

<tdstyle="width: 100px; height: 34px;">

<asp:DropDownListID="TaskDropDown"runat="server"Width="178px">

</asp:DropDownList></td>

</tr>

<tr>

<tdstyle="width: 65px; height: 28px">

</td>

<tdstyle="width: 100px; height: 28px"align="left">

<asp:ButtonID="BtnGo"runat="server"Text="Go"Width="47px"/></td>

</tr>

</table>

</div>

<divid="gridviewcontent"style="left: 175px; width: 515px; position: absolute; top: 265px;

height: 84px">

<asp:GridViewid="gverrorlog"style="Z-INDEX: 102; LEFT: -6px; POSITION: absolute; TOP: 1px"runat="server"

width="592px"CellPadding="3"GridLines="Both"BorderStyle="Inset"Font-Names="Arial"Font-Size="X-Small"Height="100px">

<HeaderStyleCssClass="colhead"BackColor="#FF8080"Font-Names="Arial"Font-Size="X-Small"></HeaderStyle>

<RowStyleBackColor="#FFC0C0"Font-Names="Arial"Font-Size="X-Small"/>

</asp:GridView>

<TABLEid="imgtbl"style="VISIBILITY:hidden"borderColor="#000000"cellSpacing="1"cellPadding="1"

width="96"bgColor="#ffffff"border="0">

<TR>

<TD></TD>

</TR>

</TABLE>

</div>

</asp:Content>

-------------------------------------------

Code forAjaxserver.aspx page----------

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

publicpartialclassAjaxServer : System.Web.UI.Page

{

#region Variables

SqlConnection con =newSqlConnection(ConfigurationManager.ConnectionStrings["ConString"].ConnectionString);

CommonClass objcommon =newCommonClass();

ErrorLogClass objerrlog=newErrorLogClass();

DataSet SelectLogDS =newDataSet();

string chString;

#endregion

protectedvoid Page_Load(object sender,EventArgs e)

{

if (!IsPostBack)

{

//getting querystring value from update errorlog page

string pid = Request.QueryString["PID"];

string wbsid = Request.QueryString["WBSID"];

string tid = Request.QueryString["TID"];if(Request.QueryString["FromUperrpage"]!=null)

{

Response.Clear();

SelectLogDS=objerrlog.SelectErrorLog(pid, wbsid, tid); //SelectErrorLog is the method defined in a class.

//If you want to test by showing the "Image for Process" for a long time, uncomment the below two lines and set the time

//Dim th As System.Threading.Thread

//th.Sleep(200)

chString = SelectLogDS.GetXml();

Response.Clear();

Response.ContentType ="text/xml";

Response.Write(chString);

Response.End();

}else

{

Response.Clear();

Response.End();

}

}

else

{

Response.Clear();

Response.End();

}

}

}

-----------------------------------

Code forAjaxScript.js ------------------------

// This creates a XMLRequest (ActiveXObject) to be sent to the server

var XmlReq;

function CreateXmlReq()

{

try

{

XmlReq =new ActiveXObject("Msxml2.XMLHTTP");

}

catch(e)

{

try

{

XmlReq =new ActiveXObject("Microsoft.XMLHTTP");

}

catch(oc)

{

XmlReq =null;

}

}

if(!XmlReq &&typeof XMLHttpRequest !="undefined")

{

XmlReq =new XMLHttpRequest();

}

}

//This fucntion is to send the choice into the AJAX Server page for processing

function FetchDGContents()

{

//Starts displaying the Process Image table

imgtbl.style.visibility ='visible';var requestUrl ="AjaxServer.aspx?FromUperrpage=true&PID=" + document.getElementById("ctl00_contentarea_ProjectDropDown").value +"&WBSID=" + document.getElementById("ctl00_contentarea_WBSDropDown").value +"&TID=" + document.getElementById("ctl00_contentarea_TaskDropDown").value;

CreateXmlReq();

if(XmlReq)

{

XmlReq.onreadystatechange = HandleResponse;

XmlReq.open("GET", requestUrl,true);

XmlReq.send();

}

}

function HandleResponse()

{

if(XmlReq.readyState == 4)

{

if(XmlReq.status == 200)

{

// Before filling new contents into the DataGrid, clear the cotents by calling this function

//ClearTable();

// Fill the cleared Datagrid with new XML Reponse

FillTable(XmlReq.responseXML.documentElement);

// Hides the Process Image Table after displaying the contents

imgtbl.style.visibility ='hidden';

}

else

{

alert("There was a problem retrieving data from the server." );

}

}

}

//Fills the datagrid contents with the newly recieved Response content

function FillTable(serrorlog)

{

// Gets the response XML

var errlog = serrorlog.getElementsByTagName('NewDataSet');

// Gets the table type content present in the Response XML and gets the data into a variable tbl

var tbl = document.getElementById('ctl00_contentarea_gverrorlog').getElementsByTagName("tbody")[0];//Getting Error on this Line Error is: "Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object"

// Iterate through the table and add HTML Rows & contents into it.

for(var i=0;i<errlog.context.childNodes(0).parentNode.childNodes.length;i++)

{

// Create a HTML Row

var row = document.createElement("TR");

// Set the style

row.setAttribute("className","text");row.setAttribute("bgColor","#ECECEC");

// Iterate thorugh the columns of each row

for(var j=0;j<errlog.context.childNodes(0).childNodes.length;j++)

{

// Create a HTML DataColumn

var cell = document.createElement("TD");

// Store the cotents we got from Response XML into the column

cell.innerHTML = errlog.context.childNodes(i).childNodes(j).text;

// Append the new column into the current row

row.appendChild(cell);

}

// Append the current row into the HTML Table(i.e DataGrid)

tbl.appendChild(row)

}

}

// Clearing the existing contents of the Datagrid

function ClearTable()

{

var tbl = document.getElementById('ctl00_contentarea_gverrorlog').getElementsByTagName("tbody")[0]; //Getting Error on this Line Error is: "Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object"

var row = tbl.rows.lengthfor (var i=1,j=1;j<row;i++,j++)

{

if (tbl.rows.length == 2){i = 1;}

tbl.deleteRow(i);

if (tbl.rows.length == i) {i = 0;}

}

}

-----------------------------------

u cant access objects of a page by id in separate javascript file

try palacing the code in the aspx page in <Script> tag or

u need to send object of that control to javascript function

Its also not working if we write the code in aspx page instead of placing in seperate js file.

I am still getting same error.

thanks

document.getElementById('ctl00_contentarea_gverrorlog').

instead try using

document.getElementById('<%=Controlid.clientid %>').

i think Controlid is contentarea_gverrorlog

can you please tell me what is clientid in the above code?

i have tried using document.getElementById('<%=Controlid.clientid %>'). but same error is coming.At runtime

it is showing this statement as "document.getElementById('System.Web.UI.WebControls.GridView')"

thanks

Client Id is id of that contol on client side like "ct100_gridview1"

use like this if u have a problem

in javascript which is in the same aspx page that has control

document.getElementById('<%= Id %>').

and Code behind like this

publicpartialclassDisabling_controls : System.Web.UI.Page

{

//Declare Page level global variable

Public String Id=String.Empty;

protectedvoid Page_Load(object sender,EventArgs e)

{

Id = GridView1.ClientID.ToString();

}

Your suggested code is working fine.but still error is coming on the same line i.e

----var tbl = document.getElementById('<%= Id %>').getElementsByTagName("tbody")[0];

if i remove "getElementsByTagName("tbody")[0]" i get the varaible "tbl" valuenull and If I don' t remove

i get the above said error.I am unable to track why error is coming because this code is working fine

in .Net 1.0 version using datagrid.No solution till now...

this is the function in which error is coming...

function FillTable(serrorlog)

{

// Gets the response XML

var errlog = serrorlog.getElementsByTagName('TestErrorLog');

// Gets the table type content present in the Response XML and gets the data into a variable tbl

var tbl = document.getElementById('<%= Id %>').getElementsByTagName("tbody")[0];

// Iterate through the table and add HTML Rows & contents into it.

for(var i=0;i<errlog.context.childNodes(0).parentNode.childNodes.length;i++)

{

// Create a HTML Row

var row = document.createElement("TR");

// Set the style

row.setAttribute("className","text");row.setAttribute("bgColor","#ECECEC");

// Iterate thorugh the columns of each row

for(var j=0;j<errlog.context.childNodes(0).childNodes.length;j++)

{

// Create a HTML DataColumn

var cell = document.createElement("TD");

// Store the cotents we got from Response XML into the column

cell.innerHTML = errlog.context.childNodes(i).childNodes(j).text;

// Append the new column into the current row

row.appendChild(cell);

}

// Append the current row into the HTML Table(i.e DataGrid)

tbl.appendChild(row)

}

}

see view source to check whether datagrid is rendered with

tbody

tags for which you are searching

I m using gridview .In starting i have mentioned that i m working in .Net 2005.

in .Net 2003 the same code is working fine for datagrid.But as in .Net2005 i m using master

pages and therefore control name on rendering gets changed(which is not so in .Net2003).

Same code work fine in .Net2005 if i dont use master pages in my project.

thanks

hi

i got it! where the problem is.Problem i am not showing data in gridview on pageload that's why

the error is coming, because gridview is not rendered onpageload and i am trying to access it...

But then next problem is How to Do paging,sorting,and to define userdefined tempaltes if we use AJAX.

If there is some solution realted to this please give me.I m working in .Net 2005(gridview control).

thanks a lot for all ur help.

That's why i have asked u to see ViewSource whether it is rendered or not

Problem in Using Atlas with UserControls

Hi,

I have a usercontrol with name cppcombo.ascx which is used in welcome.ascx which is again used in loginmaster.ascx and finally on an aspx page.

Now at the aspx page i am unable to know the EventName.

If you have any better option then please tell me.

thanks & regards

Shrikant

Try to use the triggers of asp:UpdatePanel to post back the user control as the following codes.

<div>
<asp:UpdatePanel ID="upnlUserControl" runat="server">
<ContentTemplate>
<uc1:WebUserControl0 ID="WebUserControl0_1" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="WebUserControl0_1" />
</Triggers>
</asp:UpdatePanel>
</div>

Hope it helps you.

Problem installing the Toolkit

I read the post (http://forums.asp.net/t/1149177.aspx) which pointed to a video to help with the installation.

I downloaded the video and followed the instructions (Create the VSI file in VS 2005; run the VSI) however I am not seeing the toolkit as a template as the video indicates.

I checked the \My Documents\Visual Studio 2005\Templates\ProjectTemplates\Visual C# directory and the AjaxControlExtenderProjectCS.zip file exists within the directory. I am assuming that this should then show up under the 'my templates' section when I click to the web project.

I have checked the options in VS 2005 and for the "Visual Studio user project templates location" it points to the above directory.

It seems like something is simply misconfigured within VS2005 unless there is something else I need to do with the zip file prior to getting this to work.

Thank you in advance.

Hi,

Your configurations are correct.

Please note that the template will be shown in "My Templates" when you select Visual C#, and not listed in any child categories.

Hope this helps.