Comment obtenir une zone de texte valeur de jQuery boîte de dialogue modale après la publication?

Comment puis-je obtenir les ASP.NET les zones de texte mis à jour avec la valeur de l'entrée des données de formulaire?
Le code ci-dessous est essentiellement la boîte de dialogue modale de la forme de l'échantillon à partir de jQuery UI, mais avec ASP.NET les zones de texte.
Le message de retour est tiré, cependant la zone de texte n'est pas mis à jour.

Après le post de retour, je n'ai pas les valeurs dans ma boîte de test. Je suis sûr que c'est une question facile, mais mon cerveau est bloqué maintenant, et ne peut pas comprendre pourquoi.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<link href="Styles/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<title></title>
<style type="text/css">
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain {  width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
</style>
<script type="text/javascript">
$(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,
open: function(type,data){
$('#dialog').parent().appendTo($("form:first"));
},
buttons: {
'Create an account': function () {
var bValid = true;
allFields.removeClass('ui-state-error');
bValid = bValid && checkLength(name, "username", 3, 16);
bValid = bValid && checkLength(email, "email", 6, 80);
bValid = bValid && checkLength(password, "password", 5, 16);
bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]");
bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (bValid) {
$('#users tbody').append('<tr>' +
'<td>' + name.val() + '</td>' +
'<td>' + email.val() + '</td>' +
'<td>' + password.val() + '</td>' +
'</tr>');
$(this).dialog('close');
<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;
}
},
Cancel: function () {
$(this).dialog('close');
}
},
close: function () {
allFields.val('').removeClass('ui-state-error');
}
});
$('#createuser1').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");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="javascript: $('#dialog').dialog('open');return false;"
OnClick="Button1_Click" />
</div>
<div class="demo">
<div id="dialog" title="Create new user">
<p id="validateTips">
All form fields are required.</p>
<fieldset>
<label for="name">
Name</label>
<asp:TextBox runat="server" name="name" ID="name" CssClass="text ui-widget-content ui-corner-all">UserUser</asp:TextBox>
<label for="email">
Email</label>
<asp:TextBox runat="server" name="email" ID="email" CssClass="text ui-widget-content ui-corner-all">[email protected]</asp:TextBox>
<label for="password">
Password</label>
<asp:TextBox runat="server" name="password" ID="password" CssClass="text ui-widget-content ui-corner-all">password</asp:TextBox>
</fieldset>
</div>
</div>
<div id="users-contain" class="ui-widget">
<h1>
Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>
Name
</th>
<th>
Email
</th>
<th>
Password
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
John Doe
</td>
<td>
[email protected]
</td>
<td>
johndoe1
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
protected void Button1_Click(object sender, EventArgs e)
{
string name = this.name.Text;
}
Jetez un oeil à cette question.
Le message de retour est fait de tir, donc c'est un problème différent. J'ai le "formulaire de réparation" déjà en place dans ma fonction d'ouverture.

OriginalL'auteur Magnus Johansson | 2009-12-21

  1. 3

    La dialog.close fonction est d'effacer tous les champs avant de de la page de messages:

    close: function () {
allFields.val('').removeClass('ui-state-error');
}

    Vous devriez probablement se déplacer à l'appel à val('') en dialog.open (si qui constitue toujours le but de l'expérience utilisateur).

    Grand. C'était la question. Merci.
    allFields.removeClass("ui-state-erreur");
    Peut également enregistrer dans des champs cachés

    OriginalL'auteur Jeff Sternal

  2. 0

    Vous êtes en prenant en considération que ASP.NET modifications de l'identification réelle de tous "Serveur" contrôles lorsqu'il génère le code HTML envoyé au navigateur? Je suppose que vous parlez d'une pleine page de publication, ne pas faire quelques Ajax publication - j'espère que vous trouverez ce utile.

    <asp:TextBox id="txtTestBox" name="txtTestBox" runat="server">  
Test Value</asp:TextBox>

    se transforme en (je suis en montrant les valeurs de id/nom comme un exemple, vous aurez à regarder le code source HTML de voir ce que la valeur ASP.NET est génératrice):

    <input type="text" id="ctl00_PlaceHolder1_txtTextBox"  
name="ctl00$PlaceHolder1$txtTestBox" value="Test Value" />

    Il y a un snippit de jQuery qui permet de faire face avec la sélection ASP.NET contrôles:

    function $$(id, context) {
var el = $("#" + id, context);
if (el.length < 1)
el = $("[id$=_" + id + "]", context);
return el;
}

    Que vous pouvez l'utiliser comme ceci:

    var testValue = $$('txtTestBox').val();

    Ce peu de javascript, de la recherche à travers les éléments du DOM pour trouver un contrôle qui se termine par "txtTestBox", qui devrait vous aider à choisir le ASP.NET élément par le nom que vous avez donné lors de la définition de l'élément dans le fichier aspx. Gardez à l'esprit que ce n'est pas aussi performante que $('#whateverId'), mais l'Id généré par ASP.NET ne sont pas garantis de rester le même (par exemple, si vous modifiez le nom d'un espace réservé, la zone de contenu de la page maître de trucs qu'on peut changer l'ID de la commande).

    Comme une note, ASP.NET 4.0 ont des propriétés supplémentaires sur les commandes de serveur qui vous permettent de définir le réel de l'ID d'un élément HTML à la place de ASP.NET de décider ce qu'il faut appeler un contrôle.

    OriginalL'auteur Bryan Rehbein