Develop Reference

call function in 'code behind' with AJAX in ASP.NET WebForms?

I want to get access to a method in code behind when I clicked an span in my view aspx:
DEFAULT.ASPX VIEW CODE:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<%-- MY SPAN --%>
<span runat="server" onclick="ShowChartSpider(this.id)" id="group_2" style="cursor: pointer" class="pull-right">My Span</span>
<%-- JAVASCRIPT CODE --%>
<script type="text/javascript">
function ShowChartSpider(group_id) {
$.ajax({
type: "POST",
url: "Default.aspx/MethodToCreateChart",
dataType: "json",
data: "{'parameter1':" + JSON.stringify(group_id) + "}",
contentType: "application/json; charset=utf-8",
success: function (data) {
alert("all correct");
},
error: function (data) {
alert("no");
}
}
);
}
</script>
</asp:Content>
DEFAULT.ASPX.VB CODE BEHIND:
<WebMethod()>
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)>
Public Shared Sub MethodToCreateChart(sender As Object, e As EventArgs)
' My code to create the chart .....
End Sub
if I run the page, and inspects the page with the browser to see errors, none appear, but the code does not reach the breakpoint that I put in the method in codebehind.
What I´m doing wrong?
I would appreciate suggestions, thanks.

First check your server allow non HTTPS request.
i had that type of issue and my server didn't allow me to do that.
it so then disable that and test.
Then check the response status.
error: function(xhr, status) {
alert(xhr.status); }
let us know that is the outcome.
--Ruhul

Go to "RouteConfig.vb" under "App_Start" folder.
Change following line
settings.AutoRedirectMode = RedirectMode.Permanent
To
settings.AutoRedirectMode = RedirectMode.Off
i think your method code returning something like this.
Return Default.aspx/MethodToCreateChart
so me your MethodToCreateChart logic.
you can try with below sample method. your internal server error are coming because you are returning somethng from your method.
Public Shared Function MethodToCreateChart(parameter1 As String) As String
Return "Hello " & Environment.NewLine & "The Current Time is: " & _DateTime.Now.ToString()
End Function

I think you should remove 'runat=server' attribute from span tag.

You use aspx file same as ashx files. So have a look at below links:
1. How do you debug ASP.net HTTPHandler
2. Can't debug ASHX handler

use knockout js observable value as variable

I have the following:
<span data-bind="text: total"></span>
from knockout js, how can I pass this value to code behind ?

Carsten was accurate with the ajax call. You'll have an event, possibly from a button click, with a function that does something like,
//html
//... form that adds to total
<span data-bind="text: total"></span>
<button data-bind="click: mySubmit">Submit Total</button>
//js controller
self.total = 0;
self.mySubmit = function(){
$.ajax({
type: "POST",
url: myBackendControllerUrl,
data: self.total,
success: function(){console.log("success!");},
dataType: JSON
});
}
Knockout is a clientside framework. To get your data from the client, to the server, you'll need something like the above. You'll need to create a controller on your server side that can receive this. I hope this helps get you started.

How do I hide .asmx webservice API endpoint in source code?

I am calling .asmx service from inside script tag in aspx page. When I view the page source it's showing my webservice.
How to protect the webservice from expose?
cause when some one view the page source then he can see the web service name as well as its all methods name.
.aspx Page:
<asp:PlaceHolder ID="divBody" runat="server">
<div class="aa-dashboard-wrapper">
<asp:Textbox id="textbox1" runat="server"></asp:Textbox>
</div>
</asp:PlaceHolder>
Here is my script tag, that is placed at the bottom of my aspx page.
$("#textbox1").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/WebService.asmx/webServiceMethod") %>',
data: "{ 'keyword': '" + request.term + "'}",
dataType: "json",
timeout: 20000,
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
},
error: function (response) {
},
failure: function (response) {
}
});
},
select: function (e, i) {
},
minLength: 2
})
</script>

While you can't stop users from seeing the URL of your service, you can stop them viewing the documentation for it - just put this inside the system.web tag of your web.config
<webServices>
<protocols>
<remove name="Documentation" />
</protocols>
</webServices>
See https://support.microsoft.com/en-us/kb/815149 on 'Removing the Documentation Protocol'

The best way is to have a JS file and place your AJAX call there. Even in this case, user can browse and view the JS, but the chances are little less.

There is no way to completely hide your API endpoints from someone who wants to find it. Even if you somehow obfuscate the calling of it in some javascript construction, it will still be visible in Chrome web inspector. And at the most basic level, I can still see it when I intercept the communication with packet sniffers.

Binding dropdownlist without causing postback

I have two textboxes, ID and Name. Based on the combination of these two, my address dropdown should get populated.
I have written an sp to bind items to my dropdown. But the text_changed event of Name textbox causes AutoPostback. I want my dropdownlist to bind automatically when I leave the textbox without causing any refreshing of the page. On page load all 3 should be blank.
Please let me know how to accomplish this using javascript and jquery.
Please excuse for any typing mistakes.

You could either user jQuery Ajax or UpdatePanel
Using JQuery Ajax...
$.ajax({
data: data,
url: "ur url",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (result) {
//ur code to bind data to dropdown
}
error: function OnError(result) {
//ur code
}
});
Using Update Panel you can call server side method to bind data to dropdown
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtBox1" OnTextChanged="txtBox1_TextChanged" AutoPostBack="true" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>

How to automatically run method when the ASP page is loaded?

I have a page which displays the following content when it is loaded:
<div>
<img src="loading.gif" alt="Loading" /> Generating PDF Document, please wait.
<div>
At the same time, I want to run this method the code behind automatically:
private void GeneratePdf()
{
...
}
Lastly, I want to redirect the user to the File.pdf path once the GeneratePdf() method is completed.
How do I do this?

You need to use the Page_Load event as explained here. Additionally, this is a great explanation of the page life cycle. You should take a look at it. Here is some sample code from the above link:
<script runat="server">//This script runs on the server and dishes up some output for the page.
Sub Page_Load
lbl1.Text="The date and time is " & now()
End Sub
</script>
<html>
<body>
<form runat="server">
<h3><asp:label id="lbl1" runat="server" /></h3>//This generates the textbox that will be given a value from the above script.
</form>
</body>
</html>
Hope this helps you!

I suggest to use GeneratePDF with ajax, so you can use like
$.ajax({
url: '/pdf/fiele_to_generate_pdf.aspx',
type: 'POST',
contentType: "application/json; charset=utf-8",
data: $.toJSON(jsonObj),
processData: false,
dataType: 'html',
async: false,
success: function(html) {
window.location.href = '/pdf/example.pdf';
}});
so for loading you can use jquery, there is a good plugin named BlockUI you can use it before your ajax call.

You can use the asp:Timer control to indicate when your code-behind should be called
<asp:Timer runat="server" ID="timer1" Interval="3000" OnTick="timer1_Tick"></asp:Timer>
Then implement the Timer's Tick event. This will be called after 3 seconds (3000ms) as specified in the markup
protected void timer1_Tick(object sender, EventArgs e)
{
GeneratePdf();
Response.Redirect("~/somepath/generatedPDF.pdf");
}