2015-08-12 2 views
0

Это то, чего я пытаюсь достичь здесь. Пользователь нажимает кнопку и появляется всплывающее окно начальной загрузки. Пользователь вводит значение идентификатора события в текстовое поле модального всплывающего окна, и я хочу, чтобы информация о событии отображалась на других полях в модальном всплывающем окне.выборки и заполнение значений в загрузочном модальном всплывающем окне

Я написал функцию под txtEventId_TextChanged событие, и мне удалось получить значение, введенное в текстовое поле идентификатора события. Я смог передать это значение в базу данных и получить соответствующие значения из базы данных.

Моя проблема в том, что я не могу отображать эти данные в модальном всплывающем окне.

Вот 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); 
     } 
    } 

Если я указываю AutoPostBack = «истинный» для txtEventId то всплывающее окно исчезает с экрана после ввода ввода значения и нажмите клавишу ВВОД. Если я установил AutoPostBack = "false", то он не будет заполнять значения, так как элемент управления не будет txtEventId_TextChanged. Я не хочу устанавливать AutoPostBack = "true", потому что во время обратной передачи вся страница будет перезагружаться, а модальное всплывающее окно исчезнет. Я попробовал установить scriptmanager и updatepanel для него, но поскольку у меня уже есть другой существующий scriptmanager и updatepanel, добавленный на странице Default.aspx, я не могу добавить к нему новый.

Пожалуйста, дайте мне знать, что я делаю неправильно, и как исправить это. Ваше руководство высоко ценится.

ответ

0

У вас есть два варианта:

  1. RegisterStartupScript

    Используйте RegisterStartupScript в конце вашего метода для отправки JS кода клиента, вы будете посылать вызов на модальный как этот

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

    Это самый простой способ сделать то, что вы хотите

  2. PageMethods

    Вы можете использовать PageMethods вернуть JSON со значениями, которые вы хотите отобразить, таким образом, вам не нужно делать Postback, и вы получите информацию вы хотите. См. requirements and how to use PageMethods

Смежные вопросы