|
Total Views :
143614 |
|
Adding to your Favorites....
|
|
|
 |
|
|
|
|
|
Introduction |
|
This article explains about the Asp.Net AjaxControlToolkit's ModalPopup with Postback and
Focus setting methodology. |
|
|
|
Description |
|
I have seen in many asp.net forums, the developers post lots of questions on Asp.net’s
AjaxControlToolkit's ModalPopup extender. Actually they want to do postback operations and
want to set focus on the controls placed in the ModalPopup window. So I think many
web developers who used AjaxControlToolkit will be very much pleased if someone address
this issue. May be Ajax Future Release might give the solution for this problem,
but what about the current developments which is already undergone in AjaxControlToolkit.
|
|
|
|
|
Guys, I found a trick to solve this issue. So I would like to share it with you
all, how I made the ModalPopup extender to postback and perform the code-behind
operation. Also how I set the focus to the TextBox control in ModalPopup. Then click
when you the OK button on the ModalPopup, it will postback.
To achieve this, in your MS Visual Studio, open a new Ajax Enabled
Website. Add
a Master Page and a Default Page. Set the MasterPageFile property of the Default
page to the point to the Master Page. To the Default.aspx page, add a Hyperlink
control, a Label and a Panel control. Inside the Panel, add a Textbox and two Buttons,
one to OK and another for Cancel. |
|
|
|
The actual flow is, when you click on the Hyperlink the ModalPopup has to open,
the focus should be on the Textbox. You have to type some text in the
Textbox, then
click on the OK button. The page will get postback and your typed text will appear
in the Label control on the main page. That’s it.
Now we will see how to do it. First set the TargetControlId of the ModalPopup extender
to the Hyperlink name. Then set the CancelControlID to the Cancel Button, OkControlID
to the OK Button and the PopupControlID to the Panel1 in your Page. Set the BackgroundCssClass
property
as to the following style class. |
|
|
.modalBackground
{
background-color:<Your Desired Color>;
filter:alpha(opacity=70);
opacity:0.7;
}
|
|
|
|
|
This style sheet class keeps the background effect dull. So now you can run your
application. When you click the HyperLink, the ModalPopup comes to action. Sure
it will impress you lot. No postback and no focus on your Textbox, only cancel button
will function. Now we can see how to set focus on the Textbox. |
|
|
<script>
var clientid;
function fnSetFocus(txtClientId)
{
clientid=txtClientId;
setTimeout("fnFocus()",1000);
}
function fnFocus()
{
eval("document.getElementById('"+clientid+"').focus()");
}
</script>
|
|
|
|
On your aspx page, copy and paste the above two javascript functions. As we are
using the MasterPage, the client id of the TextBox will be changed. So the function
fnSetFocus(txtClientId) is used to the assign the ClientId of the Textbox to a local
variable. Then the setTimeout calls another function fnFocus(). This function will
be called exactly after 1 second, that is after the ModalPopup gets popped up, then
this function is responsible to set the focus on the Textbox. And in your code behind's
page load event, you have to add a line of code as follows.
|
|
HyperLink1.Attributes.Add("onclick", "fnSetFocus('"+TextBox1.ClientID+"');"); |
|
This line adds the javascript function on the client-side click of the HyperLink.
Now run your application, sure after the ModalPopup gets on screen, exactly after
a second you can see the focus on the Textbox. Even you can adjust the timings to
half second. Next, we will concentrate how to perform postback action when the OK
button on the ModalPopup is clicked.
First, add a javascript function to call the __dopostback event. The function must
look like the below.
|
function fnClickOK(sender, e) {
__doPostBack(sender,e);
}
|
|
Then in your code-behind, you must assign the OnClientClick property of the OK Button
on the page load event. The code is
|
Button2.OnClientClick = String.Format("fnClickOK('{0}','{1}')", Button2.UniqueID, "");
|
|
When the OK button is clicked, postback should perform some action. So let us assign
the Textbox value to the Label control. Add the following piece of code in your
OK Button's onclick event.
|
Label1.Text = "You Type "+TextBox1.Text;
|
|
That's it. Now run your application. When you click the Hyperlink, the ModalPopup
will appear. Next you can see the focus on the TextBox. Type your name in the Textbox
and press the OK Button. I'm sure your Name will be assigned in the Label. This
I tried based on my knowledge, and its a trick to bring focus and postback. If you
find better way to acheive this I welcome you to post that article here. Thanks.
Wanna to try my Sample,
click here. |
|
|
|
|
|
|
|
|
|
|