Ajax ModalPopupExtender control sample in ASP.NET

ModalPopupExtender is a very useful control in Ajax Control Toolkit. It's used to display content as a modal dialog box. Here when the user clicks the "Show" button a panel will be displayed as a modal dialog. That panel has a "Hide" button. When the user clicks the hide button the modal dialog will be closed. use your creativity to display the modal dialog box more interactively using CSS.
Namespace:

 using AjaxControlToolkit;  

Design Code:

 <asp:Button ID="btn_Show" runat="server" Text="Show" OnClick="btn_Show_Click" />  
 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
 <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" TargetControlID="HiddenField1" BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender>  
 <asp:HiddenField ID="HiddenField1" runat="server" />  
 <asp:Panel ID="Panel1" runat="server">  
   <div style="width: 200px; height: 150px; background-color: yellow;">  
       <asp:Button ID="btn_Hide" runat="server" Text="Hide" OnClick="btn_Hide_Click" />  
   </div>  
 </asp:Panel>  

C# Code:

 protected void btn_Show_Click(object sender, EventArgs e)  
 {  
    this.ModalPopupExtender1.Show();  
 }  
 protected void btn_Hide_Click(object sender, EventArgs e)  
 {  
    this.ModalPopupExtender1.Hide();  
 }  

CSS code:

 .modalBackground  
 {  
   background-color: Gray;  
   filter: alpha(opacity=70);  
   opacity: 0.7;  
 }  

Note: you have to add Ajax Controll Toolkit in project.

Ajax AutoCompleteExtender control sample in ASP.NET

It this Auto Complete Extender sample, when you enter a cursor in the TextBox the code behind list of values will be displayed in text box as a dropdown. For this sample you need to add Ajax Controll Toolkit in your application.
Design Code:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
<cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" TargetControlID="TextBox1" ServiceMethod="GetCountries()" MinimumPrefixLength="1" CompletionSetCount="12" CompletionInterval="500" EnableCaching="true">  
</cc1:AutoCompleteExtender>  

C# Code:

[WebMethod]  
[System.Web.Script.Services.ScriptMethod()]  
public static List<string> GetCountries()  
{  
    List<string> CountryNames = new List<string>();  
    CountryNames.Add("apple");  
    CountryNames.Add("orange");  
    CountryNames.Add("mango");  
    CountryNames.Add("banana");  
    return CountryNames;  
}  

Ajax Rating control sample in ASP.NET

In this post am gonna provide a simple Ajax rating control sample. When u change the rating by clicking the Star, the value will be displayed in a Label control. It will be useful when you develop a shopping cart kind of application. I have also attached the star images necessary for this sample.
Design Code:

<cc:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
</cc:ToolkitScriptManager>  

<asp:UpdatePanel ID="UpdatePanel1" runat="server">  
    <ContentTemplate>  
        <cc:Rating ID="Rating1" runat="server" MaxRating="5" CurrentRating="1" CssClass="ratingStar" StarCssClass="ratingItem" EmptyStarCssClass="Empty" AutoPostBack="True" OnChanged="Rating1_Changed1">  
        </cc:Rating>  
    </ContentTemplate>  
</asp:UpdatePanel>  

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>  

C# Code:

const int RATING1_MINIMUM = 1;  
const int RATING1_MAXIMUM = 5;  
protected void Page_Load(object sender, EventArgs e)  
{  
    if (!IsPostBack)  
    {  
        Evaluate_Rating1(Rating1.CurrentRating);  
    }  
}
  
public void Evaluate_Rating1(int value)  
{  
    Label1.Text = EvaluateRating(value, Rating1.MaxRating, RATING1_MINIMUM, RATING1_MAXIMUM);  
}  

public static string EvaluateRating(int value, int maximalValue, int minimumRange, int maximumRange)  
{  
    int stepDelta = (minimumRange == 0) ? 1 : 0;  
    double delta = (double)(maximumRange - minimumRange) / (maximalValue - 1);  
    double result = delta * value - delta * stepDelta;  
    return FormatResult(result);  
}  

public static string FormatResult(double value)  
{  
    return String.Format("{0:g}", value);  
}
  
protected void Rating1_Changed1(object sender, AjaxControlToolkit.RatingEventArgs e)  
{  
    Evaluate_Rating1(int.Parse(e.Value));  
}  

CSS Code:

.ratingStar  
{  
    white-space:nowrap;  
    margin:1em;  
    height:14px;  
} 
 
.ratingStar .ratingItem 
{  
    font-size: 0pt;  
    width: 13px;  
    height: 12px;  
    margin: 0px;  
    padding: 0px;  
    display: block;  
    background-repeat: no-repeat;  
    cursor:pointer;  
}  

.ratingStar .Filled 
{  
    background-image: url(../images/ratingStarFilled.png);  
}  

.ratingStar .Empty 
{  
    background-image: url(../images/ratingStarEmpty.png);  
}  

.ratingStar .Saved 
{  
    background-image: url(../images/ratingStarSaved.png);  
}  

Images: