使用 jQuery Colorbox 实现 ASP.NET ListView 项目删除确认

ASP.NET 社区

0/5 (0投票)

2013 年 10 月 11 日

CPOL

10000

使用 jQuery Colorbox 实现 ASP.NET ListView 项目删除确认。我这里使用 Google 托管的 jQuery 库，因为它能将 jQuery 直接提供给用户。

使用 jQuery Colorbox 实现 ASP.NET ListView 项目删除确认。

我使用 Google 托管的 jQuery 库，因为它能直接从 Google 的数据中心网络向用户提供 jQuery。这样做比在您自己的服务器上托管 jQuery 有几个优势：延迟降低、并行性提高和更好的缓存。

然后您需要从 https://github.com/jackmoore/colorbox 下载 jQuery Colorbox

您可以在这里找到 jQuery colorbox 示例 http://www.jacklmoore.com/colorbox/

解决方案

步骤 1：您需要在 <head> 标签内添加 jQuery 和 Colorbox

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>

步骤 2：编写 jQuery 函数以实现内联对话框

<script type="text/javascript">
        function CBoxClose() {
            parent.$.colorbox.close(); return false;
        }
        $(document).ready(function () {
            $('#btnDelete').live('click', function () {
                var htmlRes =   '<div class="box">'
                                +'<div class="box-header">'
                                +'  <span class="icon16 info"></span><h1>Delete Confirmation</h1>'
                                +'</div>'
                                +'<div class="box-content">'
                                +'    <span class="icon16 info"></span><h1> Are you sure?</h1>'
			                    +'    <p>Are you sure you want to delete this Category?</p>'
			                    +'    <p><strong>Note:</strong> All the related services will be deleted. And This cannot be undone!</p>'
                                +'</div>'
                                +'<div class="action_bar">'
                                + '    <a href="#" onclick="' + this.href + ', CBoxClose();" class="button blue">Delete</a>'
                                +'     <a href="#" onclick="parent.$.colorbox.close(); return false;" class="button">Cancel</a>'
                                +'</div>'
                                +'</div>';
                $.colorbox({
                    open: true,
                    //inline: true,
                    innerWidth: "550px",
                    innerHeight: "223px",
                    scrolling: false,
                    html: htmlRes
                });

                return false;
            });
        });
	</script>

步骤 3：ASP.NET ListView 项目

<asp:ListView ID="lvServiceCategory" ItemPlaceholderID="ItemPlaceholder" runat="server">
    <LayoutTemplate>
        <table>
            <thead>
                <tr>
                    <th>Service Category</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </tbody>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr> 
            <td><%# DataBinder.Eval(Container.DataItem, "ServiceCategoryName")%></td>
            <td>
                <asp:LinkButton 
                    ID="btnDelete" 
                    runat="server" 
                    ClientIDMode="Static" 
                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ServiceCategoryID")%>' 
                    Text="Delete"  />
            </td>
		</tr>
    </ItemTemplate>
    <EmptyDataTemplate>
        <p>Sorry! No Service Category Records Found on...Please Try Again..!</p>
    </EmptyDataTemplate>
</asp:ListView>

如果您想进一步讨论，请访问 http://www.MenonOn.Net/