Question

如何使用输入的表单数据的值更新ASP.NET文本框？下面的代码基本上是modal dialog form sample from jQuery UI，但是使用ASP.NET文本框。发布了回发，但文本框未更新。

回发后，我的测试框中没有值。我很确定这是一个简单的，但我的大脑现在被阻止了，无法找出原因。

<!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. ui@jquery.com");
            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">test@test.com</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>
            john.doe@example.com
          </td>
          <td>
            johndoe1
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  </form>
</body>
</html>

protected void Button1_Click(object sender, EventArgs e)
{
  string name = this.name.Text;
}

Answer 1

dialog.close功能正在清除页面发布前的所有字段：

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

您可能应该将val('')的呼叫转移到dialog.open（如果仍然提供预期的用户体验）。

Answer 2

您是否考虑到ASP.NET在生成发送到浏览器的HTML时更改了所有“服务器”控件的实际ID？我假设您正在谈论整页回发，而不是做一些Ajax回发 - 我希望您觉得这很有帮助。

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

变成（我以id / name的值为例，你必须查看HTML源代码，看看ASP.NET正在生成什么值）：

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

有一个jQuery的snippit有助于处理选择ASP.NET控件：

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

您可以这样使用它：

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

这个小javascript将搜索DOM元素，找到一个以'txtTestBox'结尾的控件，这可以帮助你在aspx文件中定义元素时通过你给它的名称获取ASP.NET元素。请记住，这不像$（'＃whateverId'）那样高效，但ASP.NET生成的ID不能保证保持不变（即如果更改占位符的名称，内容区域，母版页的内容 - 它可以改变控件的ID。）

作为一个注释，ASP.NET 4.0将在服务器控件上有额外的属性，允许您定义HTML元素的实际ID，而不是ASP.NET决定调用控件的内容。

如何在回发后从jQuery模式对话框中获取文本框值？

2 个答案: