Modal Popup in a ListView

by Albert Mutangiri 5. April 2010 03:37

In this Demo i will explain how one can take advantage of the asp.net ajax modal popup extender to diplay related data in master detail format. With the help of Asp.net Ajax Controltoolkit, this toolkit offers some of the most powerfull extenders that can be easily pluged into your project and take advantage of ajax capabilities without chaining lots of code. Download the ControlToolkit here

I've created an empty website. In this project i've added a LINQ to SQL data model to the Northwind Customers and Orders tables. This is a default example database that's installed when you install sql server, if you don't have it, you can alternatevely download it here. Our main objective is to display customer details in a listview and drill down to the orders for a specific customer. I will use two user controls - customer.ascx and customerorders.ascx and one default.aspx file.

I have also created a custom database helper class that allows us to do the usual Create, Update, Delete tasks. In this Helper class, I have static functions addNewEntity for example - Is a generic function that takes advantage of the powerfull generic C# constructs where one can pass parameters to types - addNewEntit<T> accepts a type and that type is of class type - as represented by the contraint - where T: class. In this case NorthwindDataContext allows us to query our LINQ to SQL data model.

public static NorthwindDataContext getEntityContext(){
        return  new NorthwindDataContext(ConfigurationManager.ConnectionStrings[1].ToString());
    }
    public static void addNewEntity<T>(T obj) where T: class
    {
        using (var db = getEntityContext())  
        {
            db.GetTable<T>().InsertOnSubmit(obj);
            db.SubmitChanges();
        }
    }

In the customers user control i've added a listview control with two templates - layout template and item template. A listView control is one of the most flexible controls when it comes to displaying tabulated data , it's like a datagrid on steroids. You can define how you want your listview to be rendered by manipulating a bunch of templates that ships with this control. In this case i have only two template fields - one is for defining how many columns we're going to display and the other one defines the Items to be bound to this control.

In the customers user control, we bind the list of customers, in this case by using LINQ to SQL, we're actually dealing with an enumerable list of customers. This raises the level of abstraction for data programming, thus helping to eliminate the impedance mismatch between data models and between languages that application developers would otherwise have to deal with. Eliminates all the plumbing work associated with casting types to appropriate data types,  and the code is pretty much easy to understand, I mean this easy to understand  =>

using (var context = DatabaseHelper.getEntityContext())
   {
                var customers = context.Customers.ToList();
                if (customers.Count > 0)
                {
                    lvCustomers.DataSource = customers;
                    lvCustomers.DataBind();
                }               
   }

We will add reference to the controltoolkit both user controls.


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>


In the customers user control we will add a panel and set its visibility to false, this will be the target control for the modal popup extender control, This panel will host our custom user control - customer order details and note a hidden button as well - this will be used by this extender as a TargetControl. Css Popupbody is applied to the panel and the ModalBackground is for the popup extender.


<asp:Panel ID="pnlOrderDetail" runat="server" CssClass="PopupBody" Width="750px"  Style="display: none">       <uc1:customerorders ID="customerorders1" runat="server" />   </asp:Panel> <asp:Button ID="btnOrderDetail" runat="server" Style="display: none" /><ajaxToolkit:ModalPopupExtender ID="mdlOrderDetailView" runat="server" TargetControlID="btnOrderDetail"    PopupControlID="pnlOrderDetail" BackgroundCssClass="modalBackground" />

To open the popup extender we need to fire its show() Method, In this case we will do this on the ListView Item_Commad Event. User Controls in asp.net can fire events that can be handled by the host page or another user control as well. In this demo, our modal popup control will fire events on paging as well as on deleting an item in the list so that we keep the popup open, and only close it when needed.


/*  Events defined in the popup control for customer order details */
    public event EventHandler evtClosePopup;
    public event EventHandler evtKeepPopOpen;
    public event EventHandler evtDeleteItem;


/* The customers control handles events fired by customer orderdetails user control.*/
    customerorders1.evtClosePopup += new EventHandler(customerorders1_evtClosePopup);
    customerorders1.evtKeepPopOpen += new EventHandler(customerorders1_evtKeepPopOpen);
    customerorders1.evtDeleteItem += new EventHandler(customerorders1_evtDeleteItem);


/* to show the popup control we will call the mdlOrderDetailView.Show() method */
protected void lvCustomers_ItemCommand(object sender, ListViewCommandEventArgs e)
{
   switch (e.CommandName)
    {
            case "ViewOrderDetails":
                var customerId = e.Item.FindControl("lblCustomerID") as Label;
                customerorders1.customerID = customerId.Text;
                customerorders1.setCustomerOrderDetail();
                mdlOrderDetailView.Show();
                 break;   

    }
}


And the final result, You can download source files on this link ListViewSample.rar (356.16 kb)


Tags:

ASP.NET | C# | LINQ

MVC vs ASP.NET Webforms

by Albert Mutangiri 3. April 2010 03:32

I've been coding asp.net web apps using web forms for so long now, I mean since the early releases of .net framework and to be straight to the point webforms rock! Although this doesn't sound revolutionary, the fact that asp.net webforms makes building web applications quite handy by abstracting the complexities when dealing with things like application state, does this really mean we're all going to dump webforms for MVC??

Yes MVC is pretty sexy, it's a fix to the issues we have with web forms - refering to bloated ViewState and it's pesky postback model, so what happens when one needs an application state mechanism? Are we going to re-invent the weel? I really don't see the idea, this goes down to the idea of choosing the right technology for the right job.

Tags:

ASP.NET

About Me

mage.axd?picture=2012%2f4%2fbert.jpg

Hi, My name is Albert Mutangiri, I am a software developer currently interested in software design, integration, .net technologies and Java. I'm currently developing enterprise applications for business process automation using Java & .Net Technologies.

 

I Code Java

PSNetwork


bertoncaffeine

Playing
17 0 1 0 18
13 6 0 0 19
4 0 0 0 4
22 1 0 0 23
0 0 3 0 3

Tag cloud