模态弹出,更新面板和客户端更新

时间:2013-11-21 21:14:54

标签: javascript asp.net updatepanel c#-2.0 modalpopupextender

我试图在更新弹出控件的值后显示模式弹出窗口,所有这些都在客户端。

单击网格行中的链接按钮。使用该行中的一些数据,我调用一个javascript函数来填充模态弹出窗口的控件并显示它。模态弹出弹出很好但是控制器都是空白的。 (删除UpdateMode =“Consitional”无效)。 我删除了所有格式化行以保持代码简短。

<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来自行的选定列

2 个答案:

答案 0 :(得分:0)

在.aspx页面中使用此功能。它会在你的linkbutton点击事件时打开弹出窗口。 配置链接按钮,如

<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中的值。

答案 1 :(得分:0)

我放弃了做这个客户端并在服务器端做了,使用网格的RowDataBound添加alink按钮并将链接按钮的“命令参数”所需的列值分配。