Thursday, January 31, 2013

Connecting Visual Web Parts programmatically  

Visual web parts allow developers to easily design the user interface as they are doing in conventional ASP.Net applications. The main advantage of connected Web Parts is to exchange data between web parts at run time. Here we are going to use two visual web parts one is called Tags as provider web part and other one is called Items as  consumer web part.

Tags web part retrieve all the items from tag list. Tags list have two columns which are tag and connection which is shown below


Items web part which is act as filtering web part to retrieve filtering items from Items List. Item List is shown below.
Now,  When we click tag from item web part, particular connection for the selected tag should pass to the items web part and filtered from Item A and Item B. For this first I m going to create tags web part to get all tags and connection properties from Tags List. (Note - Bind all the tags in link button and pass connections as command argument of this link button in Grid View ). Tags Webpart is shown below

Interface 
Now lets set the connection provider attribute to Tags web part. First define the Interface that will specify the data we wanted pass or exchange from one web part to another web part.

    public interface ITagString
    {
        string TagString { get; set; }
    }

Tag web part - Provider web part
Now in the Tag web part class, you need to implement the TagString property which is a string as you defined in the Interface. Actually the webpart will load the user control to its control collection in the CreateChildControls. 

1- Implement the ItagString Interface
2- Implement the get and set methods of the TagString property of ITagString Interface
3- ConnectionProvider property after the CreateChildControls subroutine. which will expose the interfacing  data to the Consumer web part.

Here you can pass the connection string using Link button command events

Items web part - Consumer web part
In the Item web part , create an object for Interface “ITagString”. The purpose of this variable is to receive/consume data from the other web part. So you can create a web part variable in user control and a user control variable in the web part code and inside CreateChildControls method, assign the web part variable 

1. User control variable to pass the value to ItemsUserControl class
2. Method will get the Interface ref and returns the value passed by provider web part

Now filter the Item list based on this parameter.
1- Reference from Items web part class
2- Label to print passed parameter
3- Filter the Items list based on parameter

Configure the web parts to enable connection (After deployed)
Following steps are shown how to enable the connection from tag web part and items web part.
When you are done, you will end up with 2 web parts on a web parts page that will communicate with each other as you make click on tags.
Enjoy!


1 comment:

  1. Tioga Iron Chef | TITENING CART
    Tioga Iron Chef - titanium rainbow quartz a titanium undertaker Chinese food restaurant in the heart titanium scrap price of the United States. T.I.I. Chef, Asian titanium necklace Artisans, and Food Specialists. smith titanium Visit our website

    ReplyDelete