.Net 2.0 / AJAX / Dynamically adding controls to the page

R

Rob Meade

Hi all,

I played with my first bit of AJAX the other week and was pleasantly
surprised that I achieved my goal..now I'd like to try something else..

Question...

If I have an updatePanel, and lets say I have a button as a trigger which
runs a function in my code behind to add a textbox to the updatePanel, when
the form is submitted does this control actually "exist" as such on the
page? ie, will I be able to talk to it in .net via myTextBox.Text etc or
will I have to rely on Response.Form("myTextBox") to pick up the values...

Has anyone done something similar?

I basically need the user to be able to add resources to their profile, each
resource has an access level and a parameter that they will select, so
instead of a text box I would have two drop down menus populated with items,
I just wondered how you then interact with them once posted...

Any thoughts/help appreciated..

Regards

Rob
 
G

Guest

Hi Rob,

It's very similar situation to dynamic controls. Dynamic controls are not
part of compiled control tree, so every time you make a request and postback
you have to recreate them yourself. Of course you can declare variables
within page class to access controls later on in page lifecycle:

public partial class MyPage : System.Web.UI.Page
{

private TextBox dynamicTextBox;
protected void Page_Init(object sender, EventArgs e)#
{
dynamicTextBox = new TextBox();
dynamicTextBox.ID = “dynamicTxtâ€;
myupdatePanel.Controls.Add(dynamicTextBox);
}


protected void myButton_Click(object sender, EventArgs e)
{
string text = this. dynamicTextBox;
// do something with text
}

I also reckon it should work with AJAX update panel because it’s simply
makes post request with all forms including viewstate related hidden fields.
It definitely would not work with get asynchronous requests (see AJAX methods
marked with WebMethod() attribute) as AJAX supports them as well.
 
R

Rob Meade

...
It's very similar situation to dynamic controls. Dynamic controls are not
part of compiled control tree, so every time you make a request and
postback
you have to recreate them yourself.

Hi Milosz,

Thats kinda what I was guessing, bit of a pain but I guess I can work around
that.

One more thing - as I mentioned the users can select additional resources to
add to the profile, this is a long list, so I'm probably going to have to
fire it up in a popup window, are you aware of any way to use AJAZ/.Net so
that my popup can talk to the updatePanel on the parent page? I'm probably
trying to run before I can walk abit here, so please excuse my ignorance,
but what I would want to do I guess is launch a popup from a link or button,
this hits the database, lists all my resources as links with a querystring
parameter of the resource id. Once clicked I would like this to then act as
the "trigger" on the parent page using the parameter from the link to run
code to add the control the parent page..

Any thoughts?

Part of me is thinking "Rob, thats such a stupid question" but obviously I
can do this with a normal postback, but I dont really want the parent page
to reload, and I dont really want to have to write a load of code that
checks to see if the parent page is just loading, or loading as a result of
the child popup click event.

Any help appreciated.

Regards

Rob
 
G

Guest

Hi Rob,

Of course it is possible. I prepared a simple exmaple to show you which way
to go. Please note, I used AJAX predecessor ATLAS which should (in this case)
be fine. Example consists of two pages - main where you click to select
employees from the list located in a popup window, second page is just a
mentioned popup. In order to post the code in two pieces, i used script runat
server, but ideally you could move it to code behind.

-- begin RobsmainPage.aspx --

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="RobsMainPage.aspx.cs" Inherits="RobsMainPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager" EnablePartialRendering="True"
runat="server" />
<atlas:UpdatePanel ID="UpdatePanel" RenderMode="Block" runat="server"
Mode="Always">
<ContentTemplate>
<asp:placeHolder runat="server" ID="container" />
<asp:Button runat="server" ID="btnRefresh" Width="0" Height="0"
OnClick="btnRefresh_Click" />
<asp:HiddenField runat="server" ID="selectedEmployeeId" />
</ContentTemplate>
</atlas:UpdatePanel>
<asp:Button runat="server" ID="btnSelect" Text="Select Employee to
Update..." OnClientClick="SelectEmployee(); return false;" />
<asp:Button runat="server" ID="btnSubmit" Text="Submit Selection"
OnClick="btnSubmit_Click" />

<script type="text/javascript">
//<!--

function EployeeSelected(id)
{

var hidden = $('<%= selectedEmployeeId.ClientID %>');
if (hidden)
hidden.value = id;

var btn = $('<%= btnRefresh.ClientID %>');
if (btn)
{
btn.click();
}
}

function SelectEmployee()
{
var win = window.open('RobsPopupPage.aspx', 'RobsPopupPage',
'width=450,height=350');
if (!win)
{
alert('Disable popup blocker please!');
}
}

// -->
</script>

<script runat="server">


protected void Page_Load(object sender, EventArgs e)
{
RecereateList();
}
protected void btnRefresh_Click(object sender, EventArgs e)
{
int id;
if (int.TryParse(selectedEmployeeId.Value, out id))
{
SelectedEmployeeIds.Add(id);
AddEmployeeToList(id);
}
}
private void AddEmployeeToList(int id)
{
Label label = new Label();
label.Text = "Employee selected with id = " + id.ToString();
label.Style.Add("display", "block");

container.Controls.Add(label);
}
private void RecereateList()
{
foreach (int id in SelectedEmployeeIds)
{
AddEmployeeToList(id);
}
}
private ArrayList SelectedEmployeeIds
{
get
{
ArrayList value = (ArrayList)ViewState["SelectedEmployeeIds"];
if (value == null)
{
value = new ArrayList();
ViewState["SelectedEmployeeIds"] = value;
}
return value;
}
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
// do something with selected employee ids:

foreach (int id in SelectedEmployeeIds)
{
// whatever
}
}
</script>

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


-- end RobsMainPage.aspx --

-- begin RobsPopupPage.aspx --


<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="RobsPopupPage.aspx.cs" Inherits="RobsPopupPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>

<script type="text/javascript">
//<!--
function PerformSelect(id)
{
if (window.opener)
{
if (window.opener.EployeeSelected)
window.opener.EployeeSelected(id);
window.close();
}
}
//-->
</script>

<script runat="server">




protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
employees.DataSource = GetEmployees();
employees.DataBind();
}
}

public System.Data.DataTable GetEmployees()
{
System.Data.DataTable table =
new System.Data.DataTable();
System.Data.DataRow row = null;

table.Columns.Add("EmployeeId", typeof(int));
table.Columns.Add("EmployeeName", typeof(string));
table.Columns.Add("EmployeeRole", typeof(string));

for (int i = 0; i < 10; i++)
{
row = table.NewRow();
row[0] = i;
row[1] = "employee " + i.ToString();
row[2] = (i % 3 == 0) ? "Manager" : "Clerk";

table.Rows.Add(row);
}

return table;
}

</script>

<asp:GridView runat="server" ID="employees" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
Name
</HeaderTemplate>
<ItemTemplate>
<a href="javascript:performSelect('<%# Eval("EmployeeId") %>');"><%#
Eval("EmployeeName")%></a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Eployee's Role" DataField="EmployeeRole" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

-- end RobsPopupPage.aspx --

Hope this helps

Milosz
 
R

Rob Meade

...
Of course it is possible. I prepared a simple exmaple to show you which
way to go.

[snip]

WOW! Hi Milosz,

Thank you so much for spending your time doing that for me, I will be trying
it out in just a sec - I think the clue that I needed was the hidden boxes
on the parent page, and then the javascript functions to pass the value
around.

Thank you very much,

Regards

Rob
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top