ASP .NET 2.0 and Javascript / JS - Select Options disappear

  • Thread starter Thread starter Richard
  • Start date Start date
R

Richard

Hi,

I have an ASP .NET page with codebehind in a vb file.
The page has a dropdown control, and a JS function which used HTTP XML
Request to get the data from the database, and populate the dropdown.
Actually, the JS creates the OPTION elements using th retrieved db data, and
adds them to the SELECT element using DOM objects.

The dropdown works ok, and the items are visible, but when the user clicks
"Save" button, and the page posts back to the server, in the VB codebehind,
the selected value in the dropdown is empty, and the items collection is
empty.

Why is this? How can I fix this behavior?

Thanks in advance,

Richard
 
Hi Richard,

The problem is that ASP maintains state by using ViewState. When you
post back a page, controls are first instantiated, then initialized
with values from ViewState, and at the very end, the SaveViewState
event is called. The next time you post back, the values that were
saved in the SaveViewState event will again be used to repopulate the
controls on Initialization.

When you modify controls like Dropdowns through Javascript (modify as
in add members, not changing the selected index), the server cannot
possibly know about this.

In your case, I would suggest you use the internal __doPostBack
Javscript function. You can check out the source of any aspx page in
your browser, and will find it there:

function __doPostBack(eventTarget, eventArgument) {
....
}

You also need your page to implement IPostBackEventHandler to handle
the async postback. An example follows:

aspx page:

<%@ Page Language="C#" AutoEventWireup="True"
CodeBehind="Default.aspx.cs"
Inherits="ImplementIPostBackEventHandler._Default"
EnableViewState="false" %>

<!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>
<script>
function populateListBox() {
var lst = document.getElementById('theListBox');
var postBackArg = new Array()
for(var i = 1;i <= 3;i++) {
var newOptionName = "element_" + i;
var newOptionValue = i;
var newOption = new Option(newOptionName,
newOptionValue);
lst.options.add(newOption);
postBackArg[i-1] = newOptionName + "," +
newOptionValue;
}
__doPostBack('<%= this.ClientID %>',
postBackArg.join(";"));
}
</script>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="theListBox" runat="server" />
<input id="btnTriggerJs" type="button" value="btnTriggerJs"
OnClick="populateListBox()" />
<asp:Button ID="btnPostBack" OnClick="btnPostBack_Click"
Text="btnPostBack" runat="server" />
</div>
</form>
</body>
</html>


codebehind file:
using System;
using System.Collections;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ImplementIPostBackEventHandler
{
public partial class _Default : System.Web.UI.Page,
IPostBackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
}

protected void btnPostBack_Click(object sender, EventArgs e)
{
foreach(ListItem li in theListBox.Items)
{
/* ... */
}
}

public void RaisePostBackEvent(string eventArg)
{
string[] newElements = eventArg.Split(';');
foreach(string newElement in newElements)
{
string[] newElementArray = newElement.Split(',');
theListBox.Items.Add(new ListItem(newElementArray[0],
newElementArray[1]));
}
}
}
}

================
Regards,
Steve
www.stkomp.com
 
Thanks Steve, great explanation.
It'd be nice in JS to have a function to add objects to the viewstate ;-)

As I'm using vb in the codebehind, is it necessary to have in the code
behind page in its own namespace with the following code you posted?

namespace ImplementIPostBackEventHandler
{
....
}

Thanks in advance,

Richard

[email protected] said:
Hi Richard,

The problem is that ASP maintains state by using ViewState. When you
post back a page, controls are first instantiated, then initialized
with values from ViewState, and at the very end, the SaveViewState
event is called. The next time you post back, the values that were
saved in the SaveViewState event will again be used to repopulate the
controls on Initialization.

When you modify controls like Dropdowns through Javascript (modify as
in add members, not changing the selected index), the server cannot
possibly know about this.

In your case, I would suggest you use the internal __doPostBack
Javscript function. You can check out the source of any aspx page in
your browser, and will find it there:

function __doPostBack(eventTarget, eventArgument) {
....
}

You also need your page to implement IPostBackEventHandler to handle
the async postback. An example follows:

aspx page:

<%@ Page Language="C#" AutoEventWireup="True"
CodeBehind="Default.aspx.cs"
Inherits="ImplementIPostBackEventHandler._Default"
EnableViewState="false" %>

<!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>
<script>
function populateListBox() {
var lst = document.getElementById('theListBox');
var postBackArg = new Array()
for(var i = 1;i <= 3;i++) {
var newOptionName = "element_" + i;
var newOptionValue = i;
var newOption = new Option(newOptionName,
newOptionValue);
lst.options.add(newOption);
postBackArg[i-1] = newOptionName + "," +
newOptionValue;
}
__doPostBack('<%= this.ClientID %>',
postBackArg.join(";"));
}
</script>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="theListBox" runat="server" />
<input id="btnTriggerJs" type="button" value="btnTriggerJs"
OnClick="populateListBox()" />
<asp:Button ID="btnPostBack" OnClick="btnPostBack_Click"
Text="btnPostBack" runat="server" />
</div>
</form>
</body>
</html>


