ASP.NET avec jQueryUI : la valeur de la zone de texte est considérée comme nulle dans l'événement de clic du bouton.

Question

J'ai une page ASP.NET où j'ai un bouton. Lorsqu'un utilisateur clique sur le bouton, je vérifie si l'utilisateur s'est connecté ou non. S'il ne s'est pas connecté, j'affiche un popup modal pour se connecter (en utilisant jQueryUI). J'ai placé une boîte de texte (txtPassword) et un bouton (btnLogin) dans le Div qui sera affiché par le jQueryDialog. Mais dans l'événement Click de btnLogin, je ne suis pas capable de lire la valeur du texte entré dans la boîte de texte txtPassword.

Le code ci-dessous est le mien

    <form id="form1" runat="server">
<div>
   <br />  
    <asp:TextBox ID="txtModelId" runat="server" Text=""></asp:TextBox><br />

   <asp:Button ID="btnGo" runat="server" Text="Go" OnClick="btnGo_Click" />
    <br />
    <asp:Label ID="lblUserMsg" runat="server" Text="Label"></asp:Label></div>
    <div id="divContentHolder">
    <div class="demo">

    <div id="dialog" title="Login with your TradeIn Account">
    <p id="validateTips">Enter your EmailId & password</p>

    <fieldset> 
      <label for="email">Email</label>
      <asp:TextBox ID="txtEmail" CssClass="text ui-widget-content ui-corner-all" runat="server" ></asp:TextBox>
      <label for="password">
       <asp:TextBox ID="TextBox1" runat="server" Text="sample"></asp:TextBox>Password</label>
      <asp:TextBox ID="txtPassword"  CssClass="text ui-widget-content ui-corner-all" runat="server" ></asp:TextBox>
      <asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" UseSubmitBehavior="false"/>
    </fieldset>

    </div><!--dialog-->
    </div><!--demo-->
   </div><!--divContentHolder-->

</form>

Code côté serveur

protected void btnGo_Click(object sender, EventArgs e)
{
    CheckUserLoggedIn();
}

private void CheckUserLoggedIn()
{
    if (Session["username"] != null)
    {
        Response.Write("Logged in user");
        ClientScript.RegisterHiddenField("isAuthenticated", "true");
    }
    else
    {
        ClientScript.RegisterHiddenField("isAuthenticated", "false");
    }
}

   protected void btnLogin_Click(object sender, EventArgs e)
    {
        string txtSample= TextBox1.Text;  // this is showing the value 'sample'
        string txtPass= txtPassword.Text; // this is showing null

        if (txtPass == "shyju") 
        {
            Session["username"] = txtPassword.Text;
            Response.Redirect("TestingModal.aspx");
        }
   }

Mon code java script pour rendre le dialogue

$(function() {

    var name = $("#name"),
            email = $("#email"),
            password = $("#password"),
            allFields = $([]).add(name).add(email).add(password),
            tips = $("#validateTips");

    function updateTips(t) {
            tips.text(t).effect("highlight",{},1500);
    }

    function checkLength(o,n,min,max) {

            if ( o.val().length > max || o.val().length < min ) {
                    o.addClass('ui-state-error');
                    updateTips("Length of " + n + " must be between "+min+" and "+max+".");
                    return false;
            } else {
                    return true;
            }

    }

    function checkRegexp(o,regexp,n) {

            if ( !( regexp.test( o.val() ) ) ) {
                    o.addClass('ui-state-error');
                    updateTips(n);
                    return false;
            } else {
                    return true;
            }

    }

    $("#dialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 300,
            modal: true,
            buttons: {
                    'Create an account': function() {
                            var bValid = true;
                            allFields.removeClass('ui-state-error');

                            bValid=true;
                            if (bValid) {

                                    /*$('#users tbody').append('<tr>' +
                                            '<td>' + name.val() + '</td>' + 
                                            '<td>' + email.val() + '</td>' + 
                                            '<td>' + password.val() + '</td>' +
                                            '</tr>'); */

                                            alert("Check User Credentials")
                                    $(this).dialog('close');
                            }
                    },
                    Cancel: function() {
                            $(this).dialog('close');
                    }
            },
            close: function() {
                    allFields.val('').removeClass('ui-state-error');
            }
    });

    $('#create-user').click(function() {
            $('#dialog').dialog('open');
    })
    .hover(
            function(){ 
                    $(this).addClass("ui-state-hover"); 
            },
            function(){ 
                    $(this).removeClass("ui-state-hover"); 
            }
    ).mousedown(function(){
            $(this).addClass("ui-state-active"); 
    })
    .mouseup(function(){
                    $(this).removeClass("ui-state-active");
    });

var isAuthenticated = $("#isAuthenticated").val();
if (isAuthenticated && isAuthenticated == "false")
{
// Display the modal dialog.
$("#dialog").dialog("open");
 }
});

J'avais codé en dur la valeur des propriétés de texte de TextBox1 comme 'sample' dans la partie HTML de mon fichier ASPX. Dans l'événement de clic du bouton, je l'obtiens, mais la propriété de texte de l'autre textbox, txtPassword, me donne une valeur nulle.

S'il vous plaît guidez-moi à aller de l'avant

Merci d'avance

Answer 1

Il fonctionne parfaitement bien mon cher ! (J'ai utilisé votre code uniquement)