ascx asp.net中的jquery modal ui答案

【问题标题】：jquery modal ui in ascx asp.netascx asp.net中的jquery modal ui
【发布时间】：2017-04-26 02:11:58
【问题描述】：

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

 <%@ 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 mobile ui？以及如何使用 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>

【问题讨论】：

您在单击“保存”按钮时尝试使用什么代码？我也没有在你的代码中看到任何 asp 按钮
设计的模板不是我的，所以我很困惑我该怎么做。我在编码中添加了 asp.net 文本框，但我想这是完成它的坏方法。
我想要做的是将数据从输入发送到 c# 或者确切地说是服务器
您需要在 ascx 中添加带有runat='server' 的 asc 按钮，并在 ascx.cs 中添加其单击事件。这些值应该在点击事件中的服务器上可用，您可能必须在 ascx.cs 中找到控件或使用全局变量。或者您可以使用 jQuery ajax 和 ashx 来发送值或使用静态方法（虽然不推荐）。
我可以通过 onclick 使用 asp:button 发送它吗？

标签： c# asp.net jquery-mobile bootstrap-modal ascx

【解决方案1】：

你必须尝试像引导模态一样

<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>

首先添加 Bootstrap CSS 和 Bootstrap JS。然后使用此代码这段代码对我有用。就像我点击链接按钮 Bootstrap Modal Show 一样您可以在 ascx.cs 文件中的任何位置使用此 Webcontrol 并在 CodeBhind 上绑定数据

【讨论】：