Как получить значение текстового поля из модального диалога jQuery после обратной передачи? - PullRequest
Новая
       24

Как получить значение текстового поля из модального диалога jQuery после обратной передачи?

3 голосов
/ 21 декабря 2009

Как обновить текстовые поля ASP.NET значением введенных данных формы? Приведенный ниже код представляет собой пример модальной диалоговой формы из 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;
}

Ответы [ 2 ]

3 голосов
/ 21 декабря 2009

Функция dialog.close очищает все поля перед публикацией страницы: 

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

Вы, вероятно, должны переместить вызов на val('') в dialog.open (если это все еще обеспечивает предполагаемый пользовательский опыт).

0 голосов
/ 21 декабря 2009

Принимаете ли вы во внимание, что ASP.NET изменяет фактический идентификатор всех элементов управления "Сервер", когда генерирует HTML, отправленный в браузер? Я предполагаю, что вы говорите о постбэке на всю страницу, а не о постбэке на 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, помогающий выбрать элементы управления 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», который должен помочь вам получить элемент ASP.NET по имени, которое вы дали ему при определении элемента в файле aspx. Имейте в виду, что это не так производительно, как $ ('# whatId'), но идентификаторы, сгенерированные ASP.NET, не обязательно останутся прежними (т. Е. Если вы измените имя заполнителя, области содержимого, содержимого главной страницы - это может изменить идентификатор элемента управления).

Как примечание, ASP.NET 4.0 будет иметь дополнительные свойства на серверных элементах управления, которые позволяют вам определять фактический идентификатор элемента HTML вместо ASP.NET, решая, как вызвать элемент управления.

...