ASP.NET AJAX AutoComplete not calling code-behind - c#

(Before marking this question as duplicate, I've tried all the other questions, most of them have outdated links and doesn't solve my problem)
I'm trying to make a simple autocomplete function but the Code-Behind is never called.
Login.aspx:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server" autofocus="autofocus"></asp:TextBox>
<cc1:AutoCompleteExtender ID="ACE" runat="server" ServiceMethod="GetCompletionList"
ServicePath="~/App_Code/Common.cs"
TargetControlID="TextBox1"
MinimumPrefixLength="1"
CompletionSetCount="10" >
</cc1:AutoCompleteExtender>
</form>
Common.cs:
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string[] GetCompletionList(string prefixText, int count)
{
return new string[] { "test1", "test2", "test3" }
}

Unfortunately, you cannot use an ASP.NET AJAX page method within a .cs class file unless it derives from the Page class or derives from another class that derives from the Page class (the Page class must be in the inheritance hierarchy). This is the reason that you cannot use ASP.NET AJAX page methods in ASP.NET master pages, because they inherit from the MasterPage class, which is not part of the Page class inheritance hierarchy.
You have, at least, 2 options:
1) Put the GetCompletionList method in your code-behind file Login.aspx.cs and then you can omit the ServicePath property from your auto-complete extender markup.
2) Create a Common.aspx page that will hold ASP.NET AJAX page methods that can be used across pages in your application. Since the only thing in this .aspx file will be static page methods nothing would be rendered if the user navigated to that page, but it does cause confusion for someone that does not know what ASP.NET AJAX page methods are and thinks they should delete a blank page. It could also be confusing for your users if they somehow type in that URL within the address bar of your application.
Now you can have the auto-complete extender's ServicePath property point to the page method in Common.aspx, like this:
ServicePath="Common.aspx"
Note: You can call across .aspx pages for ASP.NET AJAX page methods, which is what allows this Common.aspx approach to be usable.

Related

To get value from user control using ajax

I have datalist in field.ascx and i have a label and textbox in fields.ascx and i am binding textbox and label dynamically in datalist and display in webform.aspx.Now i want to get label text and textbox value in webform.aspx when clicking a button in webform.aspx using ajax.
field.ascx:
<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5" EnableViewState="True">
<ItemTemplate>
<data:Value ID="test" runat="server" />
<ItemTemplate>
</asp:DataList>
Fields.ascx:
<asp:Label ID="lbl" runat="server" />
<asp:TextBox id="tb4" runat="server" />
Webform.aspx
<button onclick="myFunction()">Click me</button>
[WebMethod]
public static string LoadUserControl()
{
using (Page page = new Page())
{
HtmlForm form = new HtmlForm();
UserControl userControl = (UserControl)page.LoadControl("UserControls/field.ascx");
form.Controls.Add(userControl);
using (StringWriter writer = new StringWriter())
{
page.Controls.Add(form);
HttpContext.Current.Server.Execute(page, writer, false);
return writer.ToString();
}
}
}
You are destroying the values in the user control within the following line of your ASP.NET AJAX page method:
using (Page page = new Page())
In reality, you don't have access to the Page object at all within an ASP.NET AJAX page method, because it is static and does not at all interact with the ASP.NET Page Lifecycle.
If you are only going to have one instance of your user control, then you could use jQuery selectors in your myFunction JavaScript function to pull out the values for the Label and TextBox controls (be aware of the container naming that ASP.NET uses for master pages, and the control hierarchy). You can then build up an object literal to pass to the ASP.NET AJAX Page Method via the jQuery .ajax() function.
If you are going to have multiple instances of the user control on your page, then you will be better off using a server-side solution, coupled with the ASP.NET UpdatePanel control to give the illusion of asynchronous calls to the server (read: less screen flickering, because of only a partial postback). In this case, you can have public properties of the values you want to pull out of the user control and your server-side code will have references to each of the user control instances by ID.
So bottom line is that if you do not need to actually use a client-side JavaScript function to make a call to the server, then just use the server-side button click handler to do the logic of getting values from the server-side controls. The water quickly gets muddied when trying to get values out of server-side controls that could have multiple instances.

CKeditor on Textarea implementation

I have implemented a CKeditor from the below link:-
CKEditor But the issue is that, As soon as I register the editor on my page, it gets reflected. I want the same editor just only for my asp.net textbox. What should I do and make change so that It can only be visible to my textbox only. Please help.
See my textbox
<asp:TextBox ID="txtPostdesc" CssClass="form-control" runat="server" ValidationGroup="AddNew" TextMode="MultiLine"></asp:TextBox>
As per the article CKEditor in ASP.Net it described the way of implementing CKEditor with dll.
You would require following things
1. Two dll : CkEditor.dll and CKEditor.NET.dll.
2. CKEditor folder containing all js, css and images.
Register the CKEditor control at the top of your .aspx page such as
<%# Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
Now you will be able to write the CKEditor server control markup such as below
<CKEditor:CKEditorControl ID="txtPostdesc" BasePath="/ckeditor/" runat="server">
</CKEditor:CKEditorControl>
In above I just change the ID as per your textarea ID. Now you can set and get its content via .Text Property in your code behind file i.e.
string str = txtPostdesc.Text;
Hope above explanation works for you.

Issue related to getting ClientID of asp controls in Javascript

