PDA

Click to See Complete Forum and Search --> : How to generate dynamically Web Form Controls without doing Postbacks?

cesark
Mar 24th, 2004, 03:40 AM
I want to generate dynamically web form controls from my aspx VB.NET page without doing Postbacks. Which is the best way of doing this? Because if I generate the form controls from a JavaScript function these form controls are Html form controls, so it doesn’ t have the same functionality and advantages than ASP.NET form controls have. For instance I can’t do server validations, the state of the entered form data doesn’ t persist after Postbacks, I can’t reference them from an ASP.NET subroutines and do operations with them, etc…

Now I know how to generate the form controls without doing Postbacks, see the example below. (You can copy and paste this code and see the performance in the Web)

The performance: When you choose the option 7 from the dropdownlist, the web form control (in this case an input text) appears.

<%@ Page Language="VB" Debug="true" ContentType="text/html" ResponseEncoding="iso-8859-1"%>

<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

<form id="formUser" runat="server">
<table width="835" height="30">
<tr>
<td width="119">Select the Activity:</td>
<td width="281"><asp:dropdownlist id="activity" runat="server" onChange="checkAct();">

<asp:listitem Value="0" Text="(Select the Activity)"></asp:listitem>
<asp:listitem Value="1" Text="Activity 1"></asp:listitem>
<asp:listitem Value="2" Text="Activity 2"></asp:listitem>
<asp:listitem Value="3" Text="Activity 3"></asp:listitem>
<asp:listitem Value="4" Text="Activity 4"></asp:listitem>
<asp:listitem Value="5" Text="Activity 5"></asp:listitem>
<asp:listitem Value="6" Text="Activity 6"></asp:listitem>
<asp:listitem Value="7" Text="Activity 7"></asp:listitem>
</asp:dropdownlist></td>

<td width="155" id="title"></td>
<td width="260" id="inputField"></td>
</tr>

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

<script language="JavaScript">

function checkAct() {

var Activity = document.forms[0].activity.value
var myTD1 = document.getElementById("title");
var myTD2 = document.getElementById("inputField");



if (Activity == "7") {

myTD1.innerHTML = "Type the other Activity:";
myTD2.innerHTML = "<Input type='text' id='act'>";


} else {

myTD1.innerHTML = "";
myTD2.innerHTML = "";

}
}

checkAct();
</script>


How can I generate dynamically web form controls without doing Postbacks, and at the same time to be able to take advantage of all the functionality of the ASP.NET form controls?

Thank you,
Cesar
Cander
Mar 24th, 2004, 10:11 AM
You cant do that. To make a new server control requires server code which means you have to run back to the server to run the code.
cesark
Mar 24th, 2004, 10:59 AM
I have been searching information and I have seen that if I put (runat=’server’) into my html input text control I can talk with the server in order to do a server validation.

Check it yourself:

<%@ Page Language="VB" Debug="true" ContentType="text/html" ResponseEncoding="iso-8859-1"%>

<script language="VB" runat="server">
Sub Activ(sender As Object, value As ServerValidateEventArgs)

Try
Dim whichAct As Integer
whichAct = activity.SelectedItem.Value
Dim specify As String
specify = act.Value
If ((whichAct = 7) AND (specify = "")) Then
value.IsValid = False
Exit Sub
End If
Catch exc As Exception
End Try

value.IsValid = True

End Sub

</script>



<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onLoad="checkAct(document.formUser.activity)">

<form id="formUser" runat="server">
<table width="835" height="30">
<tr>
<td width="119">Select the Activity:</td>
<td width="281"><asp:dropdownlist id="activity" runat="server" onChange="checkAct(this);">

<asp:listitem Value="0" Text="(Select the Activity)"></asp:listitem>
<asp:listitem Value="1" Text="Activity 1"></asp:listitem>
<asp:listitem Value="2" Text="Activity 2"></asp:listitem>
<asp:listitem Value="3" Text="Activity 3"></asp:listitem>
<asp:listitem Value="4" Text="Activity 4"></asp:listitem>
<asp:listitem Value="5" Text="Activity 5"></asp:listitem>
<asp:listitem Value="6" Text="Activity 6"></asp:listitem>
<asp:listitem Value="7" Text="Activity 7"></asp:listitem>
</asp:dropdownlist></td>

