个人中心
gpt4 book ai didi

asp.net - 回发后如何从 jQuery 模式对话框中获取文本框值？

转载 作者：行者123 更新时间：2023-12-02 00:43:05 25 4
gpt4 key购买 nike

如何使用输入的表单数据的值更新 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;
}

最佳答案

dialog.close 函数在页面发布之前清除所有字段:

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

您可能应该将对 val('') 的调用移动到 dialog.open 中(如果它仍然提供预期的用户体验)。

关于asp.net - 回发后如何从 jQuery 模式对话框中获取文本框值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1940243/

25 4 0
文章推荐： NSInteger 与 int
文章推荐： architecture - 实现包含每年更改的标准的类库的最佳方法
文章推荐： asp.net - 在异步回发期间以编程方式添加 ServiceReference
文章推荐： asp.net - 使用 GhostScript 在服务器上将 PDF 转换为图像集合