Category: Ajax

AutoComplete in ASP.NET using Ajax

Introduction:

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup DropDown like list of words that begin with the prefix typed into the textbox.

Create a new website using ASP.NET Ajax-Enabled Web Site:
Now drag and drop three controls on page. ScriptManager, Textbox, AutoCompleteExtender.

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″%>

<form id=”form1″ runat=”server”>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />

<div>

<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>

<cc1:AutoCompleteExtender ID=”AutoCompleteExtender1″

runat=”server”

ServicePath=”WebService.asmx”

ServiceMethod=”FindName”

MinimumPrefixLength=”1″

TargetControlID=”TextBox1″>

</cc1:AutoCompleteExtender>

</div>

</form>

Now add a new WebService class:
Here is web service code.

Imports System

Imports System.Collections.Generic

Imports System.Web

Imports System.Web.Services

Imports System.Web.Services.Protocols

Imports System.Data.SqlClient

Imports System.Data

Imports System.Data.Common

Imports AtlasTextBoxAutoComplete.DL

Imports System.Collections

<WebService(Namespace:=”http://tempuri.org/&#8221;)> _

<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _

<System.Web.Script.Services.ScriptService()> _

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _

Public Class WebService

Inherits System.Web.Services.WebService

<WebMethod()> _

<System.Web.Script.Services.ScriptMethod()> _

Public Function FindName(ByVal prefixText As String, ByVal count As Integer) As String()

‘return all records whose Title starts with the prefix input string

Dim titleArList As New List(Of String)()

Dim drProducts As SqlDataReader = sqlProductProvider.GetNameList(prefixText)

While drProducts.Read()

Dim strTemp As String = Convert.ToString(drProducts(“Name”))

titleArList.Add(strTemp)

End While

Return titleArList.ToArray()

End Function

End Class

Result will look like this:


I am adding two classes in App_Code folder for database connectivity. You shoudl change your web.config key for database connection string. I am attaching my database in App_Code folder.

AJAX DragPanelExtender Control

Using DragPanel control, you can move your panel one place to another place in a Web page on client site. the web page. The DragPanelEtender control allows you to add drag and drop feature to your controls.

Here are two commong properties of

1 – TargetControlID – The ID of that Panel which should be drag.

2 – DragHandleID – The ID of a control that will serve as the “drag handle” for the panel. When the user clicks and drags this control, the panel will move.

.aspx code

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit”TagPrefix=”cc1″ %>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />

<br />

<cc1:DragPanelExtender ID=”DragPanelExtender1″

runat=”server” TargetControlID=”PanelContainer”

DragHandleID=”PanelBody”>

</cc1:DragPanelExtender>

<div>

<asp:Panel ID=”PanelContainer” runat=”server”CssClass=”dragContainer” Width=”215px” >

<asp:Panel ID=”PanelBody” runat=”server” CssClass=”dragBody”Width=”215px”>

<asp:GridView ID=”GridView1″ runat=”server”

AutoGenerateColumns=”False” DataSourceID=”SqlDataSource1″

AllowPaging=”True” PageSize=”7″ CellPadding=”4″ForeColor=”#333333″

GridLines=”None” Width=”215px”>

<Columns>

<asp:BoundField DataField=”ContactName”HeaderText=”ContactName” SortExpression=”ContactName” />

</Columns>

<FooterStyle BackColor=”#5D7B9D” Font-Bold=”True”ForeColor=”White” />

<RowStyle BackColor=”#F7F6F3″ ForeColor=”#333333″ />

<EditRowStyle BackColor=”#999999″ />

<SelectedRowStyle BackColor=”#E2DED6″ Font-Bold=”True”ForeColor=”#333333″ />

<PagerStyle BackColor=”#284775″ ForeColor=”White”HorizontalAlign=”Center” />

<HeaderStyle BackColor=”#5D7B9D” Font-Bold=”True”ForeColor=”White” />

<AlternatingRowStyle BackColor=”White” ForeColor=”#284775″/>

</asp:GridView>

<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server”ConnectionString=”<%$ ConnectionStrings:C:\USERS\MAHESH\DESKTOP\AUTOCOMPLETE_SRC\ATLASTEXTBOXAUTOCOMPLETE\APP_DATA\NORTHWND.MDFConnectionString%>”

SelectCommand=”SELECT [CompanyName], [ContactName], [Address], [City], [Country] FROM [Customers]”>

</asp:SqlDataSource>

</asp:Panel>

</asp:Panel>

</div>

</form>

<script type=”text/javascript”>

function setBodyHeightToContentHeight() {

document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+”px”;

}

setBodyHeightToContentHeight();

window.attachEvent(‘onresize’, setBodyHeightToContentHeight);

</script>

NOTE: In the above code, make sure to change your connection string.

Ajax AnimationExtender Control

In this article we are going to discuss about AJAX AnimationExtender control.

If you want to use animation to the web pages, then you have to use AnimationExtender control. It provides good animation effect such as moving an ASP Control to a new place, resizing it, modifying its color, or making it fade in or fade out. In this article I m going to use fade in or fade out animation.

The animation behavior can be applied with the following extender (the italic properties are optional, and the ellipses represent a generic animation description

TargetControlID: ID of the target control whose events are used to animate (this is also the default target of the animations)

OnLoad: Generic animation played as soon as the page is loaded.

OnClick: Generic animation played when the target control is clicked.

OnMouseOver: Generic animation played when the mouse moves over the target control.

OnMouseOut: Generic animation played when the mouse moves out of the target control.

OnHoverOver: Generic animation similar to OnMouseOver except it will stop the OnHoverOut animation before it plays.

OnHoverOut: Generic animation similar to OnMouseOut except it will stop the OnHoverOver animation before it plays.

First of all make a new website using Ajax Enabled website. The advantage to using Ajax enabled website is no need to add ScriptManager control on page and no need to add Ajax Control toolkit. Like this:

First of all drag and drop Animation control on page.

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″%>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
<cc1:AnimationExtender ID=”AnimationExtender1″ runat=”server” TargetControlID=”Image1″>
<Animations>
<OnLoad>
<FadeOut Duration=”.5″ MinimumOpacity=”.2″ MaximumOpacity=”1″ />
</OnLoad>
<OnHoverOut>
<Sequence>
<FadeOut Duration=”.5″ MinimumOpacity=”.2″ MaximumOpacity=”1″ />
</Sequence>
</OnHoverOut>
<OnHoverOver>
<FadeIn Duration=”.5″ MinimumOpacity=”.2″ MaximumOpacity=”1″ />
</OnHoverOver>
</Animations>
</cc1:AnimationExtender>
<asp:Image runat=”server” ID=”Image1″ ImageUrl=”~/Sunset.jpg” BorderWidth=”0px”Width=”342px” />

After running result should be look like this:



Now check result on MouseHover on this picture. Result should be look like this:

Message window using VB.NET in ajax

This article is used to show message window in vb.net using ajax. The problem comes when you use vb.net using ajax enables website.. This concept is easy to use in C# but it is not easy in vb.net. I am writing two line code for this message window.

Private Sub DisplayClientError(ByVal errorDesc As String)
Dim script As String = “alert(‘” + errorDesc + “‘);”
ScriptManager.RegisterStartupScript(Me, GetType(Page), “UserSecurity”, script, True)
End Sub ‘DisplayClientError write this code on click event where you want show message window
Protected Sub ClickButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) HandlesClickButton.Click
If TextBox1.Text = “” Then
DisplayClientError(“Enter some text in text box”)
End If
End Sub

Screenshot: