Using RequiredFieldValidator with ModalPopupExtender

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Using RequiredFieldValidator with ModalPopupExtender

Shortcuts

Previous Next

Using RequiredFieldValidator with ModalPopupExtender

Last post 09-08-2008 10:18 PM by Vince Xu - MSFT. 8 replies.

Sort Posts:

Using RequiredFieldValidator with ModalPopupExtender

08-31-2008, 9:36 PM

Contact

681 point Member
rmdw
Member since 03-14-2005, 11:03 PM
Vancouver, BC, Canada
Posts 887

I've successfully used RequiredFieldValidator before and understand how it works. But now I'd like to use it with DetailsView inside of a Modal Popup dialog box.

So I have a DetailsView full of textboxes and then below that an OK button and a Cancel button.

When the user clicks on OK I want the RequiredFieldValidator to do its work. If it finds any empty fields then I want to prevent the modal dialog box from closing. I was loosely following this article but it didn't help: http://www.asp.net/Learn/data-access/tutorial-19-cs.aspx

Any ideas?

Robert

Robert Werner
Vancouver, BC
Technical Blog
Pocket Pollster

Re: Using RequiredFieldValidator with ModalPopupExtender

09-01-2008, 12:14 AM

Contact

1,708 point Participant
mvang
Member since 12-27-2007, 6:59 PM
Mid West
Posts 361

well, my method or approach to making a sure the ModalPopupExtender stays open if a requirement was not met is to show the MPE again. Not the best solution but when the user clicks the OK button I have it perform some code behind - as you can image, I check the requirements before processing anything and if the requirements have not been met, I show the MPE again and exit the sub.

"If you have knowledge, let others light their candles in it."
— Margaret Fuller

Re: Using RequiredFieldValidator with ModalPopupExtender

09-01-2008, 12:29 AM

Contact

681 point Member
rmdw
Member since 03-14-2005, 11:03 PM
Vancouver, BC, Canada
Posts 887

Hi There,

Yes, I'm doing the same thing. The user clicks on OK, server-side code is run and a test is performed. If it fails the test then the button event handler code is exited prematurely, an alert message is displayed, and the MPE dialog box is shown again.

It works, but it's very clumsy. I'd be willing to settle for it if the MPE dialog box didn't close until the processing was done and I could abort the closing of it.

In my case, I have a DetailsView with a number of textboxes inside it. I have simple Javascript that only enables the OK button when the first character is entered. What I'd REALLY like to do is only enable OK when 3 required textboxes have characters in them but I'm struggling to locate the textboxes with Javascript code. The problem is that these textboxes aren't instantiated until the DetailsView form is rendered, so the traditional way of referencing ASP.Net controls doesn't work.

Robert

Robert Werner
Vancouver, BC
Technical Blog
Pocket Pollster

Re: Using RequiredFieldValidator with ModalPopupExtender

09-02-2008, 9:39 AM

Contact

1,708 point Participant
mvang
Member since 12-27-2007, 6:59 PM
Mid West
Posts 361

Robert,

In one of my web pages where I have created dynamic textboxes, during the process of creation in Javascript, I went ahead and added each textbox's id in a global array and then later when I needed the textbox's id, I sorted through the array. However, when I first created the array, I did:

var myArray = new Array;

I randomly got an empty array so now I have it as:

var myArrary = [];

And I haven't ran into that issue yet. Smile

"If you have knowledge, let others light their candles in it."
— Margaret Fuller

Re: Using RequiredFieldValidator with ModalPopupExtender

09-03-2008, 2:39 AM

Contact

63,620 point All-Star
Vince Xu - MSFT
Member since 11-28-2007, 4:50 AM
Posts 5,441

Hi,

You can define the JavaScript code to hide the ModalPopup before the server code exectued.

Please try the below sample.

<head runat="server">
    <title>Untitled Page</title>
    <style>
    .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;

    }

    .modalPopup {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
    }
    </style>
</head>
<script type="text/javascript">
function doclient()
{
    var Is_Valid=$get('<%=RequiredFieldValidator1.ClientID %>').isvalid;
    if(Is_Valid)
    {
        $find('modalbehavior').hide();
        return true;
    }

    return false;
    
}

