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

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

am 16.04.2008 00:30:00 von 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

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

am 16.04.2008 17:06:07 von wisccal

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" %>

www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Untitled Page






OnClick="populateListBox()" />
Text="btnPostBack" runat="server" />






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

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

am 16.04.2008 19:20:04 von Richard

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

"wisccal@googlemail.com" wrote:

> 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" %>
>
> > www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
>
>
> Untitled Page
>
>
>
>


>

>
> > OnClick="populateListBox()" />
> > Text="btnPostBack" runat="server" />
>

>

>
>
>
>
> 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
>

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

am 17.04.2008 08:41:58 von wisccal

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

Richard wrote:
> 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
>
> "wisccal@googlemail.com" wrote:
>
> > 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" %>
> >
> > > > www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> >
> >
> >
> > Untitled Page
> >
> >
> >
> >


> >

> >
> > > > OnClick="populateListBox()" />
> > > > Text="btnPostBack" runat="server" />
> >

> >

> >
> >
> >
> >
> > 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
> >

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

am 23.04.2008 19:37:12 von Richard

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
=====
"wisccal@googlemail.com" wrote:

> 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
>
> Richard wrote:
> > 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
> >
> > "wisccal@googlemail.com" wrote:
> >
> > > 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" %>
> > >
> > > > > > www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> > >
> > >
> > >
> > > Untitled Page
> > >
> > >
> > >
> > >


> > >

> > >
> > > > > > OnClick="populateListBox()" />
> > > > > > Text="btnPostBack" runat="server" />
> > >

> > >

> > >
> > >
> > >
> > >
> > > 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
> > >
>