connectseekers.com

Monday, 4 August 2014

AjaxControlToolkit ModalPopupExtender With AutoCompleteExtender In Asp.Net Using C#.Net

8/04/2014 - By Pranav Singh 0

This article will show you how you can use Ajax Control Toolkit ModalPopupExtender with AutoCompleteExtender In Asp.Net. This article will show to open ModalPopup window and add the AutoComplete Textbox in asp.net.


So for this article first we will create a new asp.net application and add ModalPopupExtender, AutoCompleteExtender, Script Manager and a button control. After adding all the controls your code will look as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteTextboxInAjaxToolkit.aspx.cs"
    Inherits="ProjectDemo_Asp.et.AutoCompleteTextboxInAjaxToolkit" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AjaxControlToolkit ModalPopupExtender With AutoCompleteExtender In Asp.Net Using C#.Net
    </title>
    <style type="text/css">
        .modalpopupbackground
        {
            background-color: #666699;
            filter: alpha(opacity=45);
            opacity: 0.7;
        }
        /*AutoComplete flyout */
       
        .autocomplete_completionListElement
        {
            margin: 0px !important;
            background-color: white;
            color: windowtext;
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            overflow: auto;
            text-align: left;
            list-style-type: none;
        }
       
        /* AutoComplete highlighted item */
       
        .autocomplete_highlightedListItem
        {
            background-color: #ffff99;
            color: black;
        }
        
        /* AutoComplete item */
       
        .autocomplete_listItem
        {
            background-color: window;
            color: windowtext;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button runat="server" Text="Click To Open Popup" ID="Button1" />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="divpopup"
            TargetControlID="Button1" CancelControlID="Button2" BackgroundCssClass="modalpopupbackground">
        </asp:ModalPopupExtender>
    </div>
    <asp:Panel runat="server" ID="divpopup" Style="font-size: 15; background-color: green;
        border: 5 solid yellow; width: 380px; height: 150px; color: White; text-align: center;">
        <br />
        <br />
        <br />
        Search :
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="AutoCompleteAjaxRequest"
            ServicePath="AutoComplete.asmx" MinimumPrefixLength="2" CompletionInterval="100"
            EnableCaching="false" CompletionSetCount="10" TargetControlID="TextBox1" FirstRowSelected="false"
            CompletionListCssClass="autocomplete_completionListElement"
            CompletionListItemCssClass="autocomplete_listItem"
            CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem">
        </asp:AutoCompleteExtender>
        <div style="text-align: center;">
            <br />
            <asp:Button ID="Button2" runat="server" Text="Close" /></div>
    </asp:Panel>
    </form>
</body>
</html>

After this we will create a webservice (.asmx) file and add the below code into it.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.OleDb;

namespace ProjectDemo_Asp.et
{
    ///
    /// Summary description for AutoComplete
    ///
 [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class AutoComplete : System.Web.Services.WebService
    {

        [WebMethod]
        public string[] AutoCompleteAjaxRequest(string prefixText, int count)
        {
            List<string> ajaxDataCollection = new List<string>();
            DataTable _objdt = new DataTable();
            _objdt = GetDataFromDataBase(prefixText);
                if(_objdt.Rows.Count>0)
                {
                    for (int i = 0; i < _objdt.Rows.Count; i++)
                    {
                        ajaxDataCollection.Add(_objdt.Rows[i]["LanguageName"].ToString());
                    }
                }
            return ajaxDataCollection.ToArray();
        }
        ///
        /// Function for retriving data from database
        ///

        ///
        public DataTable GetDataFromDataBase(string prefixText)
        {
            string connectionstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\\bookstore.mdb;Persist Security Info=False;";
            DataTable _objdt = new DataTable();
            string querystring = "select * from ProLanguage where LanguageName like '%" + prefixText + "%';";
            OleDbConnection _objcon = new OleDbConnection(connectionstring);
            OleDbDataAdapter _objda = new OleDbDataAdapter(querystring, _objcon);
            _objcon.Open();
            _objda.Fill(_objdt);
            return _objdt;
        }
    }
}

   
In above code I have used access database. You can use Sql database. Now we have done just check the output.


About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top