1

我有一个 ASP.NET 表单，上面有两个按钮（一个用于保存数据，一个用于继续下一步），我试图在用户单击“继续”时弹出一个 jQuery-ui 模式对话框" 无需先保存。我无法让它工作；无论如何，它总是会进入下一步。这是一个包含带有 TabPanels 的 Ajax TabContainer 的表单，我怀疑这可能会给工作带来麻烦。以下是我的代码的相关部分：

.aspx 标记：

<ajaxToolkit:TabContainer ID="tabContainerRenewal" runat="server" OnClientActiveTabChanged="GetOrigAddrData" OnActiveTabChanged="tabContainerRenewal_ActiveTabChanged">
  <ajaxToolkit:TabPanel ID="tabVerifyAddress" runat="server" ScrollBars="Auto" OnLoad="tabVerifyAddress_Load">
    <HeaderTemplate>Step 2: Address Verification</HeaderTemplate>
    <ContentTemplate>
      <table class="bordered">
        <tr>
          <th class="rightAlign">Company:</th>
          <td colspan="2"><asp:TextBox ID="tbxCompany" runat="server" Columns="50" CssClass="editAddress"></asp:TextBox></td>
          <th class="rightAlign">Position:</th>
          <td colspan="2"><asp:TextBox ID="tbxPosition" runat="server" Columns="50" CssClass="editAddress"></asp:TextBox></td>
...
      <div class="buttonRow">
        <asp:Button ID="btnUpdateInfo" runat="server" Text="Update My Information" OnClick="btnUpdateInfo_Click" />
        <asp:Button ID="btnContinueNoUpdate" runat="server" Text="Continue" OnClick="btnContinueNoUpdate_Click" OnClientClick="return ContinueNoUpdateCheck(this);" />
      </div>

Javascript/jquery 函数：

<script type="text/javascript">
  //Check to see if user has changed any address data when continuing without update and
  //  display a dialog if they have
  var continueConfirmed = false;
  function ContinueNoUpdateCheck(obj) {
    if ($('.editAddress').serialize() != origAddrData) {
      var changeTitle = "Data has been changed";
      var changeText = "You have updated information on this form. Are you sure you wish to continue without saving?";
      //add the dialog div to the page
      $('body').append(String.Format("<div id='changeDialog' title='{0}'><p>{1}</p></div>", changeTitle, changeText));
      //create the dialog
      $('#changeDialog').dialog({
        width: 400,
        height: "auto",
        modal: true,
        resizable: false,
        draggable: false,
        close: function (event, ui) { $('body').find('#changeDialog').remove(); },
        buttons: {
          'Yes, continue without saving': function () {
            $(this).dialog('close');
            continueConfirmed = true;
            if (obj) obj.click();
          },
          'No, let me save': function () {
            $(this).dialog('close');
          }
        }
      });
    }

    return continueConfirmed;
  }

  //Get original address form data for comparison
  function GetOrigAddrData() {
    //First find out which tab we're on; we're only concerned with tab 1 (verify address)
    //  get TabContainer object
    var container = $('<%= tabContainerRenewal.ClientID %>');
    switch (container.ActiveTabIndex) {
      case 1:
        var origAddrData = $('.editAddress').serialize();
        break;
      default:
        break;
    }
  }
</script>

“String.Format”是我在单独文件中编写的 Javascript 函数；我一直在使用它，所以我知道这不是问题。

C# 代码一点也不有趣：

protected void btnContinueNoUpdate_Click(object sender, EventArgs e)
{
  //User has elected to not change any data, so we simply advance to certification
  //  without validation (disable address verification tab)
  AdvanceToNextTab();
} //end method btnContinueNoUpdate_Click

protected void AdvanceToNextTab()
{
  //Advance to the next tab in the TabContainer
  //Total number of tabs in container
  int tabCount = tabContainerRenewal.Tabs.Count;
  //Index of currently active tab
  int currTab = tabContainerRenewal.ActiveTabIndex;
  //Advance if we're not already on the last tab
  if (currTab < tabCount - 1)
  {
    tabContainerRenewal.ActiveTabIndex = currTab + 1;
    tabContainerRenewal.Tabs[currTab + 1].Enabled = true;
    //Disable the tab we were just on so they can't go back
    tabContainerRenewal.Tabs[currTab].Enabled = false;
  }
} //end method AdvanceToNextTab

那么，有什么想法吗？我整天都在做这个，没有成功。

这是上下文的屏幕截图... 续订截图

4

1 回答 1

0

我最终放弃了将数据序列化以进行比较的想法；我只是无法让它工作。相反，我选择了一种迭代表单元素的解决方案，将每个元素的.value属性与其.defaultValue属性进行比较（对于文本元素）；对于复选框，我使用.checkedanddefaultChecked属性，对于选择元素，我使用.selectedand .defaultSelected。这是检查更改的函数：

function HasFormDataChanged(elemArray) {
  var elemCount = elemArray.length;
  for (var i = 0; i < elemCount; i++) {
    var elem = elemArray[i];
    if (elem.type == "text" || elem.tagName == "TEXTAREA") {
      if (elem.value != elem.defaultValue)
        return true;
    }
    else if (elem.type == "checkbox" || elem.type == "radio") {
      if (elem.checked != elem.defaultChecked)
        return true;
    }
    else if (elem.tagName == "SELECT") {
      var options = elem.options;
      var optsCount = options.length;
      for (var j = 0; j < optsCount; j++) {
        var opt = options[j];
        if (opt.selected != opt.defaultSelected)
          return true;
      }
    }
  }
  return false;
}
于 2013-08-23T15:37:27.190 回答