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> 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>
答
你必须尝试引导模态像
<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上
您试图在“保存”按钮上单击的代码是什么?此外,我没有看到你的代码中的任何asp按钮 –
设计的模板不是从我这里,所以我很困惑我该怎么做。我已经在编码上添加了asp.net文本框,但我想这是实现它的不好方法。 –
我想要做的就是将数据从输入发送到c#或服务器 –