Display jQuery Modal Dialog based on condition from Code Behind in ASP.Net

Last Reply 2 months ago By pandeyism

Posted 2 months ago

I am working a website and I want to have a dialog message like facebook mobile when the user enter the wrong password when the password does not match based on the database. I want it to be align in the middle of the webpage. 

I'm using asp.net to do my website and this is my code below.

      protected void Btn_Login_Click(object sender, EventArgs e)
      {
          try {
              string str_userPW   = tb_pw.Text;
              string str_userName = tb_username.Text;
              string str_userID   = Account.RetrieveID(str_userName, str_userPW);     //Retrieve user_id
 
              if (str_userID != null) {                                               //Meaning the username & password enter did not match what is in the DB
                  Session.Add("user_name", str_userName);                             //Session the user_name
                  Session.Add("user_id", str_userID);                                 //Session the user_id
                  Response.Redirect("~/Forms/Index.aspx");                            //Response.Redirect to the Index page with the encoded user_id in String format
              }
              else {
                  //Display the dialog box
              }
          }
          catch (Exception ex) {
              Console.Write(ex.Message);
          }
      }

 

Posted 2 months ago

Hey tanws8,

Please refer below sample.

HTML

<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(message) {
        $(function () {
            $("#dialog").html(message);
            $("#dialog").dialog({
                modal: true
            });
        });
    };
</script>
<div>
    <asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="Login" />
    <div id="dialog" style="display: none">
    </div>
</div>

Code

C#

protected void Login(object sender, EventArgs e)
{
    try
    {
        string str_userPW = "";
        string str_userName = "";
        string str_userID = "";

        if (!string.IsNullOrEmpty(str_userID))
        {
            Session.Add("user_name", str_userName);
            Session.Add("user_id", str_userID);
            Response.Redirect("~/Forms/Index.aspx");
        }
        else
        {
            string message = "Wrong UserName or Password";
            ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
        }
    }
    catch (Exception ex)
    {
        Console.Write(ex.Message);
    }
}

VB.Net

Protected Sub Login(ByVal sender As Object, ByVal e As EventArgs)
    Try
        Dim str_userPW As String = ""
        Dim str_userName As String = ""
        Dim str_userID As String = ""

        If Not String.IsNullOrEmpty(str_userID) Then
            Session.Add("user_name", str_userName)
            Session.Add("user_id", str_userID)
            Response.Redirect("~/Forms/Index.aspx")
        Else
            Dim message As String = "Wrong UserName or Password"
            ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "ShowPopup('" & message & "');", True)
        End If

    Catch ex As Exception
        Console.Write(ex.Message)
    End Try
End Sub