Click here to Skip to main content
15,868,141 members
Articles / Web Development / ASP.NET
Article

ASP.NET ListView Item Delete Confirmation using jQuery Colorbox

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
11 Oct 2013CPOL 9.4K  
Performing ASP.NET ListView Item Delete Confirmation using jQuery Colorbox.Here I use Google Hosted jQuery Library because it serve jQuery to users

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

Performing ASP.NET ListView Item Delete Confirmation using jQuery Colorbox.

Here I use Google Hosted jQuery Library because it serve jQuery to users directly from Google’s network of datacenters. Doing so has several advantages over hosting jQuery on your server(s): decreased latency, increased parallelism, and better caching.

Then you need to download jQuery Colorbox from https://github.com/jackmoore/colorbox

You can find jQuery colorbox examples here http://www.jacklmoore.com/colorbox/

Solution

STEP 1: You need to add the jQuery and Colorbox inside the <head> tag

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

STEP 2: Write jQuery function for inline dialog box

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

STEP 3: ASP.NET ListView Item

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

If you want to discuss more about this please visit http://www.MenonOn.Net/

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.

The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
This is a Collaborative Group

755 members

Comments and Discussions

 
-- There are no messages in this forum --