Jquery ajax not calling server side function - javascript

I have solution structure as:
I want to call recommendationProcess function from CTL_RateRecommendationDetails.ascx.cs from
CTL_RateRecommendationDetails.ascx
So i written code as:
$.ajax({
type: "POST",
url: "/UserControls/CTL_RateRecommendationDetails.ascx/recommendationProcess",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(value) {
alert(value.d);
},
error: function(e) {
alert("Ajax Error" + JSON.stringify(e));
}
});
But every time it comes in error block.
I have tried with :
url: "/CTL_RateRecommendationDetails.ascx/recommendationProcess",
And
url: "CTL_RateRecommendationDetails.ascx/recommendationProcess",
But its not calling function.
[System.Web.Services.WebMethod]
public static void recommendationProcess()
{
}

You can't call code behinds of user controls from JQuery Ajax
Ref : http://forums.asp.net/t/1423555.aspx
Using jQuery AJAX to call ASP.NET function in control code-behind instead of page code-behind
how-to-access-server-side-method-in-ascx-control-using-jquery-ajax-method

Related

Cannot send data from aspx file to code behind using $.ajax({ type: "POST", using VS2017 C#

I'm using web-forms to collect data from a form and then send the data to the code-behind to send to an API. Using a button I'm calling a JavaScript method which collates the data and then sends to my aspx.cs file to send to the API. The Html code for the button is
<button class="search btn" ID="btnSearch" onclick="searchApi(); return false;"><i class="fas fa-search"></i>Search</button>
This runs the searchAPI() function which works and creates a concatenated string called SearchData. The Javascript code looks like this
var searchString = JsonData;
var trimsearchString = searchString.replace(/,/g, '');
$.ajax({
type: "POST",
url: 'Default.aspx/GetApi',
data: searchString,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert('success');
},
error: function (errordata) {
console.log(errordata);
alert(errordata);
}
});
The method GetAPI in my Default.aspx.cs file is never called. The method code is
[System.Web.Services.WebMethod]
public static void GetApi(string searchData)
{...
The success: function (data) returns success but the code behind method is never called, can someone please tell me what I am missing.
fix the ajax data, it seems that method with this parameter can' t be found
$.ajax({
type: "POST",
url: 'Default.aspx/GetApi',
data: { searchData: trimsearchString},
//or if it is still problem, you can even try
data: JSON.stringify( { searchData: trimsearchString}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert(data);
},
error: function (errordata) {
console.log(errordata);
alert(errordata);
}
});
and your webmethod should return something
[WebMethod]
public static string GetApi(string searchData)
{
return searchData
}

Submitting Ajax request from external javascript file in ASP.NET MVC

I am trying to submit an ajax request from an external JavaScript file in ASP.NET MVC. I'm getting a 500. What am I doing wrong?
Ajax call (From external JS file)
$.ajax({
type: "POST",
url: '/Home/AjaxEndpoint',
data: { jsonData: "testing" },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
Controller Action Method (That should be catching the request)
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpGet]
public void AjaxEndpoint()
{
var thing = 1 + 2;
}
// AJAX endpoint for GetProducts.js
[HttpPost]
public void AjaxEndpoint(string jsonData)
{
var thing = 1 + 2;
}
}
Error I'm getting
You either need to remove the contentType option
$.ajax({
type: "POST",
url: '/Home/AjaxEndpoint',
data: { jsonData: "testing" },
dataType: "json",
success: successFunc,
error: errorFunc
});
or alternatively, stringify the data
$.ajax({
type: "POST",
url: '/Home/AjaxEndpoint',
data: JSON.stringify({ jsonData: "testing" }),// modify
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
Your ajax call needs to be to an ActionResult in the controller, The controller performs and returns the data to the page
[HttpPost]
public ActionResult ajaxcall(string ids)
{
String Data = code to perform
return Json(Data);
}
this is the basic idea. Javascript makes the call and uses the json data returned on the clients page

Calling server side function from client side not working

Here page1ClientSideFn() is a client side function of Page.aspx. In this function I want to call the server side method page2ServerSideFn() of another page Page2.aspx.cs. Is there any problem with the below client side code? It's not working. Should I modify the ajax
function page1ClientSideFn() {
$.ajax({
type: "POST",
url: "Page2.aspx.cs/page2ServerSideFn",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
alert("success");
},
Error: function () {
alert("Error");
}
});
}
Your url looks wrong.It should not be page codebehind file.url: "Page2.aspx/page2ServerSideFn",
Also ensure page2ServerSideFn is public and static method.You can use chrome dev toolbar network tab to monitor your resquest you are sending.

Calling a C# method from .js file

I have a aspx page and in that i have method UpdateScreenAlertStatus();
I want to have a file called dtml.js and in that i have function openmodelpopup().
I want to call UpdateScreenAlertStatus(); in javscript method openmodelpopup().
function MyMethod() {
$.ajax({
type: "POST",
url: "abc.aspx/UpdateScreenAlertStatus ",
contentType: "application/json; charset=utf-8",
dataType: "json"
});
}
Call the above ajax in your js function openmodelpopup().
[WebMethod]
public static void UpdateScreenAlertStatus()
{....}
Make it a web method
[WebMethod]
public static string UpdateScreenAlertStatus()
{....}
Refer this MSDN article.
From javascript you can access this as YourPage.aspx/UpdateScreenAlertStatus or through PageMethods in same aspx page. You can call this with the following javascript.
function openmodelpopup() {
$.ajax
({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "YourPage.aspx/UpdateScreenAlertStatus",
success: (function (data) {
$("#statusDiv").text(data.d);
$("#statusDiv").show();
}),
error: (function () {
alert("Error occurred in server!");
})
});
}
I'm assuming here, 1. your C# method is static and marked WebMethod. 2. Code is compiled properly. 3. You are using jQuery. 4. The url in javascript is correct. 5. Your C# method returns a string status. 6. You are trying to update html element statusDiv with that string.

How to call this.Page (server page) from javascript

I have methos to display content of page at server side like
DisplayDetails(Page PageNema)
{
///
}
How can i call this function from javascript as well as how can i pass Page argument from Javascript
If it's WebForm you must set this method as WebMethod, so then you can call this method from jQuery. Something like that:
Client Side.
$.ajax({
type: "POST",
url: "PageName.aspx/MethodName",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// Do something interesting here.
}
});
Server side:
public partial class _Default : Page
{
[WebMethod]
public static string DisplayDetails()
{
//your code to retrieve details here
return Details;
}
}
[WebMethod]
public static string DisplayDetails(parameter1,parameter2,etc...)
{
return something;
}
Client side code
<script type="text/javascript">
function functionName(callback) {
$.ajax({
type: "POST",
url: 'PageName.aspx/DisplayDetails',// your function name
data: '{"argument1","argument2",etc...}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
// If u want something from serverside function then write your code here
},
error: function (e) {
}
});
}
</script >

Categories