</script>
<body>
    <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />  
        <asp:Button ID="btnHidden" runat="server" Text="Button" />
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="CancelButton"
            PopupControlID="Panel1" TargetControlID="btnHidden" BehaviorID="modalbehavior"
             BackgroundCssClass="modalBackground"  DropShadow="True" />
             
        <asp:Panel ID="Panel1" runat="server"  Style="display: none" CssClass="modalPopup" Height="200px"  Width="400px" HorizontalAlign="Center">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
                    <asp:Button ID="OkButton" runat="server" Text="OK" OnClientClick="doclient()" OnClick="OkButton_Click" />
           
                </ContentTemplate>         
            </asp:UpdatePanel>
              <asp:Button ID="CancelButton" runat="server" Text="Cancel" />    
        </asp:Panel>
             
    </form>
</body>

    protected void OkButton_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000);

}

Vince Xu
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Re: Using RequiredFieldValidator with ModalPopupExtender

09-03-2008, 3:16 PM

Contact

681 point Member
rmdw
Member since 03-14-2005, 11:03 PM
Vancouver, BC, Canada
Posts 887

Vince,

Your approach seemed good but I did a little test first:

    function CheckValidation()
    {
      debugger
      return false;
    }

First, I wired it up for the OK button. The function never fired. To be sure I had wired it up correctly I also tied it in with the Cancel button. It did fire for the latter. Here's my HTML layout code:

            <asp:Button ID="buttonOKDetails" runat="server" Width="70px" Text="OK" OnClick="ButtonOkDetails_Click" OnClientClick="CheckValidation()" Enabled="false" />
               
            <asp:Button ID="buttonCancelDetails" runat="server" Width="70px" Text="Cancel" OnClientClick="CheckValidation()" />

Am I doing something wrong with the wiring or does the OK button on an MPE dialog box not allow Javascript attached to it?

Robert

Robert Werner
Vancouver, BC
Technical Blog
Pocket Pollster

Re: Using RequiredFieldValidator with ModalPopupExtender

09-03-2008, 10:50 PM

Contact

Answer

63,620 point All-Star
Vince Xu - MSFT
Member since 11-28-2007, 4:50 AM
Posts 5,441

Hi,

Do you mean you define the OnClick and OnClientClick to the Ok Button, but the OnClientClick event doesn't work? Please do not define the OkControlID property. If the ModalPopup doesn't know what is the buttonOKDetails button, the OK Button will be running correctly and do the ClientClick first.

For the Cancel Button, please do not define it CancelControlID to CancelButton either.

If you defined CancelControlID, you can use OnCancelScript to define the JavaScript code when you click the cancel button.

If you want to run debugger in JavaScipt, please uncheck the option "disable script debugging" in IE. And run again. It will be going to the debugger mode.

Vince Xu
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Re: Using RequiredFieldValidator with ModalPopupExtender

09-08-2008, 6:33 PM

Contact

681 point Member
rmdw
Member since 03-14-2005, 11:03 PM
Vancouver, BC, Canada
Posts 887

Hi Vince,

Thanks for the suggestions. I just tried as you said but the client script still would not fire. Here's the pertinent code:

        <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
          TargetControlID="linkButtonDummy1"
          PopupControlID="panelDetails"
          BackgroundCssClass="modalBackground"
          DropShadow="true"
        />

<asp:Button ID="buttonOKDetails" runat="server" Width="70px" Text="OK" OnClick="ButtonOkDetails_Click" Enabled="false" OnClientClick="CheckValidation()" />

    function CheckValidation()
    {
      debugger
      return false;
    }

When I ran it, CheckValidation() did NOT fire. It just went right to the server-side code.

Robert

Robert Werner
Vancouver, BC
Technical Blog
Pocket Pollster

Re: Using RequiredFieldValidator with ModalPopupExtender

09-08-2008, 10:18 PM

Contact

63,620 point All-Star
Vince Xu - MSFT
Member since 11-28-2007, 4:50 AM
Posts 5,441

Hi,

Firstly, please use OnClientClick="return CheckValidation()" instead of OnClientClick="CheckValidation()".

<asp:Button ID="buttonOKDetails" runat="server" Width="70px" Text="OK" OnClick="ButtonOkDetails_Click" Enabled="false" OnClientClick="return CheckValidation()" />

    function CheckValidation()
    {
      debugger;
      return false;
    }

If it returns false, the server click will not work.

You can use alert() to check if the checkValidation is running.

    function CheckValidation()
    {
      alert('this's running');
      return false;
    }

If the alert window is popped up, it means the client event is running. If you didn't turn on the debugger mode, debugger won't be worked.

Vince Xu
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Page 1 of 1 (9 items)

RSS Available