codebehind file:
using System;
using System.Collections;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ImplementIPostBackEventHandler
{
public partial class _Default : System.Web.UI.Page,
IPostBackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
}

protected void btnPostBack_Click(object sender, EventArgs e)
{
foreach(ListItem li in theListBox.Items)
{
/* ... */
}
}

public void RaisePostBackEvent(string eventArg)
{
string[] newElements = eventArg.Split(';');
foreach(string newElement in newElements)
{
string[] newElementArray = newElement.Split(',');
theListBox.Items.Add(new ListItem(newElementArray[0],
newElementArray[1]));
}
}
}
}

================
Regards,
Steve
www.stkomp.com
Hi,

I have an ASP .NET page with codebehind in a vb file.
The page has a dropdown control, and a JS function which used HTTP XML
Request to get the data from the database, and populate the dropdown.
Actually, the JS creates the OPTION elements using th retrieved db data, and
adds them to the SELECT element using DOM objects.

The dropdown works ok, and the items are visible, but when the user clicks
"Save" button, and the page posts back to the server, in the VB codebehind,
the selected value in the dropdown is empty, and the items collection is
empty.

Why is this? How can I fix this behavior?

Thanks in advance,

Richard
Click to expand...
Click to expand...
 
Hi Richard,

No, the namespace was automatically generated by VS. No need for it.
Just make sure that the Inherits directive in the aspx file will not
have a namespace either (eg, Inherits="_Default" instead of
Inherits="ImplementIPostBackEventHandler._Default")

===========
Regards,
Steve
www.stkomp.com
Thanks Steve, great explanation.
It'd be nice in JS to have a function to add objects to the viewstate ;-)

As I'm using vb in the codebehind, is it necessary to have in the code
behind page in its own namespace with the following code you posted?

namespace ImplementIPostBackEventHandler
{
...
}

Thanks in advance,

Richard

[email protected] said:
Hi Richard,

The problem is that ASP maintains state by using ViewState. When you
post back a page, controls are first instantiated, then initialized
with values from ViewState, and at the very end, the SaveViewState
event is called. The next time you post back, the values that were
saved in the SaveViewState event will again be used to repopulate the
controls on Initialization.

When you modify controls like Dropdowns through Javascript (modify as
in add members, not changing the selected index), the server cannot
possibly know about this.

In your case, I would suggest you use the internal __doPostBack
Javscript function. You can check out the source of any aspx page in
your browser, and will find it there:

function __doPostBack(eventTarget, eventArgument) {
....
}

You also need your page to implement IPostBackEventHandler to handle
the async postback. An example follows:

aspx page:

<%@ Page Language="C#" AutoEventWireup="True"
CodeBehind="Default.aspx.cs"
Inherits="ImplementIPostBackEventHandler._Default"
EnableViewState="false" %>

<!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>
<script>
function populateListBox() {
var lst = document.getElementById('theListBox');
var postBackArg = new Array()
for(var i = 1;i <= 3;i++) {
var newOptionName = "element_" + i;
var newOptionValue = i;
var newOption = new Option(newOptionName,
newOptionValue);
lst.options.add(newOption);
postBackArg[i-1] = newOptionName + "," +
newOptionValue;
}
__doPostBack('<%= this.ClientID %>',
postBackArg.join(";"));
}
</script>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="theListBox" runat="server" />
<input id="btnTriggerJs" type="button" value="btnTriggerJs"
OnClick="populateListBox()" />
<asp:Button ID="btnPostBack" OnClick="btnPostBack_Click"
Text="btnPostBack" runat="server" />
</div>
</form>
</body>
</html>


codebehind file:
using System;
using System.Collections;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ImplementIPostBackEventHandler
{
public partial class _Default : System.Web.UI.Page,
IPostBackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
}

protected void btnPostBack_Click(object sender, EventArgs e)
{
foreach(ListItem li in theListBox.Items)
{
/* ... */
}
}

public void RaisePostBackEvent(string eventArg)
{
string[] newElements = eventArg.Split(';');
foreach(string newElement in newElements)
{
string[] newElementArray = newElement.Split(',');
theListBox.Items.Add(new ListItem(newElementArray[0],
newElementArray[1]));
}
}
}
}

================
Regards,
Steve
www.stkomp.com
Hi,

