模式弹出、更新面板和客户端更新

Modal popup, update panel and client side update

本文关键字：更新 客户端 模式      更新时间：2023-09-26

我正在尝试在更新弹出控件的值后显示一个模式弹出窗口，所有这些都在客户端。

单击网格行中的链接按钮。使用该行的一些数据，我调用一个javascript函数来填充模态弹出窗口的控件并显示它。模态弹出窗口弹出得很好，但扭曲都是空的。（删除UpdateMode="考虑"无效）。我已经删除了所有的格式行，以保持代码简短。

<asp:UpdatePanel runat="server" ID="upnlNewIDS" RenderMode="Inline" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Panel runat="server" ID="divReassign" Width="350" Style="border:solid 2px navy;display:none;background: url(../assets/images/bg3.gif);"> 
            <asp:Label runat="server" ID="lblFacilityCount" />
            <asp:Label runat="server" ID="lblCurrIDSName_BK" />
            <asp:Label runat="server" ID="lblCurrSiteName" />
            <asp:Button runat="server" ID="btnSOK" Text="OK" Width="75" />
            <asp:Button runat="server" ID="btnCancel" Text="Cancel" Width="75" />
        </asp:Panel>
        <ajaxToolkit:ModalPopupExtender runat="server" 
            ID="mpeNewIDS" 
            TargetControlID="btnFake" 
            BackgroundCssClass="backgrondModal" 
            DropShadow="true" 
            BehaviorID="mpeNewIDS"
            PopupControlID="divReassign" 
            CancelControlID="btnCancel"  />
        <asp:Button runat="server" ID="btnFake" Style="display:none" />   
    </ContentTemplate>
</asp:UpdatePanel>

这是显示链接的行模板：

<a id='a_<%# Eval("IDSID") %>' href="javascript:void(0);" 
    onclick="PopulateView('<%# Eval("idsid") %>', '<%# Eval("cnt" %>', '<%# Eval("idsname") %>', '<%# Eval("sitename") %>')">Reassign</a>

Javascript：我跟踪了代码，这个函数具有所有正确的参数值。

function PopulateView(idsid, cnt, idsname, sitename) {
    lblCurrIDSName_BK = document.getElementById('<%=lblCurrIDSName_BK.ClientID %>');
    lblFacilityCount = document.getElementById('<%=lblFacilityCount.ClientID %>');
    lblCurrSiteName = document.getElementById('<%=lblCurrSiteName.ClientID %>');
    lblCurrIDSName_BK.value = idsname;
    lblCurrSiteName.value = sitename;
    lblFacilityCount.value = cnt;
    ShowNewIDSModalPopup();
}
function ShowNewIDSModalPopup() {
    $find("mpeNewIDS").show();
    return false;
}
function HideNewIDSModalPopup() {
    $find("mpeNewIDS").hide();
    return false;
}

当单击网格行中的链接时，我调用"PopulateView（'a'，'b'，'c'，'d'）"，其中a、b、c和d来自行的选择列。

在.aspx页面中使用此选项。当您的链接按钮点击事件时，它将打开弹出窗口。像一样配置链接按钮

<asp:TemplateField HeaderText="Verified Count">
  <ItemTemplate>
       <asp:LinkButton ID="verifycount" runat="server" OnClick="verifycount_Click"> <%# Eval("VerifiedCount")%> </asp:LinkButton>
  </ItemTemplate>
</asp:TemplateField>

这是为您的弹出窗口。

<asp:Button ID="btn" runat="server" style="display:none" />
 <cc1:ModalPopupExtender ID="popup_verifyInventory" runat="server"                   PopupControlID="verifyInventory_popup" TargetControlID="btn">
</cc1:ModalPopupExtender>
<asp:panel runat="server"  ID="verifyInventory_popup" BorderStyle="solid"            BorderWidth="1px">
   <table width="100%" cellpadding="1" cellspacing="1" align="center">
       <tr>
          <td colspan="3"><strong> Verify Asset Details </strong></td>
            <td><asp:ImageButton id="close" TabIndex="1" runat="server" ImageAlign="Right" ImageUrl="~/Images/remove.gif" Height="30" Width="30" ToolTip="Close"  OnClientClick="HidePopUp_verifyInventory()"/></td>
       </tr>
       <tr>
          <td colspan="4">
             <asp:GridView ID="grdgrid" runat="server" 
                                    AutoGenerateColumns="true" Width="290px" >
             </asp:GridView>
          </td>
       </tr>
    </table>
</asp:panel>

并在.aspx.cs页面中写入链接按钮点击事件，如

 protected void verifycount_Click(object sender, EventArgs e)
    {
      //your code place here
      //it will show your popup  
      popup_verifyInventory.Show();
    }

编写类似的Javascript

<script type="text/javascript">
        var ShowVerifyInventory = '<%=Your popup control ID %>';
         function ShowPopUp_verifyInventory() {
             $find(ShowVerifyInventory).show();
         }
         var HideVerifyInventory = '<%=Your popup control ID %>';
         function HidePopUp_verifyInventory() {
             $find(HideVerifyInventory).hide();
         }
</script>

弹出窗口将绑定gridview中的值。

我放弃了在客户端做这件事，而是在服务器端做，使用网格的RowDataBound添加alink按钮，并将我需要的列值分配给链接按钮的"Command Arguments"。

相关文章：