jquery modal ui ascx asp.net

问题描述:

今天我在asp.net技术中使用用户控件(.ascx)时遇到了一些问题。目前,我有想法将模态jquery移动模态放入ascx的场景。然后根据点击保存数据。这种情况下,我有这个编码jquery modal ui ascx asp.net

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="IndexPanel1.ascx.cs" Inherits="WebPGN.Pages.control.indexPanel1" %> 

<style> 
    .btn-size { 
     width: 50px !important; 
    } 
</style> 

<div> 
    <a href="#myPopup" data-rel="popup" class="ui-btn" style="float: right; background-color: transparent;" id="state" data-position-to="state"><i class="icon-pencil"></i></a> 
    <div data-role="popup" id="myPopup" style="width: 1000px;" data-history="false"> 
     <div class="modal-header"> 
      <h4 style="font-family: '__Helvetica Neue LT Std_5'; font-weight: 500; font-size: 16px;"><i class="icon-edit"></i>&nbsp; Edit Information</h4> 
      <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
     </div> 
     <div class="modal-body"> 
      <div class="col-md-12"> 
       <table class="table table-responsive" border="0" style="border-color: #FFFFFF;"> 
        <tr class="form-group"> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Header Text</td> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;"> 
          <asp:TextBox runat="server" ID="txt_Panel1_Header_Eng" Visible="true" EnableViewState="true" ClientIDMode="Static" /> 
         </td> 
         <td style="width: 3%; border-top: 0px solid #f4f4f4 !important;"></td> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Judul Teks</td> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;"> 
          <asp:TextBox runat="server" ID="txt_Panel1_Header" ClientIDMode="Static" /> 
         </td> 
        </tr> 
        <tr class="form-group"> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Body Text</td> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;"> 
          <textarea rows="6" cols="90" id="txt_Panel1_Body_Eng" runat="server" style="height: 250px;"></textarea> 
         </td> 
         <td style="width: 3%; border-top: 0px solid #f4f4f4 !important;"></td> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Konten Teks</td> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;"> 
          <textarea rows="6" cols="90" id="txt_Panel1_Body" runat="server" style="height: 250px;"></textarea> 
         </td> 
        </tr> 
        <tr class="form-group"> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Tag</td> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;"> 
          <asp:TextBox runat="server" ID="txt_Panel1_Tag_Eng" ClientIDMode="Static"/> 
         </td> 
         <td style="width: 3%; border-top: 0px solid #f4f4f4 !important;"></td> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Label</td> 
         <td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;"> 
          <asp:TextBox runat="server" ID="txt_Panel1_Tag" ClientIDMode="Static"/> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
     <div class="modal-footer" style="border-top: 0px solid #e5e5e5;" id="modal-footer"> 
      <a class="btn btn-primary" href="#myPopup" data-rel="back" style="color: #fff;">Cancel</a> 
      <a class="btn btn-primary" href="#myPopup" ID="btnSaveHomePanel1" data-rel="back" runat="server" style="color: #fff;">Save</a> 
     </div> 
    </div> 
</div> 

出于某种原因,我想用这个ASCX例如将数据发送到服务器端。然而,我有问题,因为当使用asp.net按钮时,事件不会回火。任何人都可以给我更多的建议来完成这种现状。或者我应该使用引导模式,而不是jQuery的移动用户界面?以及如何使用ascx作为模式?非常感谢你:)

PS:我使用

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
+0

您试图在“保存”按钮上单击的代码是什么?此外,我没有看到你的代码中的任何asp按钮 –

+0

设计的模板不是从我这里,所以我很困惑我该怎么做。我已经在编码上添加了asp.net文本框,但我想这是实现它的不好方法。 –

+0

我想要做的就是将数据从输入发送到c#或服务器 –

你必须尝试引导模态像

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<script 
 
    src="https://code.jquery.com/jquery-2.2.4.js" 
 
    integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" 
 
    crossorigin="anonymous"></script> 
 

 

 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<asp:LinkButton ID="btn_SearchCriteria" runat="server" Text="Search Vehicles" data-toggle="modal" data-target="#myModal"><p class="btn btn-primary">Purchasing Tool</p></asp:LinkButton> 
 

 

 
