當ModalPopupExtender頁面獲取回傳時正在關閉

Question

我正在使用asp ModalPopupExtender在asp.net頁面中顯示樹狀圖。當我點擊一個按鈕時，會彈出一個ModalPopupExtender並加載複選框（加載treeview是一個usercontrol ascx）。在那個用戶控件中，我寫了一些服務器端代碼，當我檢查一個父節點時，應該檢查所有的子節點。解決這個問題我的網頁將得到回傳。我的問題是當我的頁面發回我的ModalPopupExtender越來越關閉和我的功能正常工作。

這裏是我的ascx頁面

<asp:TreeView ID="tvFolderSelect" runat="server" RootNodeStyle-ForeColor="Black" 
    CssClass="foldertree" LeafNodeStyle-ForeColor="Black" LeafNodeStyle-Font-Bold="false" 
    ParentNodeStyle-ForeColor="Black" Width="100%" Style="margin: 3px 0 0 -16px;" 
    OnTreeNodePopulate="tvFolderSelect_TreeNodePopulate" OnTreeNodeCheckChanged="tvFolderSelect_TreeNodeCheckChanged" onclick="postbackOnCheck(event);" 
    ShowCheckBoxes="All" > 
    <LeafNodeStyle Font-Bold="False" ForeColor="Black" CssClass="foldertreeleafnode" 
     ImageUrl="~/images/img_dms/sm_fldr.png" /> 
    <ParentNodeStyle Font-Italic="True" ImageUrl="~/images/img_dms/sm_fldr.png" Font-Underline="True" 
     CssClass="foldertreeparentnode"/> 
    <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="0px" 
     NodeSpacing="0px" VerticalPadding="0px" /> 
    <RootNodeStyle ForeColor="Black" CssClass="foldertreerootnode" /> 
    <SelectedNodeStyle Font-Underline="False" HorizontalPadding="0px" VerticalPadding="0px" /> 
</asp:TreeView> 

TreeView和這裏是JavaScript函數來獲取回發

function postbackOnCheck(e) { 
    var evt = e || window.event; 
    var o = evt.target || evt.srcElement; 
    if (o.tagName == 'INPUT' && o.type == 'checkbox' && o.name != null && o.name.indexOf('CheckBox') > -1) { 
     __doPostBack("", ""); 
    } 
} 

下面是我使用的控制

<img id="AddActivity" runat="server" src="../images/plus1.gif" alt="" style="text-align: right; 
           cursor: pointer; float: right; padding: 1%;" /> 
          <asp:ModalPopupExtender ID="MPEACT" runat="server" TargetControlID="AddActivity" 
           PopupControlID="ACTDiv" BackgroundCssClass="modalBackground" /> 

哪有我不再隱藏ajax彈出窗口。

Answer 1

我使用AsyncPostBackTrigger運行服務器端代碼並​​更改__DoPostBack方法參數。現在我的樹視圖設計

<div id="form" runat="server"> 
<asp:UpdatePanel ID="updTree" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
     <asp:TreeView ID="tvFolderSelect" runat="server" RootNodeStyle-ForeColor="Black" 
      CssClass="foldertree" LeafNodeStyle-ForeColor="Black" LeafNodeStyle-Font-Bold="false" 
      ParentNodeStyle-ForeColor="Black" Width="100%" Style="margin: 3px 0 0 -16px;" 
      OnTreeNodePopulate="tvFolderSelect_TreeNodePopulate" OnTreeNodeCheckChanged="tvFolderSelect_TreeNodeCheckChanged" 
      ShowCheckBoxes="All" onclick="postbackOnCheck(event);"> 
      <LeafNodeStyle Font-Bold="False" ForeColor="Black" CssClass="foldertreeleafnode" 
       ImageUrl="~/images/img_dms/sm_fldr.png" /> 
      <ParentNodeStyle Font-Italic="True" ImageUrl="~/images/img_dms/sm_fldr.png" Font-Underline="True" 
       CssClass="foldertreeparentnode" /> 
      <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="0px" 
       NodeSpacing="0px" VerticalPadding="0px" /> 
      <RootNodeStyle ForeColor="Black" CssClass="foldertreerootnode" /> 
      <SelectedNodeStyle Font-Underline="False" HorizontalPadding="0px" VerticalPadding="0px" /> 
     </asp:TreeView> 
    </ContentTemplate> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="tvFolderSelect" EventName="TreeNodeCheckChanged" /> 
    </Triggers> 