I have an ASP .NET page with codebehind in a vb file.
The page has a dropdown control, and a JS function which used HTTP XML
Request to get the data from the database, and populate the dropdown.
Actually, the JS creates the OPTION elements using th retrieved db data, and
adds them to the SELECT element using DOM objects.

The dropdown works ok, and the items are visible, but when the user clicks
"Save" button, and the page posts back to the server, in the VB codebehind,
the selected value in the dropdown is empty, and the items collection is
empty.

Why is this? How can I fix this behavior?

Thanks in advance,

Richard
Click to expand...
Click to expand...
Click to expand...
 
Hello,

Steve, I really appreciate your help with this, and I know this example is a
very sophisticated code.

Now, somehow sending data in strings around, seems like the only solution in
Web applications!??, but it doesn't seem like a very good practice.

1) A dropdown could have many items with fairly long descriptions. If the
resulting string overflows the string size, we'd end up with a truncated
dropdown or an invalid string that cannot be parsed back into a dropdown.

2) With a string, its's hard to store state like "disabled" and other
members of the dropdown.

Seriously , isn't there a "best practice" kindof way of doing this?

Thanks in advance,

Richard
=====
[email protected] said:
Hi Richard,

No, the namespace was automatically generated by VS. No need for it.
Just make sure that the Inherits directive in the aspx file will not
have a namespace either (eg, Inherits="_Default" instead of
Inherits="ImplementIPostBackEventHandler._Default")

===========
Regards,
Steve
www.stkomp.com
Thanks Steve, great explanation.
It'd be nice in JS to have a function to add objects to the viewstate ;-)

As I'm using vb in the codebehind, is it necessary to have in the code
behind page in its own namespace with the following code you posted?

namespace ImplementIPostBackEventHandler
{
...
}

Thanks in advance,

Richard

[email protected] said:
Hi Richard,

The problem is that ASP maintains state by using ViewState. When you
post back a page, controls are first instantiated, then initialized
with values from ViewState, and at the very end, the SaveViewState
event is called. The next time you post back, the values that were
saved in the SaveViewState event will again be used to repopulate the
controls on Initialization.

When you modify controls like Dropdowns through Javascript (modify as
in add members, not changing the selected index), the server cannot
possibly know about this.

In your case, I would suggest you use the internal __doPostBack
Javscript function. You can check out the source of any aspx page in
your browser, and will find it there:

function __doPostBack(eventTarget, eventArgument) {
....
}

You also need your page to implement IPostBackEventHandler to handle
the async postback. An example follows:

aspx page:

<%@ Page Language="C#" AutoEventWireup="True"
CodeBehind="Default.aspx.cs"
Inherits="ImplementIPostBackEventHandler._Default"
EnableViewState="false" %>

<!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>
<script>
function populateListBox() {
var lst = document.getElementById('theListBox');
var postBackArg = new Array()
for(var i = 1;i <= 3;i++) {
var newOptionName = "element_" + i;
var newOptionValue = i;
var newOption = new Option(newOptionName,
newOptionValue);
lst.options.add(newOption);
postBackArg[i-1] = newOptionName + "," +
newOptionValue;
}
__doPostBack('<%= this.ClientID %>',
postBackArg.join(";"));
}
</script>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="theListBox" runat="server" />
<input id="btnTriggerJs" type="button" value="btnTriggerJs"
OnClick="populateListBox()" />
<asp:Button ID="btnPostBack" OnClick="btnPostBack_Click"
Text="btnPostBack" runat="server" />
</div>
</form>
</body>
</html>


codebehind file:
using System;
using System.Collections;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ImplementIPostBackEventHandler
{
public partial class _Default : System.Web.UI.Page,
IPostBackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
}

protected void btnPostBack_Click(object sender, EventArgs e)
{
foreach(ListItem li in theListBox.Items)
{
/* ... */
}
}

public void RaisePostBackEvent(string eventArg)
{
string[] newElements = eventArg.Split(';');
foreach(string newElement in newElements)
{
string[] newElementArray = newElement.Split(',');
theListBox.Items.Add(new ListItem(newElementArray[0],
newElementArray[1]));
}
}
}
}

================
Regards,
Steve
www.stkomp.com

Richard wrote:
Hi,

I have an ASP .NET page with codebehind in a vb file.
The page has a dropdown control, and a JS function which used HTTP XML
Request to get the data from the database, and populate the dropdown.
Actually, the JS creates the OPTION elements using th retrieved db data, and
adds them to the SELECT element using DOM objects.

The dropdown works ok, and the items are visible, but when the user clicks
"Save" button, and the page posts back to the server, in the VB codebehind,
the selected value in the dropdown is empty, and the items collection is
empty.

Why is this? How can I fix this behavior?

Thanks in advance,

Richard
Click to expand...
Click to expand...
Click to expand...
 
Back
Top