how to return value from popup table to the C# asp.net code

Question

how to return value from popup table to the C# asp.net code

VG 0

Hi,

On clicking a button on UI, we have to show a dialog or Popup Table on the center of the screen asking user to enter integer value of area(Mandatory) when one condition is met, then user clicks Ok(which has captureAreaVal() function in my script as onclick event) and we have to get that user entered value for assigning to some variable in Handle() method.

With code, I have button called 'Complete' on my UI and its onclick event is Done()

{

Handle(class);

ShowMessage("Class is saved");

}.

In the process we have

Private void Handle(MyClass class)

{

if(class.CrossSection.Elements.Any(element => element.SectionName == "Test1"))

            {

                lblHeader.Text = "Test Header";

                lblArea.Text = "Test label";

                ClientScript.RegisterStartupScript(this.GetType(), "ShowPopup", "showAreaPopup();", true); //at this point the popup table is not seen

                return; //debugger hits till here and skips or goes to last line of Handle method

            }
```int TestOneArea= hiddenarea.Value;

class.Details.Add(new Detail() {Name = "Test1Name", Value = TestOneArea});

if(class.CrossSection.Elements.Any(element => element.SectionName == "Test2" ))

{

   //similar code as above block to show popup if sectionName is Test2

}


When I'm debugging the code, the debugger after hitting last line handle() method, Loads my page with with message in ShowMessage() and after that shows the popup. 

function showAreaPopup() {

    var x = document.getElementById("idPopup");

    x.style.visibility = "visible";

}

    var areaVal = document.getElementById('<%=TxtboxArea.ClientID%>').value;

    if (areaVal && !isNaN(areaVal) && parseInt(areaVal) > 0) {

        document.getElementById('<%=hiddenArea.ClientID %>').value = areaVal;

        console.log("in captureareaval()", areaVal);


        

        return true;

    }

    if(areaVal == null || areaVal == '') {

        alert('Affected area is mandatory');

        return false;

    }

    if (isNaN(areaVal)) {

        alert('Please enter integer value for area affected');

        return false;

    }

}


Thank you

Lan Huang-MSFT 30,221 Reputation points Microsoft External Staff

2024-09-02T06:38:24.44+00:00
Hi @VG,Based on your description, I think you don't have to do everything in the Handle method.

You can get the value entered by the user in the Click event on the backend C# side (when the user clicks the Ok button) and then add the data.

For example:

<asp:Button ID="btnSave" runat="server" class="btn bg-primary" Text="Save" OnClientClick="captureAreaVal()" OnClick="Add" />

protected void Add(object sender, EventArgs e) { int TestOneArea = Convert.ToInt32(TxtboxArea.Text); //class.Details.Add(new Detail() { Name = "Test1Name", Value = TestOneArea}); ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Class is saved');", true); }
VG 0 Reputation points

2024-09-13T18:11:11.17+00:00

Just re explaining what is happening with my code is when I clicked on Complete, its checking if the element is either test1 or test2 (or both it can be), then it is displaying popup asking user integer input along with message from ShowMessage("Class is saved"); on the page.

What code i want is if element is test1, display popup asking user input and wait until the user gives the input and clicks OK button (<asp:Button CssClass="actionButtons" ID="btnOK" runat="server" Text="OK" OnClientClick="captureAreaVal();" />). If value is valid, save the Name and Value of details list to MyClass object, then execute the statement ShowMessage("Class is saved"); Similarly check for test2 element.

I'm struggling to fetch/save or post the area inputted for each element in the C# code.

Could you please help me by correcting or providing code to achieve this. Your prompt help is highly appreciated.

Thank you in advance
SurferOnWww 6,106 Reputation points

2024-09-14T00:34:54.0933333+00:00

Have you considered using the ModalPopup extender of ASP.NET Ajax Control Toolkit?

3 answers

Your answer

Lan Huang-MSFT 30,221 Reputation points Microsoft External Staff

2024-09-02T06:38:24.44+00:00

Hi @VG,Based on your description, I think you don't have to do everything in the Handle method.

You can get the value entered by the user in the Click event on the backend C# side (when the user clicks the Ok button) and then add the data.

For example:

<asp:Button ID="btnSave" runat="server" class="btn bg-primary" Text="Save" OnClientClick="captureAreaVal()" OnClick="Add" />

protected void Add(object sender, EventArgs e) { int TestOneArea = Convert.ToInt32(TxtboxArea.Text); //class.Details.Add(new Detail() { Name = "Test1Name", Value = TestOneArea}); ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Class is saved');", true); }
VG 0 Reputation points

2024-09-13T18:11:11.17+00:00

Just re explaining what is happening with my code is when I clicked on Complete, its checking if the element is either test1 or test2 (or both it can be), then it is displaying popup asking user integer input along with message from ShowMessage("Class is saved"); on the page.

What code i want is if element is test1, display popup asking user input and wait until the user gives the input and clicks OK button (<asp:Button CssClass="actionButtons" ID="btnOK" runat="server" Text="OK" OnClientClick="captureAreaVal();" />). If value is valid, save the Name and Value of details list to MyClass object, then execute the statement ShowMessage("Class is saved"); Similarly check for test2 element.

I'm struggling to fetch/save or post the area inputted for each element in the C# code.

Could you please help me by correcting or providing code to achieve this. Your prompt help is highly appreciated.

Thank you in advance
SurferOnWww 6,106 Reputation points

2024-09-14T00:34:54.0933333+00:00

Have you considered using the ModalPopup extender of ASP.NET Ajax Control Toolkit?

Answer 1

Hi @VG,

Could you please help me by correcting or providing code to achieve this. Your prompt help is highly appreciated.

I think you may not understand what I meant earlier.

You can click on Complete (Handle method) and it checks if the element is test1 or test2 and then gets the value of the input after clicking the OK button.

Below is the complete code of my test, you can refer to it.

All Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" />
    <script type="text/javascript">
        function showAreaPopup() {
            $("#idPopup").modal("show");
        }
        function captureAreaVal() {
            var areaVal = document.getElementById('<%=TxtboxArea.ClientID%>').value;
        if (areaVal && !isNaN(areaVal) && parseInt(areaVal) > 0) {
            document.getElementById('<%=hiddenArea.ClientID %>').value = areaVal;
                console.log("in captureareaval()", areaVal);
                return true;
            }
            if (areaVal == null || areaVal == '') {
                alert('Affected area is mandatory');
                return false;
            }
            if (isNaN(areaVal)) {
                alert('Please enter integer value for area affected');
                return false;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <center>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" OnClick="Handle" CssClass="btn btn-info btn-lg" />
        </center>
        <!-- Modal -->
        <div id="idPopup" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <label>Rating</label>
                        <asp:TextBox ID="TxtboxArea" class="form-control" runat="server"></asp:TextBox>
                        <asp:HiddenField ID="hiddenArea" runat="server" />
                        <asp:Label ID="lblMessage" Text="Please enter 100 only." runat="server" Visible="false" ForeColor="Red" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                     
                        <asp:Button CssClass="actionButtons" ID="btnOK" runat="server" Text="OK" OnClientClick="captureAreaVal();" OnClick="Add" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

protected void Handle(object sender, EventArgs e)
{
    if (TextBox1.Text == "test1")
    {
        ClientScript.RegisterStartupScript(this.GetType(), "ShowPopup", "showAreaPopup();", true); //at this point the popup table is not seen
    }
}
protected void Add(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(TxtboxArea.Text))
    {
        int TestOneArea = Convert.ToInt32(TxtboxArea.Text);             
        //add data
        //class.Details.Add(new Detail() { Name = "Test1Name", Value = TestOneArea});
        ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Class is saved');", true);
    }
}

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
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

VG 0 Reputation points

2024-09-19T12:57:17.04+00:00

The debugger checks if the Class element is equal to test1 and registers the script for showing Popup and shows the popup after the page is rendered using my code.

I want to show popup table as soon as the condition is met and stop execution until user enters some integer in the Popup and continue remaining below lines of code say checking line if Class element is equal to test2 and other piece of code. Hope you have understood my requirement better now. Could you please kindly share your thoughts or code here if its possible.

Thank you
Lan Huang-MSFT 30,221 Reputation points Microsoft External Staff

2024-09-20T02:31:15.5+00:00

Hi @VG,

Hope you have understood my requirement better now.

I think I have tried my best to understand your needs. But you don't seem to understand the solution I provided. You can also check out the explanations of other community members.

Your original question was how to get the value of the popup table back to C#, obviously you need to get it in the click event of the OK button.

I want to show popup table as soon as the condition is met and stop execution until user enters some integer in the Popup and continue remaining below lines of code say checking line if Class element is equal to test2 and other piece of code.

First, you can make a conditional judgment in the Handle method to determine whether the Class element is equal to test1 or test2. If the condition is met, a pop-up window will appear.

Then when the popup box appears, enter some integer and click the ok button, you can get the entered value from c# and then save it.

Answer 2

On clicking a button on UI, ...

I guess that the "clicking a button on UI" results in postback to the server, the Handle method and all the other methods are invoked at the server side, resultant html source including JavaScript method showAreaPopup() is sent to the browser after completion of all works at server side, and the JavaScript method showAreaPopup() shows the popup on the browser.

Therefore, your requirement below cannot be realized:

I want to display the popup table to ask user input, when the debugger before hitting ShowMessage() function.

Please consider using the ModalPopup extender of ASP.NET Ajax Control Toolkit. It can be shown by the client side script. Demo is given in the following page:

ModalPopup Demonstration

Answer 3

Bruce (SqlWork.com) 85,276

The server code is just producing html that will be sent to the browser. ClientScript.RegisterStartupScript() just adds JavaScript to a list that will be included in the produced html during on-render. the popup will not appear until the html is sent to the browser, while which is after the server code completes.

you can break your server code into two parts requests. One that displays the popup. On postback of the popup, it performs the rest of code. You could also use ajax from the popup.

0 comments