Ajax AutoCompleteExtender

  • Thread starter Thread starter Peter
  • Start date Start date
P

Peter

ASP.NET 2.0

I have an AutoCompleteExtender which works fine- I am using name, id pair in
the WebService , but what I am trying to do is: once the user selects an
item from the AutoCompleteExtender I want to automatically retreive data
from the database and populate the fields on the screen.

How do I trigger a server side event after the user selects an item from the
AutoCompleteExtender or retrieve data from database on client side event?



Thank You

Peter
 
Hello Peter,

From your description you are using AutoCompleteExtender and want to
trigger a client or server side (prefered) function when the selected item
is changed, right? If so you can try to set OnClientItemSelected to trigger
a client side function, like below:

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>

<asp:ServiceReference Path="WebService1.asmx" />

</Services>


</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender OnClientItemSelected="Test"
ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1" ServicePath="WebService1.asmx"
ServiceMethod="GetCompletionList" MinimumPrefixLength="1">
</cc1:AutoCompleteExtender>

<%-- Other UI, such as GridView--%>

</ContentTemplate>
</asp:UpdatePanel>

Then in the JavaScript function you can inform the server.

<script type="text/javascript">
function Test(sender,e)
{

__doPostBack("AutoCompleteExtender1",sender._element.value);

}
</script>

aspx.cs:

protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
//Check Request.Form["__EVENTTARGET"] and
Request.Form["__EVENTARGUMENT"]
//Update UI
}
}

Please have a try and let me know if it works.

Regards,
Allen Chen
Microsoft Online Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

Note: MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 2 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions. Issues of this
nature are best handled working with a dedicated Microsoft Support Engineer
by contacting Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------
| From: "Peter" <[email protected]>
| Subject: Ajax AutoCompleteExtender
| Date: Sun, 9 Nov 2008 19:23:12 -0600
| Lines: 18
| X-Priority: 3
| X-MSMail-Priority: Normal
| X-Newsreader: Microsoft Outlook Express 6.00.2900.5512
| X-RFC2646: Format=Flowed; Original
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.5579
| Message-ID: <[email protected]>
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| NNTP-Posting-Host: CPE-72-129-145-58.new.res.rr.com 72.129.145.58
| Path: TK2MSFTNGHUB02.phx.gbl!TK2MSFTNGP01.phx.gbl!TK2MSFTNGP03.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl
microsoft.public.dotnet.framework.aspnet:79536
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| ASP.NET 2.0
|
| I have an AutoCompleteExtender which works fine- I am using name, id pair
in
| the WebService , but what I am trying to do is: once the user selects an
| item from the AutoCompleteExtender I want to automatically retreive data
| from the database and populate the fields on the screen.
|
| How do I trigger a server side event after the user selects an item from
the
| AutoCompleteExtender or retrieve data from database on client side event?
|
|
|
| Thank You
|
| Peter
|
|
|
|
 
Allen Chen said:
Hello Peter,

From your description you are using AutoCompleteExtender and want to
trigger a client or server side (prefered) function when the selected item
is changed, right? If so you can try to set OnClientItemSelected to
trigger
a client side function, like below:

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>

<asp:ServiceReference Path="WebService1.asmx" />

</Services>


</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender OnClientItemSelected="Test"
ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1" ServicePath="WebService1.asmx"
ServiceMethod="GetCompletionList" MinimumPrefixLength="1">
</cc1:AutoCompleteExtender>

<%-- Other UI, such as GridView--%>

</ContentTemplate>
</asp:UpdatePanel>

Then in the JavaScript function you can inform the server.

<script type="text/javascript">
function Test(sender,e)
{

__doPostBack("AutoCompleteExtender1",sender._element.value);

}
</script>

aspx.cs:

protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
//Check Request.Form["__EVENTTARGET"] and
Request.Form["__EVENTARGUMENT"]
//Update UI
}
}

