User Interface Question

[Phillip N Rounds]

I have a webform ( ASP.NET 1.1, CodeBehinde = C#). The user selects an
address item from a dropdown list box. The details of the address then
populate appropriate text boxes. Each textbox has an OnTextChange(), which
serves several (necessary) purposes. One of these is that if there is a
change in the textbox entry, a button 'Save Address' appears.

When the user makes changes to only one textbox, the 'Save Address' button
appears after the postback, and that is usually sufficient for my users to
realize they have to click the button to actually save the changes. My
problems is when the user makes changes to two or more entries. After they
make the first change, and tab to the next field, the 'Save Address' button
appears, as it should. Most users then make the additional changes and
then, without explicitly exiting the last field, click on the 'Save Address'
button. Of course, this click serves only to invoke the OnTextChange()
method of the last textbox, it doesn't actually invoke the OnClick() event
of the 'Save Address' button. The result is that the data doesn't get saved
and my users are confused ( which means they call me, which is my real
problem here).

Is there a common workaround?

Thanks

Phil

 

[Kevin Spencer]

Use client-side JavaScript to make the button appear or disappear. This can
be done with a CSS style to make the server-side button invisible on the
client (use the CSS "visibility: hidden" style). The button will still be
there, but will be invisible (and therefore not able to be clicked). Use the
"onchange" client-side event of the text box to cause the button's style to
revert to "visibility: visible" without causing a PostBack. Then when the
"Save Address" button is clicked, the server-side "OnClick" event should
always fire for the button.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[Joey]

I would use client side javascript to gray out the button instead of
hiding it...that way users are aware that it is there (but they can't
click it yet)...

document.all["myButtonId"].disabled = true;

....and once you have all data...

document.all["myButtonId"].disabled = false;

You could also hide and show it with...

document.all["myButtonId"].style.display = 'none';

and

document.all["myButtonId"].style.display = 'inline';

I know that the " document.all["ControlId"].property " syntax works
with both IE and Firefox....but...I am kind of new to this javascript
stuff. So, if any of you seasoned veterans have any comments on how I
am doing it...please let us know.

 

[Phillip N Rounds]

Thanks for the responses.
I was trying to avoid client-side JavaScript for three reasons:
1: I just hate mixing Server Side & Client Side programming
2: Some of the OnTextChange() functions are intrinsically server side
issues, and
3: I don't know how to invoke both client-side and server-side actions
for a single event ( the textchange event )
I know you guys can't help me with 1 & 2, but maybe someone can point me to
the solution to #3

Thanks again for the responses, and in advance for the answer to #3

Phil

 

[Kevin Spencer]

Hi Phil,

1: I just hate mixing Server Side & Client Side programming

Well, you must hate ASP.Net, because that's how client-side events are
handled on the server!

When you create an event handler in ASP.Net, JavaScript is added to the
rendered HTML, which adds several hidden form fields, and some JavaScript
that populates these form fields when a client-side event occurs, and then
posts the form back to the server. Take a look at the HTML in your ASP.Net
Pages when viewed in a browser to confirm this.

The only difference in this case is that you don't want to post back to the
server, but handle the client-side "onchange" event on the client only.

2: Some of the OnTextChange() functions are intrinsically server side
issues, and

I don't understand what you mean by this.

3: I don't know how to invoke both client-side and server-side actions
for a single event ( the textchange event )

You don't. You will notice that when you assign a server-side handler for
the TextChange event, client-side JavaScript is added to handle the
client-side "onblur" event. This means that when the focus exits the text
box, a JavaScript event handler is called that sets a hidden form field, and
posts the form back to the server.

Instead, you initially set the button's CSS "visibility" style to "hidden",
handle the "onchange" event of the text box, and set the button's CSS
"visibility" style to "visible". This does not cause a PostBack, which is
not necessary until the user wants to submit the form.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[Joey]

You can add all of your javascript from the code-behind if you want.

examples...

this.Page.RegisterStartupScript("CheckText","<script
language='javascript'>function CheckText() { ...do something...
}</script>");

this.txtMyTextBox.Attributes.Add("onchange","javascript:CheckText()");