在bootstrap模式弹出窗口

时间:2015-08-12 15:10:32

标签: asp.net twitter-bootstrap autopostback modalpopup

这就是我想在这里实现的目标。用户单击按钮并显示引导模式弹出窗口。用户在模态弹出窗口的文本框中输入事件id值,我希望有关事件的信息显示在模态弹出窗口的其他字段中。

我在 txtEventId_TextChanged 事件下写了一个函数,我能够获得在事件id文本框中输入的值。我能够将该值传递给数据库,并从数据库中检索它的相应值。

我现在的问题是我无法在模态弹出窗口中显示这些数据。

以下是HTML代码:

          <!-- Maintainenance Modal -->


        <div class="modal fade" id="maintenanceModal" role="dialog" tabindex = -1 aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
            <div class="modal-dialog">

               <!-- Maintaineance Modal content-->

                <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                               <h4 class="modal-title">Maintain Event</h4>
                        </div>

                          <div class="row">
                                <div class="col-xs-2">
                                    <div class ="form-group">
                                        <label for="eventID" id="lblEventId">EventID</label> 
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <asp:TextBox ID="txtEventId" runat="server" CssClass="form-control dialogtextbox" AutoPostBack="false" OnTextChanged="txtEventId_TextChanged"></asp:TextBox>
                                    </div>
                                </div>
                            </div>
                    <asp:HiddenField ID="HiddenField1" runat="server" />
                <div class="modal-body">
                  <div class="EventsIcons"> 
                         <div class ="form-group">
                            <label for="MaintainDropDown" id="MaintainEventLabel">Select The Event Type </label>
                            <select id="MaintainDropDown" runat="server" class="btn btn-default dropdown-toggle eventdropdown" data-toggle="dropdown" aria-expanded="true">
                                <option value="WorkAnniversary">WORKANNIVERSARY</option>
                                <option value="Birthday">BIRTHDAY</option>
                                <option value="Community">COMMUNITY</option>
                                <option value="FoodSafety">FOOD SAFETY</option>
                                <option value="Health&Safety">HEALTH & SAFETY</option>
                                <option value="Holiday">HOLIDAY</option>
                                <option value="Maintenance">MAINTENANCE</option>
                                <option value="QualityAudit">QUALITY AUDIT</option>
                                <option value="SocialEvent">SOCIAL EVENT</option>
                                <option value="Stat-Holiday">STAT-HOLIDAY</option>
                                <option value="Sustainability">SUSTAINABILITY</option>
                                <option value="TownHall">TOWN HALL</option>
                                <option value="Visitor">VISITOR</option>
                                <option value="Wellness">WELLNESS</option>
                            </select> 
                        </div>


                 </div> 

                    <div class="Description">
                        <label for="description" id="MaintainDescription">Description</label>
                        <textarea class="form-control" rows="5" id="maintainTxtDescription" name="eventdescription" runat="server"></textarea>
                    </div>

                    <div class="row">
                        <div class="col-xs-2">
                            <div class="form-group">
                                <label id="Label3">Start Time</label>
                            </div>
                        </div>
                        <div class='col-xs-6'>
                            <div class="form-group">
                                <div class='input-group date' id="maintainStartDate">
                                    <asp:TextBox ID="maintainTxtStartDate" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="form-group">
                                <div class="input-group date" id="startTime">
                                    <asp:TextBox ID="maintainTxtStartTime" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-time"></span>
                                    </span>
                                </div>
                           </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-2">
                          <div class="form-group">
                            <label id="Label4">End Time</label>
                          </div>
                        </div>
                        <div class="col-xs-6">
                          <div class="form-group">
                                <div class="input-group date" id="endDate">
                                    <asp:TextBox ID="maintainTxtEndDate" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
                                    <span class="input-group-addon">    
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                          </div>   
                          <div class="col-xs-4">
                            <div class="form-group">
                                <div class="input-group date" id="endTime">
                                    <asp:TextBox ID="maintainTxtEndTime" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-time"></span>
                                    </span>
                                </div>
                            </div>
                          </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-offset-1 col-xs-6">
                            <div class="form-group">
                                <asp:CheckBox ID="maintainChkBoxAllDayEvents" runat="server" CssClass="checkbox" Text="All Day Event" OnClick="document.getElementById('maintainTxtStartTime').disabled = this.checked;document.getElementById('maintainTxtEndTime').disabled = this.checked;" />
                            </div>
                        </div>
                        <div class="col-xs-offset-1 col-xs-4">
                            <div class="form-group">
                                <asp:Button ID="btnMaintainSubmit" runat="server" Text="SUBMIT" 
                                    CssClass="btn btn-group-justified btn-success" />
                            </div>
                        </div>
                    </div>

                </div>

            <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>

这是代码背后的代码。

    protected void txtEventId_TextChanged(object sender, EventArgs e)
    {
        BusinessLogicLayer BL = new BusinessLogicLayer();

        EventId = Convert.ToInt32(txtEventId.Text);

        try
        {
          DataTable dt =  BL.BLGetEventDetails(EventId);

          foreach (DataRow row in dt.Rows)
          {
              StartDate = row["StartDate"].ToString();
              EndDate = row["EndDate"].ToString();
              StartTime = row["StartTime"].ToString();
              EndTime = row["EndTime"].ToString();
              EventDescription = row["EventDescription"].ToString();
              EventType = row["EventType"].ToString();

              if (StartDate.Equals(""))
              {
                  MessageBox.Show("EventId Does Not Exists");
                  maintainTxtStartDate.Text = "";
                  maintainTxtStartTime.Text = "";
                  maintainTxtEndDate.Text = "";
                  maintainTxtEndTime.Text = "";
                  MaintainDropDown.Disabled = true;
              }
              else
              {
                  maintainTxtStartDate.Text = StartDate;
                  maintainTxtStartTime.Text = StartTime;
                  maintainTxtEndDate.Text = EndDate;
                  maintainTxtEndTime.Text = EndTime;
                  MaintainDropDown.Value = EventType;
                  maintainTxtDescription.InnerText = EventDescription;
              }

          }


        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message, "txtEventId_TextChanged", MessageBoxButtons.OK, MessageBoxIcon.Error);
        }
    }

如果我为txtEventId指定了 AutoPostBack =&#34; true&#34; ,那么在我输入值并点击回车后,弹出窗口会从屏幕上消失。如果我设置 AutoPostBack =&#34; false&#34; ,则不会填充值,因为控件不会转到 txtEventId_TextChanged 功能。我不想设置AutoPostBack =&#34; true&#34;因为在回发期间整个页面将重新加载并且模态弹出窗口将消失。我尝试为它设置scriptmanager和updatepanel,但由于我已经在Default.aspx页面中添加了另一个现有的scriptmanager和updatepanel,我无法为其添加新的。

请让我知道我做错了什么以及如何纠正这个问题。非常感谢您的指导。

1 个答案:

答案 0 :(得分:0)

您有两种选择:

  1. RegisterStartupScript

    在方法结束时使用RegisterStartupScript将JS代码发送到客户端,您将把调用发送到您的模态

    ScriptManager.RegisterStartupScript(this, typeof(Page), "callModal", 
    "$('#maintenanceModal').modal();", true);
    

    这是实现目标的最简单方法

  2. PageMethods

    您可以使用PageMethods返回包含您想要显示的值的JSON,这样您就不需要进行回发,并且您将获得所需的信息。请参阅requirements and how to use PageMethods