Please have a try and let me know if it works.

Regards,
Allen Chen
Microsoft Online Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

Note: MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 2 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions. Issues of this
nature are best handled working with a dedicated Microsoft Support
Engineer
by contacting Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no
rights.

--------------------
| From: "Peter" <[email protected]>
| Subject: Ajax AutoCompleteExtender
| Date: Sun, 9 Nov 2008 19:23:12 -0600
| Lines: 18
| X-Priority: 3
| X-MSMail-Priority: Normal
| X-Newsreader: Microsoft Outlook Express 6.00.2900.5512
| X-RFC2646: Format=Flowed; Original
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.5579
| Message-ID: <[email protected]>
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| NNTP-Posting-Host: CPE-72-129-145-58.new.res.rr.com 72.129.145.58
| Path: TK2MSFTNGHUB02.phx.gbl!TK2MSFTNGP01.phx.gbl!TK2MSFTNGP03.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl
microsoft.public.dotnet.framework.aspnet:79536
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| ASP.NET 2.0
|
| I have an AutoCompleteExtender which works fine- I am using name, id
pair
in
| the WebService , but what I am trying to do is: once the user selects an
| item from the AutoCompleteExtender I want to automatically retreive data
| from the database and populate the fields on the screen.
|
| How do I trigger a server side event after the user selects an item from
the
| AutoCompleteExtender or retrieve data from database on client side
event?
|
|
|
| Thank You
|
| Peter
|
|
|
|

Thank you for your help!

The suggested solution works, thank you very much!

Is there a way to do the same thing but using Ajax so the user does not see
the page refresh? The solution works fine, but you can see the page refresh
after the user selects the Item from the AutoCompleteExtender, which kind of
defeats using Ajax in the first place.
 
Hi Peter,
Sorry it's my fault. I incorrectly used the "AutoCompleteExtender1" as the
__EVENTTARGET. It should be "UpdatePanel1". Here's the updated version:
Aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
if (Request.Form["__EVENTTARGET"] != null &&
Request.Form["__EVENTTARGET"] == "UpdatePanel1" &&
Request.Form["__EVENTARGUMENT"] != null)
{
this.Label1.Text = "Posted at: " +
DateTime.Now.ToString() + ", Posted Data:" +
Request.Form["__EVENTARGUMENT"];
}
}
}
Aspx:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function Test(sender,e)
{

__doPostBack("UpdatePanel1",sender._element.value);

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>

<asp:ServiceReference Path="WebService1.asmx" />

</Services>


</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender OnClientItemSelected="Test"
ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1" ServicePath="WebService1.asmx"
ServiceMethod="GetCompletionList" MinimumPrefixLength="1">
</cc1:AutoCompleteExtender>
<asp:Label ID="Label1" runat="server" ></asp:Label>

</ContentTemplate>
</asp:UpdatePanel>

</div>
</form>
</body>
</html>

Sorry again for my mistake.
If you have further questions please feel free to ask.
Regards,
Allen Chen
Microsoft Online Support

--------------------
| From: "Peter" <[email protected]>
| References: <[email protected]>
<[email protected]>
| Subject: Re: Ajax AutoCompleteExtender
| Date: Mon, 10 Nov 2008 08:25:32 -0600
| Lines: 142
| X-Priority: 3
| X-MSMail-Priority: Normal
| X-Newsreader: Microsoft Outlook Express 6.00.2900.5512
| X-RFC2646: Format=Flowed; Original
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.5579
| Message-ID: <[email protected]>
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| NNTP-Posting-Host: CPE-72-129-145-58.new.res.rr.com 72.129.145.58
| Path: TK2MSFTNGHUB02.phx.gbl!TK2MSFTNGP01.phx.gbl!TK2MSFTNGP02.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl
microsoft.public.dotnet.framework.aspnet:79562
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
|
| | > Hello Peter,
| >
| > From your description you are using AutoCompleteExtender and want to
| > trigger a client or server side (prefered) function when the selected
item
| > is changed, right? If so you can try to set OnClientItemSelected to
| > trigger
| > a client side function, like below:
| >
| > <asp:ScriptManager ID="ScriptManager1" runat="server">
| > <Services>
| >
| > <asp:ServiceReference Path="WebService1.asmx" />
| >
| > </Services>
| >
| >
| > </asp:ScriptManager>
| >
| > <asp:UpdatePanel ID="UpdatePanel1" runat="server">
| > <ContentTemplate>
| > <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
| > <cc1:AutoCompleteExtender OnClientItemSelected="Test"
| > ID="AutoCompleteExtender1" runat="server"
| > TargetControlID="TextBox1" ServicePath="WebService1.asmx"
| > ServiceMethod="GetCompletionList" MinimumPrefixLength="1">
| > </cc1:AutoCompleteExtender>
| >
| > <%-- Other UI, such as GridView--%>
| >
| > </ContentTemplate>
| > </asp:UpdatePanel>
| >
| > Then in the JavaScript function you can inform the server.
| >
| > <script type="text/javascript">
| > function Test(sender,e)
| > {
| >
| > __doPostBack("AutoCompleteExtender1",sender._element.value);
| >
| > }
| > </script>
| >
| > aspx.cs:
| >
| > protected void Page_Load(object sender, EventArgs e)
| > {
| > if (IsPostBack)
| > {
| > //Check Request.Form["__EVENTTARGET"] and
| > Request.Form["__EVENTARGUMENT"]
| > //Update UI
| > }
| > }
| >
| > Please have a try and let me know if it works.
| >
| > Regards,
| > Allen Chen
| > Microsoft Online Support
| >
| > Delighting our customers is our #1 priority. We welcome your comments
and
| > suggestions about how we can improve the support we provide to you.
Please
| > feel free to let my manager know what you think of the level of service
| > provided. You can send feedback directly to my manager at:
| > (e-mail address removed).
| >
| > ==================================================
| > Get notification to my posts through email? Please refer to
| >
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.
| >
| > Note: MSDN Managed Newsgroup support offering is for non-urgent issues
| > where an initial response from the community or a Microsoft Support
| > Engineer within 2 business day is acceptable. Please note that each
follow
| > up response may take approximately 2 business days as the support
| > professional working with you may need further investigation to reach
the
| > most efficient resolution. The offering is not appropriate for
situations
| > that require urgent, real-time or phone-based interactions. Issues of
this
| > nature are best handled working with a dedicated Microsoft Support
| > Engineer
| > by contacting Microsoft Customer Support Services (CSS) at
| > http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
| > ==================================================
| > This posting is provided "AS IS" with no warranties, and confers no
| > rights.
| >
| > --------------------
| > | From: "Peter" <[email protected]>
| > | Subject: Ajax AutoCompleteExtender
| > | Date: Sun, 9 Nov 2008 19:23:12 -0600
| > | Lines: 18
| > | X-Priority: 3
| > | X-MSMail-Priority: Normal
| > | X-Newsreader: Microsoft Outlook Express 6.00.2900.5512
| > | X-RFC2646: Format=Flowed; Original
| > | X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.5579
| > | Message-ID: <[email protected]>
| > | Newsgroups: microsoft.public.dotnet.framework.aspnet
| > | NNTP-Posting-Host: CPE-72-129-145-58.new.res.rr.com 72.129.145.58
| > | Path: TK2MSFTNGHUB02.phx.gbl!TK2MSFTNGP01.phx.gbl!TK2MSFTNGP03.phx.gbl
| > | Xref: TK2MSFTNGHUB02.phx.gbl
| > microsoft.public.dotnet.framework.aspnet:79536
| > | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
| > |
| > | ASP.NET 2.0
| > |
| > | I have an AutoCompleteExtender which works fine- I am using name, id
| > pair
| > in
| > | the WebService , but what I am trying to do is: once the user selects
an
| > | item from the AutoCompleteExtender I want to automatically retreive
data
| > | from the database and populate the fields on the screen.
| > |
| > | How do I trigger a server side event after the user selects an item
from
| > the
| > | AutoCompleteExtender or retrieve data from database on client side
| > event?
| > |
| > |
| > |
| > | Thank You
| > |
| > | Peter
| > |
| > |
| > |
| > |
| >
|
| Thank you for your help!
|
| The suggested solution works, thank you very much!
|
| Is there a way to do the same thing but using Ajax so the user does not
see
| the page refresh? The solution works fine, but you can see the page
refresh
| after the user selects the Item from the AutoCompleteExtender, which kind
of
| defeats using Ajax in the first place.
|
|
|
 
Allen Chen said:
Hi Peter,
Sorry it's my fault. I incorrectly used the "AutoCompleteExtender1" as the
__EVENTTARGET. It should be "UpdatePanel1". Here's the updated version:
Aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
if (Request.Form["__EVENTTARGET"] != null &&
Request.Form["__EVENTTARGET"] == "UpdatePanel1" &&
Request.Form["__EVENTARGUMENT"] != null)
{
this.Label1.Text = "Posted at: " +
DateTime.Now.ToString() + ", Posted Data:" +
Request.Form["__EVENTARGUMENT"];
}
}
}
Aspx:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function Test(sender,e)
{

__doPostBack("UpdatePanel1",sender._element.value);

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>

<asp:ServiceReference Path="WebService1.asmx" />

</Services>


</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender OnClientItemSelected="Test"
ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1" ServicePath="WebService1.asmx"
ServiceMethod="GetCompletionList" MinimumPrefixLength="1">
</cc1:AutoCompleteExtender>
<asp:Label ID="Label1" runat="server" ></asp:Label>

</ContentTemplate>
</asp:UpdatePanel>

</div>
</form>
</body>
</html>

Sorry again for my mistake.
If you have further questions please feel free to ask.
Regards,
Allen Chen
Microsoft Online Support

--------------------
| From: "Peter" <[email protected]>
| References: <[email protected]>
<[email protected]>
| Subject: Re: Ajax AutoCompleteExtender
| Date: Mon, 10 Nov 2008 08:25:32 -0600
| Lines: 142
| X-Priority: 3
| X-MSMail-Priority: Normal
| X-Newsreader: Microsoft Outlook Express 6.00.2900.5512
| X-RFC2646: Format=Flowed; Original
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.5579
| Message-ID: <[email protected]>
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| NNTP-Posting-Host: CPE-72-129-145-58.new.res.rr.com 72.129.145.58
| Path: TK2MSFTNGHUB02.phx.gbl!TK2MSFTNGP01.phx.gbl!TK2MSFTNGP02.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl
microsoft.public.dotnet.framework.aspnet:79562
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
|
| | > Hello Peter,
| >
| > From your description you are using AutoCompleteExtender and want to
| > trigger a client or server side (prefered) function when the selected
item
| > is changed, right? If so you can try to set OnClientItemSelected to
| > trigger
| > a client side function, like below:
| >
| > <asp:ScriptManager ID="ScriptManager1" runat="server">
| > <Services>
| >
| > <asp:ServiceReference Path="WebService1.asmx" />
| >
| > </Services>
| >
| >
| > </asp:ScriptManager>
| >
| > <asp:UpdatePanel ID="UpdatePanel1" runat="server">
| > <ContentTemplate>
| > <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
| > <cc1:AutoCompleteExtender OnClientItemSelected="Test"
| > ID="AutoCompleteExtender1" runat="server"
| > TargetControlID="TextBox1" ServicePath="WebService1.asmx"
| > ServiceMethod="GetCompletionList" MinimumPrefixLength="1">
| > </cc1:AutoCompleteExtender>
| >
| > <%-- Other UI, such as GridView--%>
| >
| > </ContentTemplate>
| > </asp:UpdatePanel>
| >
| > Then in the JavaScript function you can inform the server.
| >
| > <script type="text/javascript">
| > function Test(sender,e)
| > {
| >
| > __doPostBack("AutoCompleteExtender1",sender._element.value);
| >
| > }
| > </script>
| >
| > aspx.cs:
| >
| > protected void Page_Load(object sender, EventArgs e)
| > {
| > if (IsPostBack)
| > {
| > //Check Request.Form["__EVENTTARGET"] and
| > Request.Form["__EVENTARGUMENT"]
| > //Update UI
| > }
| > }
| >
| > Please have a try and let me know if it works.
| >
| > Regards,
| > Allen Chen
| > Microsoft Online Support
| >
| > Delighting our customers is our #1 priority. We welcome your comments
and
| > suggestions about how we can improve the support we provide to you.
Please
| > feel free to let my manager know what you think of the level of
service
| > provided. You can send feedback directly to my manager at:
| > (e-mail address removed).
| >
| > ==================================================
| > Get notification to my posts through email? Please refer to
| >
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.
| >
| > Note: MSDN Managed Newsgroup support offering is for non-urgent issues
| > where an initial response from the community or a Microsoft Support
| > Engineer within 2 business day is acceptable. Please note that each
follow
| > up response may take approximately 2 business days as the support
| > professional working with you may need further investigation to reach
the
| > most efficient resolution. The offering is not appropriate for
situations
| > that require urgent, real-time or phone-based interactions. Issues of
this
| > nature are best handled working with a dedicated Microsoft Support
| > Engineer
| > by contacting Microsoft Customer Support Services (CSS) at
| > http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
| > ==================================================
| > This posting is provided "AS IS" with no warranties, and confers no
| > rights.
| >
| > --------------------
| > | From: "Peter" <[email protected]>
| > | Subject: Ajax AutoCompleteExtender
| > | Date: Sun, 9 Nov 2008 19:23:12 -0600
| > | Lines: 18
| > | X-Priority: 3
| > | X-MSMail-Priority: Normal
| > | X-Newsreader: Microsoft Outlook Express 6.00.2900.5512
| > | X-RFC2646: Format=Flowed; Original
| > | X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.5579
| > | Message-ID: <[email protected]>
| > | Newsgroups: microsoft.public.dotnet.framework.aspnet
| > | NNTP-Posting-Host: CPE-72-129-145-58.new.res.rr.com 72.129.145.58
| > | Path:
TK2MSFTNGHUB02.phx.gbl!TK2MSFTNGP01.phx.gbl!TK2MSFTNGP03.phx.gbl
| > | Xref: TK2MSFTNGHUB02.phx.gbl
| > microsoft.public.dotnet.framework.aspnet:79536
| > | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
| > |
| > | ASP.NET 2.0
| > |
| > | I have an AutoCompleteExtender which works fine- I am using name, id
| > pair
| > in
| > | the WebService , but what I am trying to do is: once the user
selects
an
| > | item from the AutoCompleteExtender I want to automatically retreive
data
| > | from the database and populate the fields on the screen.
| > |
| > | How do I trigger a server side event after the user selects an item
from
| > the
| > | AutoCompleteExtender or retrieve data from database on client side
| > event?
| > |
| > |
| > |
| > | Thank You
| > |
| > | Peter
| > |
| > |
| > |
| > |
| >
|
| Thank you for your help!
|
| The suggested solution works, thank you very much!
|
| Is there a way to do the same thing but using Ajax so the user does not
see
| the page refresh? The solution works fine, but you can see the page
refresh
| after the user selects the Item from the AutoCompleteExtender, which
kind
of
| defeats using Ajax in the first place.
|
|
|

Thank You very much
This exectly what I needed!!!
 
Back
Top