Ajax Update master page from content Page

Hi,
In this blog post we are going to see how can we update the master page from content page using ajax updatepanel in ASP.NET.
The sample website we are going to build will have a content page which allows to change the header of the website(which is present in master page).


The tasks involved in creating this website are as follows:
1. Create an updatepanel in masterpage which holds the website header.
2. Create a method in MasterPage codebehind which changes the website header.
3. Create the content page with master page reference and an update panel which holds controls to triggers the header change.
4. Call the MasterPage method from content page.
1. Create an updatepanel in masterpage which holds the website header.

<div class="title">
<h1>
<asp:UpdatePanel ID="UpdatePanelWebsiteHeader" runat="server"
ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblWebsiteHeader" runat="server" Text="Label">
My ASP.NET Application
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>                    
</h1>
</div>

Make Sure the two properties of UpdatePanel "ChildrenAsTriggers" is set to false and "UpdateMode" is set to conditional, to prevent the unneccessary updation of updatepanel from its child controls.
2. Create a method in MasterPage codebehind which changes the website header.

public void ChangeWebsiteHeader(string newHeader)
{
lblWebsiteHeader.Text = newHeader;
/* Calling the Update method of UpdatePanel will trigger 
the updation of the Updatepanel */
UpdatePanelWebsiteHeader.Update();
}

3. Create the content page with master page reference and an update panel which holds controls to triggers the header change.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ MasterType VirtualPath="~/Site.master" %>

<asp:UpdatePanel ID="UpdatePanelChangeHeader" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<p>
Enter the Website Header: <asp:TextBox ID="txtHeader" runat="server" />
</p>
<asp:Button ID="btnChangeHeader" runat="server" Text="Change Header" 
onclick="btnChangeHeader_Click" />
</ContentTemplate>
</asp:UpdatePanel> 

4. Call the MasterPage method from content page.

protected void btnChangeHeader_Click(object sender, EventArgs e)
{
Master.ChangeWebsiteHeader(Server.HtmlEncode(txtHeader.Text));
}

Summary:
In this blog we have seen how can we update the master page from the content page using ajax update panel. You can download the source code from here

DropDownList manipulation using jQuery

In this blog post we are going to see how can we manipulate a dropdownlist using jQuery. Here is the brief overview what we are exactly going to do.

1. Dynamically populating the dropdownlist
2. Handling the item change event of a dropdownlist
3. Getting the value and the text of the dropdownlist selected item
4. Programmatically setting the item of the dropdownlist

1. Dynamically populating the dropdownlist

jQuery Code:

$(document).ready(function () {
var myCollection = {
‘IN’: ‘India’,
‘AUS’: ‘Australia’,
‘ENG’: ‘England’
};
loadDropDownList(myCollection);
}); 

function loadDropDownList(collection) {
$.each(collection, function (index, value) {
var listItem = $(””).val(index).html(value);
$(”#countries”).append(listItem);
});

}

HTML:

Countries: 

Code Explained:

The function loadDropDownList will take a collection (a key-value pair array) and populate the dropdownlist “countries”. “$.each” is a jQuery function which iterates the array item by item and calls the “function(index,value)” for each item where index would be the item’s key and value would be the item’s value. Then the list item html markup is created for the list item and appended to the dropdownlist

2. Handling the item change event of a dropdownlist


jQueryCode:

$(document).ready(function () {
$(”#countries”).change(function () {
// Place your code here
});
}); 

Code Explained:

The jQuery API offers lot of useful functions to operate with the html form elements. One of such function is “change()” which will called whenever the item value is get changed.

3. Getting the value and the text of the dropdownlist selected item

jQueryCode:

