Show exception message in jQuery UI Modal Popup from code behind using jQuery in ASP.Net

Hi mvadukul,

I have created a sample which full fill your requirement you need to modify the code according to your need.

HTML

<div>
    <asp:TextBox ID="txtNumber" runat="server" />
    <asp:Button ID="btnValidate" Text="Validate" OnClick="Validate" runat="server" />
    <br />
    <div id="dialog" style="display: none">
        <asp:Label ID="lblErrorMessage" runat="server" />
    </div>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function ShowPopUp() {
            $("#dialog").dialog({
                title: "jQuery Exception Details",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                }
            });
        }        
    </script>
</div>

C#

protected void Validate(object sender, EventArgs e)
{
    try
    {
        int number = Convert.ToInt32(txtNumber.Text);
        lblErrorMessage.Text = number.ToString() + " is Valid Number.";
        ClientScript.RegisterStartupScript(this.GetType(), "Exception", "ShowPopUp()", true);
    }
    catch (Exception ex)
    {
        lblErrorMessage.Text = ex.Message.ToString();
        ClientScript.RegisterStartupScript(this.GetType(), "Exception", "ShowPopUp()", true);
    }
}

VB.Net

Protected Sub Validate(sender As Object, e As EventArgs)
    Try
        Dim number As Integer = Convert.ToInt32(txtNumber.Text)
        lblErrorMessage.Text = number.ToString() + " is Valid Number."
        ClientScript.RegisterStartupScript(Me.GetType(), "Exception", "ShowPopUp()", True)
    Catch ex As Exception
        lblErrorMessage.Text = ex.Message.ToString()
        ClientScript.RegisterStartupScript(Me.GetType(), "Exception", "ShowPopUp()", True)
    End Try
End Sub

ScreenShot

mvadukul says:

    <script type="text/javascript">     

        function ShowPopup(message, title) {         

            $("#dialog").html(message);

            $("#dialog").dialog({

                title: title,

                modal: true,

                buttons: {

                    Close: function () {

                        $(this).dialog('close');

                    }

                }

            });

        };

 

 

            function ShowPopupInfo() {

                $(function () {

                    //$("#dialog").html(message);

                    $("#dialog1").dialog({

                        title: "Applicant information",

                        height: 150,

                        width: 300,

                        buttons: {

                            Close: function () {

                                $(this).dialog('close');

                            }

                        },

                        modal: true

                    });

                });

            };

       

 

    </script>

 You are accessing the Dialog Div with #Value that means it will search for specific Div with ID "dialog" so now what happens is when you are having control in content page which gets rendered in web page with Id like "contentplaceholder_dialog" so now your script code doesnt get the "dialog" Id div anywhere in webpage so you need to search for the elements which contains Id Dialog like below

$("[id*=dialog]").dialog(); //will search for all elements which contains words dialog in Id.

so you above code will look like below

<script type="text/javascript">
    function ShowPopup(message, title) {
        $("[id*=dialog]").html(message);
        $("[id*=dialog]").dialog({
            title: title,
            modal: true,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            }
        });
    };

    function ShowPopupInfo() {
        $(function () {

            $("[id*=dialog1]").dialog({
                title: "Applicant information",
                height: 150,
                width: 300,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        });
    };     
</script>