<div aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <h1 style="font-size: 18px; font-weight: 600">Purchasing Tool and Analysis</h1> 
 
       <button type="button" class="close pull-right" data-dismiss="modal" aria-hidden="true">×</button> 
 
      </div> 
 

 
      <asp:Panel ID="pnlSubItems" runat="server" CssClass="modalBox" Width="100%"> 
 
       <asp:Repeater runat="server" ID="repVehicleInfo" OnItemDataBound="repVehicleInfo_ItemDataBound"> 
 
        <ItemTemplate> 
 
         <ul class="media-list"> 
 
          <li class="media"> 
 
           <div class="media-left"> 
 

 
            <img src="../../images/SystemImages/car-avatar.png" style="width: 250px; height: 200px" /> 
 
            <br /> 
 
            <asp:Label ID="lbl_stockno" runat="server" Style="font-weight: 600" Text='<%# Bind("StockNumber") %>'></asp:Label> 
 
           </div> 
 
           <div class="media-body"> 
 
            <%--2001 Holden Astra TS 12/00-12/04--%> 
 
            <h1 class="media-heading" style="font-weight: 600"> 
 
             <asp:Label ID="lbl_heading" runat="server" Text='<%# Bind("Description") %>'></asp:Label></h1> 
 
            <div class="col-sm-8"> 
 
             <table class="table table-responsive"> 
 
              <tr> 
 
               <td>Body Style:</td> 
 
               <td style="font-weight: 600"> 
 
                <asp:Label ID="lbl_bodystyle" runat="server" Text='<%# Bind("BodyType") %>'></asp:Label> 
 
               </td> 
 
              </tr> 
 

 
              <tr> 
 
               <td>Engine:</td> 
 
               <td style="font-weight: 600"> 
 
                <asp:Label ID="lbl_engine" runat="server" Text='<%# Bind("Engine") %>'></asp:Label> 
 
               </td> 
 
              </tr> 
 
              <tr> 
 
               <%-- <td>License No:</td> 
 
             <td style="font-weight: 600"> 
 
              <asp:Label ID="lbl_linceno" runat="server"></asp:Label> 
 
             </td>--%> 
 
               <td>Transmission:</td> 
 
               <td style="font-weight: 600"> 
 
                <asp:Label ID="lbl_transmission" runat="server" Text='<%# Bind("Engine") %>'></asp:Label> 
 
               </td> 
 
              </tr> 
 
              <tr> 
 
               <%-- <td>Reg No:</td> 
 
             <td style="font-weight: 600"> 
 
              <asp:Label ID="lbl_regno" runat="server"></asp:Label> 
 
             </td>--%> 
 
               <td>Odometer:</td> 
 
               <td style="font-weight: 600"> 
 
                <asp:Label ID="lbl_odometer" runat="server" Text='<%# Bind("Odometer") %>'></asp:Label> 
 
               </td> 
 
              </tr> 
 
              <tr> 
 
               <%-- <td>Color:</td> 
 
             <td style="font-weight: 600"> 
 
              <asp:Label ID="lbl_color" runat="server"></asp:Label> 
 
             </td>--%> 
 
               <td>Purchased From:</td> 
 
               <td style="font-weight: 600"> 
 
                <asp:Label ID="lbl_PurchasedFrom" runat="server" Text='<%# Bind("PurchasedFrom") %>'></asp:Label> 
 
               </td> 
 
              </tr> 
 
              <tr> 
 
               <td>Purchase Amount:</td> 
 
               <td style="font-weight: 600">$<asp:Label ID="lbl_PurchaseAmount" runat="server" Text='<%# Bind("PurchaseAmount") %>'></asp:Label> 
 
               </td> 
 
              </tr> 
 
              <tr> 
 
               <td>Sale Amount:</td> 
 
               <td style="font-weight: 600">$<asp:Label ID="lbl_SaleAmount" runat="server" Text='<%# Bind("SalesAmount") %>'></asp:Label> 
 
                <button id="lbtn_makemodel" href="#makemodel" type="button" class="btn btn-sm btn-primary pull-right" data-toggle="modal"> 
 
                 <i class="fa fa-cogs" aria-hidden="true"></i>Make/Model</button> 
 
               </td> 
 

 

 

 
              </tr> 
 
              <tr> 
 
               <td>Estimated Profit:</td> 
 
               <td style="font-weight: 600"> 
 
                $<asp:Label ID="lbl_Estimatedprofit" runat="server" Text='<%# Bind("EstimatedProfit") %>'></asp:Label> 
 
                <button id="lbtn_anaylse" href="#anaylse" type="button" class="btn btn-sm btn-primary pull-right" data-toggle="modal"><i class="fa fa-pie-chart" aria-hidden="true"></i>Anaylse</button> 
 
               </td> 
 
              </tr> 
 
              <tr> 
 
               <td>App Price:</td> 
 
               <td style="font-weight: 600"> 
 
                $<asp:Label ID="lbl_AppPrice" runat="server" Text='<%# Bind("PurchaseAmount") %>'></asp:Label> 
 
               </td> 
 
              </tr> 
 
             </table> 
 
            </div> 
 

 

 
            <div class="col-sm-4"> 
 
             <asp:Repeater runat="server" ID="repPartsDetail"> 
 
              <HeaderTemplate> 
 
               <ul class="list-group"> 
 
              </HeaderTemplate> 
 
              <ItemTemplate> 
 
               <li class="list-group-item"> 
 
                <asp:Label ID="lbl_Partname" runat="server" Text="Engine" /> 
 
                <span class="badge"> 
 
                 $<asp:Label ID="lbl_partprice" runat="server" Text="0" Style="float: right;" /> 
 
                </span> 
 
               </li> 
 
              </ItemTemplate> 
 
              <FooterTemplate> 
 
               </ul> 
 
              </FooterTemplate> 
 
             </asp:Repeater> 
 
            </div> 
 

 
           </div> 
 
          </li> 
 
       
 
         </ul> 
 

 
        </ItemTemplate> 
 
       </asp:Repeater> 
 

 

 
      </asp:Panel> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

首先,增加引导CSS和Bootstrap JS。 然后使用此代码 此代码适合我。就像当我点击链接按钮引导模式显示 您可以使用此Webcontrol任何地方并将数据绑定在ascx.cs文件中的CodeBhind上