1

ASP.NET フォームに 2 つのボタン (データを保存するためのボタン、次のステップに進むためのボタン) があり、ユーザーが [続行] をクリックすると 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プロパティ (テキスト要素の場合) と比較するソリューションを選択しました。チェックボックスには.checkedとdefaultCheckedプロパティを使用し、選択要素には と を使用.selectedし.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 に答える