Как обновить всплывающее окно диалога без обновления страницы - PullRequest
Новая
       83

Как обновить всплывающее окно диалога без обновления страницы

0 голосов
/ 01 мая 2020

Я выдергиваю свои волосы уже 8 часов, пытаясь заставить этот маленький кусочек кода работать. Любая помощь будет принята с благодарностью!

Я пытаюсь создать всплывающее окно подтверждения адреса. У всплывающего окна есть два элемента Div, один для адреса доставки и один для адреса выставления счета. У этих Div также есть кнопка для пользователя, чтобы выбрать, какой адрес он хочет использовать.

Я использую asp: Повторитель для заполнения адресов Div.

Я пытаюсь достичь, скажем, пользователь выбирает предложенный адрес доставки, я хочу скрыть адрес доставки Div, но при этом диалоговое окно интерфейса пользователя остается открытым, а также адрес платежа Div видимым для пользователя, чтобы он также мог выбрать, какой адрес оплаты он хочет использовать. Это должно быть сделано из кода позади.

Я могу скрыть панель, но как только нажимается кнопка, страница обновляется, и диалог пользовательского интерфейса переходит в конец страницы, и это не всплывающее окно больше.

После многих исследований кажется, что лучшим вариантом для достижения этой цели является использование asp: UpdatePanel (пожалуйста, исправьте меня, если есть лучшие варианты), чтобы скрыть панель без обновления страницы.

Вот код (немного продезинфицированный):

код aspx: 

<asp:Panel ID="pnlAddressVerificationPopup" CssClass="addrVerifPopup" Width="600px" runat="server" 

Visible="false">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="addressUpdatePanel" UpdateMode="Always" runat="server">
    <Triggers>
        <asp: ControlID="rptrAddressVerification" EventName="ItemCommand" />
   </Triggers>
   <ContentTemplate>

       <asp:Repeater ID="rptrAddressVerification" runat="server" OnItemCommand="rptrAddressVerification_ItemCommand">
           <HeaderTemplate></HeaderTemplate>
           <ItemTemplate>
               <div>
                   <div id="shippingAddress" runat="server">
                       <div>
                           <asp:Panel ID="pnlAddressEntered" Style='<%# DataBinder.Eval(Container.DataItem, "PanelStyle") %>' runat="server">
                               <asp:Label ID="lblEnteredAddress" runat="server" Style="font-size: 15px; margin-top: 10px;" Text='<%# DataBinder.Eval(Container.DataItem, "EnteredAddress") %>'></asp:Label>

                               <div class="AddressPanelButons">
                                   <asp:LinkButton ID="btnUseAddressEntered" runat="server" CssClass="clickLink linkButton" CommandName="btnUseAddressEntered" Text="<%$Resources:AddressEnteredButton%>"></asp:LinkButton>
                                   <asp:LinkButton ID="btnEditAddressEntered" runat="server" CssClass="clickLink linkButton" CommandName="btnEditAddressEntered" Text="<%$Resources:buttonAddressEdit%>"></asp:LinkButton>
                               </div>
                           </asp:Panel>

                           <asp:Panel ID="pnlAddressSugested" class="AddressPanel" Style="float: right;" runat="server">
                               <asp:Label ID="lblSuggestedAddress" runat="server" Style="font-size: 15px; margin-top: 10px;" Text='<%# DataBinder.Eval(Container.DataItem, "SuggestedAddress") %>'></asp:Label>

                               <div style="font-size: 15px; margin-top: 20px; font-weight: bold; text-align: center; width: 100%; position: absolute; bottom: 10px;">
                                   <asp:LinkButton ID="btnUseAddressSuggested" runat="server" CssClass="clickLink linkButton" CommandName="btnUseAddressSuggested" Text="<%$Resources:AddressSuggestedButton%>"></asp:LinkButton>
                               </div>
                           </asp:Panel>
                       </div>
                       </div>
               </div>
           </ItemTemplate>
           <FooterTemplate></FooterTemplate>
       </asp:Repeater>
   </ContentTemplate>
</asp:UpdatePanel>

.cs код 

private void LoadAddress(Address AddressResults)
{
  for (int i = 0; i < reply.AddressResults.Length; i++)
  {
    DataTable dtAddressValues = new DataTable();
    dtAddressValues.Columns.Add("EnteredAddress", typeof(String));
    dtAddressValues.Columns.Add("SuggestedAddress", typeof(String));

    DataRow drValues = dtAddressValues.NewRow();
    drValues["EnteredAddress"] = "<p>" + AddressResults[i].EnteredAddress.streetName + "<br>" + 
    AddressResults[i].EnteredAddress.city + "," + AddressResults[i].EnteredAddress.state + " " + 
    AddressResults[i].EnteredAddress.zip;
    drValues["SuggestedAddress"] = "<p>" + AddressResults[i].Suggested.streetName + "<br>" + 
    AddressResults[i].Suggested.EnteredAddress.city + "," + 
    AddressResults[i].Suggested.EnteredAddress.state + " " + 
    AddressResults[i].Suggested.EnteredAddress.zip;

    dtAddressValues.Rows.Add(drValues);
   }

   rptrAddressVerification.DataSource = dtAddressValues;
   rptrAddressVerification.DataBind();

   pnlAddressVerificationPopup.Visible = true;
   this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), Guid.NewGuid().ToString(), 
   "$(document).ready(function() {$(\"#pnlAddressVerificationPopup\").dialog({width: 'auto' , 
    minWidth: 600, height: 'auto', modal: true, resizable: true, autoOpen: true, closeOnEscape: 
    false, open: function (event, ui) {$('.ui-dialog').css('z-index', 8001);$('.ui-widget- 
    overlay').css('z-index', 8000);},close: function (event, ui){closeAddressValidationPopup();} }); 
    });", true);
     }


     protected void rptrAddressVerification_ItemCommand(object source, RepeaterCommandEventArgs e)
     {
         HtmlGenericControl addressPanel = (HtmlGenericControl)e.Item.FindControl("pnlAddresses");
            addressPanel.Visible = false;
      }

Если кто-нибудь может дать некоторая помощь о том, как этого добиться, будет очень признательна и заранее благодарна.

...