<td width="155" id="title">Type de activity:</td>
<td width="260" id="inputField"><input type="text" id="act" runat="server"></td>
</tr>
<tr>
<td colspan="4"><asp:CustomValidator ID="CustomValidator1" runat="server" OnServerValidate="Activ" Display="Dynamic">You have to specify the activity.
</asp:CustomValidator></td>
</tr>

</table><br>
<asp:button ID="click" Text="Select 7 and Click me!" runat="server" />
</form>
</body>
</html>

<script language="JavaScript">

function checkAct(which){

if(which.value != 7){
document.getElementById("title").style.display = "none";
document.getElementById("inputField").style.display = "none";
}
else {
document.getElementById("title").style.display = "inline";
document.getElementById("inputField").style.display = "inline";
}
}
</script>


I suppose that I can do more things on the server side with Html controls. Isn’ t it? Because in System.Web.UI.HtmlControls Namespace there are a lot of things to do with server side language.
And why I would not have to use Html controls if I can talk with the server? If I use them I can generate them on client side, and this improves the performance speed. If I generate form controls from the server (doing postbacks) the performance speed decreases.

What do you think about that?

Thanks,
Cesar
nemaroller
Mar 24th, 2004, 09:40 PM
You CANNOT generate server controls from client-side. What you're doing is still running server-side, as the .Net framework is building the page to send down the line.

It is impossible... and that is a definite.. to generate ASP.NET server controls in the client's browser.

What you can do, as your 2nd example shows, is change the html of the page, or which element in the document is shown using Javascript, granting the user has Javascript enabled, and the browser DOM supports it.
cesark
Mar 25th, 2004, 04:43 AM
Well, I think that I understand what do you meant, 'I am not generating web form controls, in fact I am only hiding and showing them'. I knew that, but maybe I used a wrong word 'generate'. I haven' t said that I pretend to generate server controls from client side.
I only want to show and hide web form controls (in fact server controls) from a client side code when the user selects a specific options. This is to avoid the postbacks.

My doubt is if I have been using the best option-system-tool to achieve this.



What you can do, as your 2nd example shows, is change the html of the page, or which element in the document is shown using Javascript, granting the user has Javascript enabled, and the browser DOM supports it.

I don' t understand this advise, maybe you meant that I can generate only Html elements without any server side functionality, but maybe it is best to hide and show web server controls through the client side, as I have done it, Isn' t it?. In this way I can take advantage of the System.Web.UI.HtmlControls with server side functionality and to avoid the postbacks.



I have an idea, perhaps it is impossible but I' m only a beginner and I' m exploring all the possibilities :).
And if I create the server controls first in server side, I put them into a client side Array List, and then once loaded in the page I catch them from client side language and I put them wherever I want in the form? Thus, when the user selects an option that needs to fill other form fields, these form fields will appear without doing postbacks and they will have all the functionality of server controls, because they are generated on server and they will have the 'Id' in order to the server it recognizes them. Is this possible?


Thank you,
Cesar
nemaroller
Mar 25th, 2004, 04:09 PM
You can only generate html syntax like <a> <html> <br> on the clientside using Javascript.

System.Web.HtmlControls is a .Net class that is executed server side when the page is being built, BEFORE, it is sent to the client.

When you create a HTMLCONTROL.HTMLINPUT for example, you are calling a .Net class when the server is building the page, and the class will write the html tag <input="text"> when the .Net framework tells it to render (which happens before the page is sent to the client). The class just makes it easy to change properties at design time or render time, instead of writing out the entire html tag manually(it writes the html for you when the page is rendered, before it is sent to the client browser).

Understand, that nothing in the .Net framework is understandable by the client browser. Internet Explorer or Mozilla or Netscape do not understand .Net syntax. They only understand html tags.