Show Modal Dialog/Confirmation Box Based on User Input in Code Behind/ASP.net

Question

I have a grid view consisting of a text box and drop down for every row in the grid view. I want a confirmation dialog to show when the user enters a value in the text box if it does not match the value of a corresponding label for each row in which this is true.

Front End

<asp:TemplateField HeaderText="Payment Amount">
    <ItemTemplate>
        <asp:Label ID="lblSuggestedAmount" runat="server"></asp:Label>
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Actual Payment Amount">
    <ItemTemplate>
        <asp:TextBox ID="txtbxActualAmount" Visible="true" runat="server"></asp:TextBox>
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="For Rental Month">
    <ItemTemplate>
        <asp:DropDownList ID="ddlPaymentMonth" Visible="true" runat="server"></asp:DropDownList>
    </ItemTemplate>
</asp:TemplateField>

What I found to work on my local machine when debugging was System.Windows.Forms.MessageBox.Show() but when I upload my project to my IIS the prompt does not appear.

Code Behind

TextBox actualAmount = (TextBox)gvPayments.Rows[i].FindControl("txtbxActualAmount");
Label suggestedAmount = (Label)gvPayments.Rows[i].FindControl("lblSuggestedAmount");
if (Convert.ToDouble(actualAmount.Text) != Convert.ToDouble(suggestedAmount.Text)) {
    System.Windows.Forms.DialogResult dr = System.Windows.Forms.MessageBox.Show("Some payments have actual payment amounts greater than the suggested amount. Is this correct?", "Warning", 
        System.Windows.Forms.MessageBoxButtons.YesNo, 
        System.Windows.Forms.MessageBoxIcon.Warning,
        System.Windows.Forms.MessageBoxDefaultButton.Button1,
        System.Windows.Forms.MessageBoxOptions.ServiceNotification);
    if (dr == System.Windows.Forms.DialogResult.No) {
        return;
    } else {
        actualAmount.BackColor = Color.White;
    }
}

I understand that because the dialog shows up on client side, where the code is run that the dialog is showing up on the server, and not on the clients browser.

From reading other similar questions I also understand I need to achieve this with JavaScript.
I imagine I will attach an OnClick event to my update/submit button but will the javascript be able to cycle row through row of my gridview, compare the Label.text and the TextBox.Text and set that text boxes background color to yellow and display my dialog? And then will it know to continue with the rest of the code-behind execution once the user has clicked ok?

Answer 1

First of all, you can't use Windows.Forms on asp.net application, remember that the UI is running in the browser of the client computer, the code behind that you write is running on the server side, in different computer...

You have 2 options to achieve the goal:

1. Short way, bad performance: Add javascript function to the end of the response, the javascript will show confirmation box in the browser, but all the logic still written in code behind, this is done by calling to ClientScript.RegisterClientScriptBlock

   RegisterClientScriptBlock(this.GetType(),
       "confirmmsg",
       "<script> if(Confirm('do you want to proceed')) forms.submit();</script>");
   

2. Long and best way, javascript & jquery can easily implement the code you need, for example:

   function checkText(txt) {
       var allLables = $("[id*='lblSuggestedAmount']"); //get all the labels in the  grid
       for (var i = 0; i < allLables.length; i++) {
           if (allLabels[i].html() == txt) { 
               txt.style.bakground-color = "yellow";
               if(Confirm("This is message to confirm")) {
                   form1.submit() // what ever you need
               }
           }
       }
   }
   

Answer 2

Firstly in the front end I did add some JavaScript/jQuery that the other answer provided.

Front End

<script>
// not sure exactly how much of this I need but here goes!
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
confirm_value.value = "no";
$(document).ready(function () {
    confirm_value.type = "hidden";
    confirm_value.name = "confirm_value";
    confirm_value.value = "no";
});
function confirmPayment() {
    var allLabels = $("[id*='lblSuggestedAmount']");
    var allTextBoxes = $("[id*='txtbxActualAmount']");
    var failFlag = false;
    for (var i = 0; i < allLabels.length; i++) {
        if (allTextBoxes[i].value != "" && parseFloat(allLabels[i].innerText) != parseFloat(allTextBoxes[i].value)) {
            failFlag = true;
        }
    }
    if (failFlag) {
        if (confirm("Some payments have actual payment amounts that are different from the suggested amount. If this is correct, click Ok, if not click Cancel.")) {
            confirm_value.value = "yes";
            document.forms[0].appendChild(confirm_value);
        } else {
            confirm_value.value = "no";
            document.forms[0].appendChild(confirm_value);
        }
    }
}
</script>

and in my asp:Button that also fires the code-behind

<asp:Button ID="btnUpdateClient" Text="Update Client" OnClientClick="confirmPayment()" OnClick="btnUpdateClientTable_Click" Visible="true" runat="server" />

Back End

In my btnUpdateClientTable_Click() method

I needed

string confirm = Request.Form["confirm_value"];
bool paymentErrorFlag = false;

to get the response to the confirm dialog. This would house a "yes" or "no" response. The flag would get set to true whenever a value was input in the text box but a value was not selected from my drop down list.

I would cycle through every row in the grid view and using a combination of the paymentErrorFlag and checks on .Text == string.Empty and .SelectedIndex == 0 to break the function and return; without updating the database.

Essentially the key was the Request.Form[] returning the value of the selection in the confirmation dialog.