$(document).ready(function () {
$(”#countries”).change(function () {
$(”#countryValue”).text($(”#countries”).val());
$(”#countryText”).text($(”#countries > option[selected]”).html());               
});
}); 

HTML:

Selected Country’s Text:  
Selected Country’s Value:  

Code Explained:

The jQuery code mentioned above will set the two span labels “countryValue” and “countryText” with the value and text of the selected item in the “countries” dropdownlist, when we select an item in the “countries” dropdownlist. The jQuery function “val()” enable us to find out the value of a form element, in our case we have utilized it to get the value of the “countries” dropdownlist. To get the selected item’s text we have to use the child and attribute selector together as a selector. “#countries > option[selected]” – will selects all option child elements(with the attribute selected) of item with the id “countries”. “html()” retrieves the html of the selected element. “text(value)” will set the text of the selector.

4. Programmatically setting the item of the dropdownlist

jQueryCode:

$(document).ready(function () {
$(”#btnIn”).click(function () {
$(”#countries”).val(’IN’);
});
}); 

HTML:

Code Explained:

We can programmatically select an item in the dropdownlist by setting its value.


Conclusion:

In this blog we have seen how we manipulate a dropdownlist using jQuery. You can download the source code and view the demo of this sample post here.

Creating a webpage like iGoogle using jQuery

Would you like to create a webpage like iGoogle (www.google.co.in/ig)??

This blog post is for you!!

I hope you are aware of the following stuffs which are the building blocks of this blog post.
1.HTML
2.CSS
3.jQuery

Let us design the page using “Divide and Conquer” Approach. The tasks involved are
1.Defining the webpage layout using HTML
2.Style the webpage and Widgets(Sample iGoogle Mock up Widgets) using CSS
3.Add the drag and drop functionality using jQuery.

Task 1: Defining the webpage layout using HTML
The HTML is very straight forward. Entire webpage contents have been placed inside a div with the id “iGoogle”. Then each column (iGoogle uses three column layout) is defined by a div element with the id representing the corresponding columns. These columns act as a placeholder for Widgets. Each widget defined as a div element which contains two div elements inside it which represents the header and the body of the Widgets

Widget 1





Widget 2





Widget 3







Widget 4







Widget 5





Widget 6

Task 2: Style the webpage and widgets
Now we have the HTML Layout ready. Our next task would be applying style to the webpage and the widgets using CSS.

/* Entire Page has been divided into 3Columns. 
Note: iGoogle Page has 3 columns */
#column1,#column2,#column3 
{
display:inline-block;
float:left;
width: 33%;            
height: auto;            
text-align:center;

padding-bottom: 100px;
}

/* Css Classes for Entire Widget */

.Widget 
{         
margin: 10px;
margin-left: auto;
margin-right: auto;
width: 95%;
min-height: 200px;
border: 1px solid Black;
}


/* Css Classes for Widget Headers */

.WidgetHeader 
{
height: 25px;    
cursor: move; 
text-align: left;
padding-left: 3px;
color: White;
font-weight: bold;                      
}        

.GreenWidgetHeader 
{
background-color:Green;
}

.GrayWidgetHeader 
{
background-color:Gray;
}

.PurpleWidgetHeader 
{
background-color:Purple;
}

/* Css Classes for Widget Body */
.WidgetBody 
{
min-height: 175px;
height:auto;
background: #F0F0F0;
}

/* Placeholder while dragging the widget using jQuery*/
.ui-sortable-placeholder { 
border: 1px dashed black; 
visibility: visible !important; 
height: 50px !important; 
}
.ui-sortable-placeholder * { visibility: hidden; }

.footer 
{
clear:both;
display:block;                                    
position:absolute;         
color: Green;                
bottom: 5px;
right: 5px;
}       

Task 3: Add the drag and drop functionality using jQuery
jQuery offers a rich set of functionality which can be implemented by less lines of coding. With jQuery you can “write less and do more”. All you need to refer the jQuery API files in your javascript and make use of the functionality it provides. To implement the drag and drop functionality we need the following jQuery library files which can be downloaded from the locations mentioned in the “src” attribute

Now we have the necessary jQuery libraries to implement the drag and drop functionality and all set for implementing the drag and drop support. Here is the code part which implements the drag and drop functionality.

Yes!! That’s it!! Just three function calls and seven lines of coding!!
Now you can drag and drop the widgets and play!!

Well, let me explain the jQuery code
The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. Here in our case the selected elements refer to “column1, column2, colum3” which are the placeholders of the widgets. This sortable plugin has many optional arguments which define how drag and drop should be done. “connectWith” option allows drag and drop between the columns. i.e., Elements (Widgets in our case) inside the column1 or column2 or column3 can be dragged and dropped on column1 or column2 or column3. “handle” option specifies the element which can be used to drag the widget between the columns. “opacity” option defines the transparency of the widget while dragging. The “disableSelection()” function disable text selection in a widget which often occur while dragging a mouse across a widget. Reference: http://docs.jquery.com/UI/Sortable

Summary:
To keep the blog post simple, I didn’t implement the persistence of the widget positions. So widgets should not retain its positions when you refresh the page. You can see the source code of this blog post Here

Thanks
Tamizhvendan S