creating modal popup to using validate process on server to update message to user

Question

Hello,

I've been tasked with adding a validation process to check what users enter on our site.

The current site that this will be a part of has master pages and web content pages.

On a web content page, I wanted to create a modal popup that will have a multiline texted box where the user can enter how they want to subset some data.
I need to take what they write and send it to the server and validate it there and then return a message to the modal popup without refreshing the original page.

If the syntax is invalid then the "OK" button will be disabled. The user can still click on "Cancel" and none of the subsetting will apply. If the syntax is valid and then "OK" is enabled and they click "OK" then their subsetting will be used.

What is the best approach for this task, starting from scratch.

Thank you for any help you can give me.

Answer 1

For WebForms UpdatePanel is what you looking for, perhaps combined or not with Ajaxcontroltoolkit ModalPopUp.
Read docs and search for on web
system.web.ui.updatepanel
ModalPopup.aspx

Answer 2

Gee, I concur with the suggestion to setup a dialog box that CAN withstand post backs. And you CAN do this with a update panel.

You have to learn when to say "no", or find out a way to use a dialog (with up-date panel).

Popping a dialog in a update panel - even one that can survive post-backs is rather easy.

but, the requirement to keep the dialog open, without any post-backs? Ouch!! - difference between going to the hospital to ask for advice on how to put on a band-aid vs that of going up to the 5th floor, and getting a group of surgeons to do advanced brain surgery.

However, I am in a good mood - so lets code this up.

First up, we shall assume that you had/have an existing button that you click on - 100% plane jane asp.net button. When clicked on, it is to run your existing code.

but, we will now put BEFORE this button, that dialog, and the "ok" button logic.

Next up:

You have to decide on a dialog pop technology. There are 100's of them. One I used and like is the ajaxtoolkit dialog, but another really nice one is of course jQuery.UI.

for a long time, even older asp.net sites by default have jQuery, so it not all that bad and the end of the world to adopt and add jQuery.UI.

We shall thus use jQuery.UI for the dialog. (you have to install and add jQuery.UI to your project - nuget can do this for you).

so, we are going to pop a dialog. and in the dialog, I will have a text box (say some notes), and I will also have a check box on that dialog.

the user will thus have to check the box, and enter at least 3 lines of text. And this code + checking for the check box and the 3 lines of code will be server side code - but all will occur without a post-back.

If the 3 lines of text, and the check box are entered, then we are to run that original line of code.

And to be fair, I don't think killing the "ok" button, and leaving the user with just a cancel button is all that great of a UI.

MUCH better would be if the user hits ok, then we give message in the dialog - "not done yet, please enter some more data". That way they can fix their input, and then try ok again in that dialog.

Regardless, lets assume a existing plane jane asp.net button, and that code behind.

eg this:

Ok, so that looks like this:

And code behind for that button is whatever you had/have now.

So,:

    Protected Sub cmdRecords_Click(sender As Object, e As EventArgs) Handles cmdRecords.Click  
  
        Debug.Print("start of final record submission code")  
        ' your code follows  
  
    End Sub  
  

Ok, so now the dialog part. As noted, we will use jQuery.UI (since you no doubt already have jquery).

Ok, so this dialog system works by you laying out the dialog (to popup) in a div. We drop in our text box, and a check box. (and a label to display the error message if/when the "ok" button fails).

So, that looks like this:

So, now we add a client side click event to the button - and it will NOT now run code behind unless we let it!!!

That button becomes this:

So, that button will call our JavaScript code - that pops the dialog

that code is this:

So, that code will pop the dialog, and when you hit "ok" button, it calls some code behind (a web method - so no post-back).

And as above shows the ok button will call that code + routine to run the server side code.

that JavaScript code is this:

Our code behind is thus this:

 <WebMethod()>  
 Public Shared Function ConfirmInput(MyText As String, MyCheckBox As Boolean) As String  
    Dim MyLines() As String = Split(MyText, vbLf)  

    Dim strResult As String = ""  

    If MyLines.Length < 3 Then  
        strResult = "Please enter at least 3 lines of text"  
    End If  

    If Not MyCheckBox Then  
        strResult = "Please check the box to confirm"  
    End If  

    If strResult <> "" Then  
        Return strResult  
    Else  
        Return "ok"  
    End If  

End Function      

So, this now looks like this:

Now, in above, I did not enter 3 lines of text, so when we click ok, we get this:

So, the "ok" button is disabled (or hidden - don't matter). So at this point, the only option is to hit cancel.

However, if we do enter the required information (determined by that code behind on the server), then of course hitting ok will trigger the original button and code behind.

As noted, a whole lot less money, cost, and time could be saved here by changing the requirements just a wee bit..

Regards,
Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada

Answer 3

Hi @JERRY Warra ,
I have a thinking that you could use ajax to pass the value of the textbox to the server.And then you could check if the value is invalid. If it is invalid,you could set the attribute of the button "disable". Finally,return the result to the client and alert the message.

Best regards,
Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 4

I apologize for my delayed response. I was sent out of town the night after I posted this question and will be back tomorrow. I appreciate everyone's help and I will post what my results are as soon as I can.

Thank you