2012-01-27 77 views
1

我知道这与S.O.上的许多其他问题类似。但他们似乎都不适用于这种情况,他们也没有解决问题。问题是我有一个Modal Popup Control,我根据需要传递其他控件。所以当用户点击我的用户界面上的一个按钮时,他可以用一组内容获取该模式,然后当点击另一个按钮时他会得到不同的内容。一切工作正常,直到我试图从添加到模式弹出窗口的内容中触发事件。说我已经尽力解决这个问题并不完全准确,但我已经尝试了很多。我越来越相信这要么不能完成,要么我有一些错误的设置。更新面板中的Modalpopup扩展器,谁控制不会触发的事件

这是此代码为更新面板

<input id="dummy" type="button" style="display: none" runat="server" /> 
<asp:ModalPopupExtender CancelControlID="Close" runat="server" ID="mpeThePopup" TargetControlID="dummy" PopupControlID="pnlModalPopUpPanel" BackgroundCssClass="modalBackground" PopupDragHandleControlID="Title" /> 
<asp:Panel ID="pnlModalPopUpPanel" runat="server" CssClass="modalPopup" Width="400px" Height="600px"> 
    <asp:UpdatePanel ID="udpInnerUpdatePanel" runat="Server"> 
     <ContentTemplate> 
      <table id="ContentTableTag" runat="server" cellpadding="0" cellspacing="0" style="width: 100%; 
       height: 100%;"> 
       <tr> 
        <td id="Title" runat="server" style="background-color: rgb(79,82,90); text-align: left; 
         height: 28px; width: 90%; color: White;" nowrap="nowrap"> 
         <h4 style="margin: 0px 0px 0px 5px;"> 
          <asp:Label ID="LblSectionTitle" runat="server" Text="Modal"></asp:Label> 
         </h4> 
        </td> 
        <td id="Close" runat="server" style="background-color: rgb(79,82,90); text-align: right; 
         height: 28px; width: 10%" nowrap="nowrap"> 
         <asp:ImageButton ID="ibClose" runat="server" Style="margin-right: 5px;" ImageUrl="~/WLImages/MLS/button_close.png" 
          ToolTip="Close" /> 
        </td> 
       </tr> 
       <tr> 
        <td id="MainContentHolder" colspan="2" align="left" style="top: 0px; bottom: 100%; 
         vertical-align: top; width: 100%; height: 100%" /> 
       </tr> 
      </table> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
</asp:Panel> 

这对于我加入到模式弹出的用户控件的代码,在其背景有两个事件触发,一个是当日历改变它的日期,还有一个用于检查复选框项目的时间。

<table id="mainContent" runat="server" visible="false" width="350" height="300"> 
    <tr> 
     <td> 
      <asp:label ForeColor="White" runat="server" Text="Exam Date:" /> 
     </td> 
     <td> 
      <asp:TextBox ID="txtDate" runat="server" Width="127" ForeColor="Black" 
       readonly="true" ontextchanged="txtDate_TextChanged"/> 
      <asp:CalendarExtender ID="CalendarExtender" runat="server" 
       PopupButtonID="ibtnCalendar" OnClientDateSelectionChanged="checkDate" 
       TargetControlID="txtDate" onload="LoadCalendar" /> 
     </td> 
     <td> 
      <asp:ImageButton ID="ibtnCalendar" ImageUrl="../imgs/btn_calendar.png" Width="20px" runat="server" /> 
     </td> 
    </tr> 
    <tr> 
     <td style="vertical-align: top; padding-top:5px"> 
      <asp:label ForeColor="White" runat="server" Text="Study Days:" /> 
     </td> 
     <td colspan="2" style="vertical-align: top; padding-top:5px"> 
      <asp:CheckBoxList ID="WeekCheckBox" runat="server" ForeColor="White" 
       onselectedindexchanged="WeekCheckBox_SelectedIndexChanged"> 
       <asp:ListItem Text="Monday" Value="1" /> 
       <asp:ListItem Text="Tuesday" Value="2" /> 
       <asp:ListItem Text="Wednesday" Value="3" /> 
       <asp:ListItem Text="Thursday" Value="4" /> 
       <asp:ListItem Text="Friday" Value="5" /> 
       <asp:ListItem Text="Saturday" Value="6" /> 
       <asp:ListItem Text="Sunday" Value="7" /> 
      </asp:CheckBoxList> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <asp:label ForeColor="White" runat="server" Text="Study hours per day:" /> 
     </td> 
     <td colspan="2"> 
      <asp:TextBox ForeColor="Black" ID="tbStudyHours" runat="server" Width="127px" ReadOnly="true" /> 
     </td> 
    </tr> 