I have asp.net webApplication having asp controls.
<asp:HiddenField ID="hdTime" runat="server" />
To Access above control in Javascript i have used $('#ContentPlaceHolder1_hdTime').val('AM');
it works fine in Mozila firefox but in InternetExplorer it takes
$('#ctl00_ContentPlaceHolder1_hdTime').val('AM');
i have also tried
$('#<%= hdTime.ClientID %>')
but above syntext works only on .aspx page but when i use javascript.js file it doesn't find as $('#<%= hdTime.ClientID %>')
so how to access asp controls in .js file??
Thanks
You can set Clientidmode="static" for the control..
<asp:HiddenField ID="hdTime" runat="server" Clientidmode="static"/>
Javascript:
//Accessing control in javascript
var abc=document.getelementbyid('hdTime').value;
Try using static client side ids:
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx
This issue is because the ids generated by webforms are dynamic, so you cannot hard code them. However, webforms 4 introduced static client side ids to solve the issue you are having.
For example, add this attribute to your control: ClientIDMode="Static", and then you can reference your control in JavaScript like this:
$('#hdTime')
If you can't use webforms v4 then you will have to put your JavaScript in the aspx page.
You can use like this : <asp:HiddenField ID="hdTime" runat="server" ClientIDMode="Static" />
you can find the ID of the control, also important is to give ClientIDMode="Static"
var id = Document.getElememtById("hdTime").value;
or
var id = $("#hdTime").val();

Master page containing User Control with AutoCompleteExtender

Brief of Application:
I am creating a website which has a master page , a sub master page and some content pages.
I have created some user controls to display information on the main master page. I have registered those controls directly on my main master page and have specified their position.
I have used some content pages and other master page in ContentPlaceHolder.
Description:
I have a textbox on one of my user control, which i want to use with AutoCompleteExtender to help the user in finding the specific text by displaying him the related results.
Here is the sample piece of code:
<asp:TextBox ID="TxtSource" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender
ID="AutoCompleteSource"
TargetControlID = "TxtSource"
MinimumPrefixLength="1"
ServiceMethod="GetSourceList"
runat="server" UseContextKey="True">
</asp:AutoCompleteExtender>
Code Behind of Custom Control:
[System.Web.Services.WebMethod(), System.Web.Script.Services.ScriptMethod()]
public static string[] GetSourceList(string prefixText, int count, string contextKey)
{
string[] SourceList = {"Star Wars", "Star Trek", "Superman", "Memento", "Shrek", "Shrek II"};
return (from m in SourceList where m.StartsWith(prefixText.ToUpper()) select m).ToArray();
}
I am not using the webservice but the codebehind to call the method.
Issue:
The function in codebehind is never called.
I am aware of the fact that i have to keep the function in aspx file, but with my bad luck i am not adding the control on aspx file but on master file and master page is again treated as a control and not the page.
One solution :
I can add the custom control on every content page.
Problem :
1) No code re-usability, which i want to achieve.
2) Page layout will be changed.
Can there be any other solution, with least code changes?
Try to set the ServicePath of your autocomplete extender.
<asp:TextBox ID="TxtSource" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender
ID="AutoCompleteSource"
TargetControlID = "TxtSource"
MinimumPrefixLength="1"
ServiceMethod="GetSourceList"
ServicePath="yourpage.cs"
runat="server" UseContextKey="True">
</asp:AutoCompleteExtender>

How to call codebehind function without postback with ajax

I have a controller:
<asp:Button OnClick="MyFunction" runat="server" />
I want to be able to call MyFunction without the page reloading. Is this possible with ajax or something? If so how would I do it?
Checkout the ASP.Net instructional videos. Should cover most, if not all, of your questions.
AJAX Videos: The Official Microsoft ASP.NET Site
You have to download Ajax Extensions and install it.
After you do this place instead <asp:Button OnClick="MyFunction" runat="server" /> the following
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Your Text" OnClick="MyFunction" />
</ContentTemplate>
</asp:UpdatePanel>
MyFunction would be a c#/vb function written in your page behind code, not a javascript function. I specified this because i've seen many mistakes that people make regarding this one. OnClick attribute is for c#/vb function and OnClientClick is for javascript function.
For more information regarding how to add ajax functionality to an ASP .NET Page go here
One option is to use page methods.
Add a static method to your page, decorated with the WebMethod attribute:
[WebMethod]
public static void MyMethod(string someParam)
{
}
Enable page methods in your ScriptManager:
<asp:ScriptManager EnablePageMethods="True" ... />
And then you can call it from the client side, using JavaScript (that you can wire to the OnClientClick event of your button):
PageMethods.MyMethod("some value", successCallback, errorCallback);
For more details read the "Calling Static Methods in an ASP.NET Web Page" section on this page:
http://msdn.microsoft.com/en-us/library/bb398998.aspx
Yes you can use Make Client-Side Network Callbacks with Asp.net Ajax using this function you can call your code behind methods without reloading your page. To use this methods you should write your methods as static type.
You can refer this video
http://www.asp.net/ajax/videos/how-do-i-make-client-side-network-callbacks-with-aspnet-ajax
You have one more option using the jQuery Ajax.
The simplest way is to warp your code with an UpdatePanel
There are many examples if you google it.
<asp:Button runat="server" ID="btnShowModal" Text="Show"
OnClick="btnShowModal_Click" />
<asp:Button runat="server" ID="HiddenForModal" style="display: none" />
<ajaxToolKit:ModalPopupExtender ID="Modal1" runat="server"
TargetControlID="HiddenForModal" PopupControlID="PopupPanel" />......it may help u

Categories