</asp:UpdatePanel> 

和功能，回發是

function postbackOnCheck(e) { 
    var evt = e || window.event; 
    var o = evt.target || evt.srcElement; 
    if (o.tagName == 'INPUT' && o.type == 'checkbox' && o.name != null && o.name.indexOf('CheckBox') > -1) { 
     __doPostBack('<%=updTree.ClientID %>', 'Refresh:0,1,2'); 
    } 
} 

現在同時獲得回傳

Answer 2

嘗試使用更新面板，並參考下面的鏈接詳細爲什麼Modalpopup在回發關閉？

http://patelshailesh.com/index.php/why-does-modalpopup-close-on-postback

Answer 3

您可以點擊按鈕使用JavaScript函數：

<script> 
       $("#btn").click(
        function() { 
         window.top.location = "WebForm1.aspx"; 
        }); 
</script> 

我用這個功能來自動更新上關閉彈出窗口的網格，如果你想看到文章，並希望看看我是如何使用這個功能，那麼你可以參考以下鏈接：

http://www.c-sharpcorner.com/UploadFile/cd7c2e/how-to-auto-refresh-grid-view-on-closing-of-popup-menu/

許多OT她的文章和類似的論壇可以在http://www.c-sharpcorner.com/

Answer 4

這裏是我所做的重新創建您的問題。我創建了一個帶有模式彈出式擴展器的網頁。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalPopExample.aspx.cs" Inherits="WebApp.ModalPopup.ModalPopExample" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Test Page</title> 
    <style type="text/css"> 
     .hide 
     { 
      display:block; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

    </div> 
     <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> 
     </ajaxToolkit:ToolkitScriptManager> 
     <asp:Panel ID="Panel1" CssClass="hide" runat="server" BorderColor="Red" BorderStyle="Dashed" BorderWidth="3px"> 
      Are you sure? 
      <br /> 
      <asp:Button ID="btnok" runat="server" Text="OK" /> 
      <asp:Button ID="btncancel" runat="server" Text="Cancel" /> 
     </asp:Panel> 
     <asp:Button ID="btnShow" runat="server" Text="Show Modal" /> 
     <asp:Image ID="Image1" ImageUrl="~/image_loader.ashx" runat="server" /> 
     <ajaxToolkit:ModalPopupExtender ID="btnShow_ModalPopupExtender" DropShadow="true" OkControlID="btnok" CancelControlID="btncancel" PopupControlID="Panel1" runat="server" DynamicServicePath="" Enabled="True" TargetControlID="btnShow"> 
     </ajaxToolkit:ModalPopupExtender>   
    </form> 
    <script> 
     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_pageLoaded(function() { 
      console.log('loaded'); 
     }); 
    </script> 
</body> 
</html> 

注意，圖像經由處理程序文件（ASHX）加載：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Threading; 
using System.Web; 

namespace WebApp.ModalPopup 
{ 
    /// <summary> 
    /// Summary description for image_loader 
    /// </summary> 
    public class image_loader : IHttpHandler 
    { 

     public void ProcessRequest(HttpContext context) 
     { 
      context.Response.ContentType = "image/jpg"; 
      var imagePath = context.Server.MapPath("~/images/windows_xp_bliss-wide.jpg"); 
      Thread.Sleep(20000); 
      context.Response.TransmitFile(imagePath); 
     } 

     public bool IsReusable 
     { 
      get 
      { 
       return false; 
      } 
     } 
    } 
} 

彈出閃爍一段時間。你可以做的最簡單的解決方法是首先隱藏它自己的元素（通過css），並且當網頁完全加載時，需要一些javascript來移除該css。

<style type="text/css"> 
     .hide 
     { 
      display:none; 
     } 
    </style> 

當您的ajax客戶端腳本全部完成加載時...找到控件並刪除元素上的類。

<script> 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_pageLoaded(function() { 
     console.log('loaded'); 
     var div = document.getElementById('Panel1'); 
     div.className = ''; 
    }); 
</script> 

希望這會有所幫助。