</table> 

最后这是我如何将控制附加到模态。

private void GenerateCalendarPopup(ExamDateSelector eds) 
    { 
     pnlModalPopUpPanel.BackColor = GUI.Instance.GUIColorElement(GUIElements.color_main); 
     LblSectionTitle.Text = "Exam Date"; 
     pnlModalPopUpPanel.Height = eds.ControlHeight + 40; 
     pnlModalPopUpPanel.Width = eds.ControlWidth + 25; 
     eds.ShowControl = true; 
     MainContentHolder.Controls.Add(eds); 
    } 

谢谢你的帮助。

回答

0

虽然这可能不是“正确”的方式来处理我自己创造的情况,试图将我们的Windows产品的流程和样式复制到网络上,但我确实找到了解决问题的方法在模式弹出窗口中显示的事件不会从此控件中触发;尽管以迂回的方式。 首先,我在javascript中编写了一个函数,该函数完成了我将要放入控件事件中的大部分数学运算;本质上它会计算从现在到特定日期之间剩余的学习时间,考虑用户选择为研究日的一周中的几天。然后通过使用webmethod将我保存的信息传递给数据库。

function calculateStudyTime() { 
    //do some math 
    … 
    PageMethods.SaveModalExamDateChangesToDB(datesString, selectedDate); 
} 

我将脚本附加到每个要在代码隐藏中触发计算的控件。在我的情况下,我想重新计算学习时间,当有一个复选框代表一周的某一天被切换时。所以我将脚本附加到ListItem控件。我这样做是因为ListItem控件实际上并没有可以通过设计器访问的onclick属性,但可以通过这种方式添加。

protected void LoadCalendar(object sender, EventArgs e) 
{ 

    … 
    foreach (ListItem item in WeekCheckBox.Items) 
    { 
     item.Attributes.Add("onclick", "calculateStudyTime()"); 
    } 
     … 
} 

最后在基本页面从所有的模式弹出的都被称为我创建一个静态参照该基本页面和装饰功能,从JavaScript文件被调用。需要静态引用本身,因此我可以从静态web方法访问基本页面的成员(在本例中为我的上下文)。

Static Dashboard thisPage; 
protected void Page_Load(object sender, EventArgs e) 
{ 
    … 
    thisref = this; 
    … 
} 

[WebMethod] 
[ScriptMethod] 
public static void SaveModalExamDateChangesToDB(string days, string date) 
{ 
    thisPage.UserSession.UserCourse.ExamDate = DateTime.Parse(date); 
    thisPage.UserSession.UserCourse.StudyDays = days; 
    thisPage.UserSession.UserCourse.Save(); 
} 

就像我说的那样不理想,但它的工作原理。

2

不知道其余的代码。我在这里遇到一个肢体并说:Ofcourse它不会工作:P。

当您执行回发时,您需要重新创建page_init事件中占位符中的控件。这样,您可以在视图状态和控制处理程序分配之前重新创建控件集合。但是,如果不知道代码的其余部分,那只是一个猜测。

那就说:你为什么这样做?为什么不简单使用2种不同的ModalPopupExtender?即使不采用这种欺骗手段,它本身也是一种野兽。

+0

我不想创建30个左右独立的模式弹出窗口,弹出窗口在那里试图模仿我们的Windows软件。我没有试图用欺骗手段,只是一遍又一遍地复制同样的基本事物似乎很愚蠢。这就是说我可能不得不复制粘贴它。 – Siegeon 2012-01-27 22:05:55

+0

然后,我真的在做这些东西(我几乎没有任何Web开发经验)。没有其他代码可以显示你真的... – Siegeon 2012-01-27 22:08:42

+0

不知道你的用例是如何有这么多的弹出窗口。但我已经使用FancyBox与IFrame模式加载单独的页面作为弹出窗口取得巨大成功。如果需要,您也可以从弹出窗口回到主页面。这可能会更容易,那么你现在想做什么.... – Danthar 2012-01-27 22:11:28

相关问题