How to call a codebehind function from javascript in asp.net? - javascript

I want to call a function from my code behind using javascript. I used the below code:
function fnCheckSelection() {
some script;
window["My"]["Namespace"]["GetPart"](null);
}
...where "GetPart" is the function name. However, this is not working. Please help me on this.

in JavaScript:
document.getElementById("btnSample").click();
Server side control:
<asp:Button runat="server" ID="btnSample" ClientIDMode="Static" Text="" style="display:none;" OnClick="btnSample_Click" />
C#
protected void btnSample_Click(object sender, EventArgs e)
{
}
It is easy way though...

You can do this by an ajax call
this is a jquery example:
$.ajax({
type: "POST",
url:"~/code_behind.aspx/Method",
data: dataPost,
contentType: "application/json; charset=utf-8",
dataType: "json",
....
});
here is api documentation
and in code behind
[WebMethod]
public static yourType Method (Params){}
or you can add a hidden button inside updatePanel, and invoke the click event using js. ('#<%=ID.ClientID%>').click();
It will invoke the OnClientClick if it exists then your codeBehind fucntion.

try this
Your code behind function
[WebMethod]
public static void GetPart() {
//your code goes here
}
.
Javascript
$(document).ready(function () {
$("#btnname").click(function () {
$.ajax({
type: "POST",
url: "/youraspxpagename.aspx/GetPart",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg)
{
}
});
});
});

Using ajax, you can call a codebehind function from javascript using JQuery:
function : fnCheckSelection(){
$.ajax({
cache: false,
url: "/GetPart"
type: "POST",
success: function (result) {
},
error: function (msg) {
}
});
}

Related

Problem calling WebMethod in asp.Net Webform

I'm calling a WebMethod inside my application. Recently i changed the root config to upgrade the multilingual part.
public static void RegisterRoutes(RouteCollection routes)
{
routes.MapPageRoute("languageHome","{language}/{page}","~/{page}.aspx");
}
Since then it seem that i cannot call the WebMethod with jQuery
function ShowNumeroLame() {
$.ajax({
type: "POST",
url: "Home/GetNumeroLame",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccessNumeroLame,
error: function () {
},
failure: function (response) {
}
});
}
I think that the problem is in the URL but i can't find it
Thanks, and sorry for my bad explanation
I solved the problem adding this:
url: '<%=Page.ResolveClientUrl("Home.aspx/GetSpessoriFette") %>',

ReferenceError: json is not defined when AJAX call the server method

I want to call the server method through the AJAX call. But when I am click the button and call the AJAX function at that time it shows an error.
Here is my code
<input type="button" id="btn_findsubmit" value="Edit" class="button" />
$(document).on("click", "#btn_findsubmit", function (e) {
var c = $find("<%=cmbobx_search.ClientID %>");
$.ajax({
type: "POST",
url: "schoolregistration.aspx/GetSchoolName",
data: json.stringify({ schoolname: c.get_textboxcontrol().value }),
contenttype: "application/json; charset=utf-8",
datatype: "json",
success: OnSuccessGetSchoolName,
failure: function () {
alert("error! try again...");
}
});
});
[WebMethod]
[ScriptMethod]
public static string GetSchoolName(string schoolName){
//Here is the code
}
Now when I click the button at that time JavaScript button click event is working but the ajax method do not calling the server method GetSchoolName (I know by doing debug mode).
And throws a error that:
ReferenceError: json is not defined
It should be JSON.stringify, not json.stringify
<input type="button" id="btn_findsubmit" value="Edit" class="button" />
<script>
$(document).on("click", "#btn_findsubmit", function (e) {
$.ajax({
type: "POST",
url: "Default.aspx/GetSchoolName",
data: JSON.stringify({ schoolName: "school name" }),
contentType: "application/json; charset=utf-8",
datatype: "json",
success: function (data) {
alert(data.d);
},
failure: function () {
alert("error! try again...");
}
});
});
</script>
[WebMethod]
public static string GetSchoolName(string schoolName)
{
//Here is the code
return "success";
}
first of all it must be JSON.stringify not json.stringify, second it must be contentType not contenttype third the name of parameters in [WebMethod] must be same as in your ajax data.
in this case schoolName not schoolname.
hope it help you.

How do I call a server side VB.net function from jquery in an asp.net form?

I am trying to call a method in my server-side vb code from jquery.
import System.Web.Services
...
'my VB.net Code
<WebMethod()> _
Public Shared Function SubmitReport_Click()
'this is where my code will go
Return Nothing
End Function
In my javascript code the alert is being called but the SubmitReport_Click is not being called.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<script type="text/javascript">
$("#<%= FileInput.ClientID%>").on('filebatchselected', function (event) {
alert("file input");
pagemethods.SubmitReport_Click();
})
</script>
I'd make a function that fires on the click event and calls over to your web method using AJAX, and use JSON to pass any relevant data.
$(".clickMe").click(doWebMethod);
function doWebMethod () {
var data = { 'name': 'jessikwa' , 'location': 'ny' }
var params = "{'dataPackage': '" + JSON.stringify(data) + "'}";
$.ajax({
type: "POST",
url: webMethodUrl,
async: true,
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert(msg.d);
},
error: function () {
alert("fail");
}
});
}
//VB HERE
<WebMethod()> _
Public Shared Function SubmitReport_Click(ByVal dataPackage as String) as String
Dim rtnStr As String = "OK"
//deserialize data package here
Return rtnStr
End Function
You can use an Ajax request. I just typed this up, so you may need to Google the syntax in case I messed it up.
$.ajax({
type: "GET",
url: "FileName.aspx/SubmitReport_Click",
success: function(){
alert('It Worked!');
},
failure: function() {
alert('It Failed!');
}
});

ajax call to webmethod doesn't hit success in asp.net

i have an ajax request in a page say Test.aspx
$.ajax({
type: "POST",
url: "Test.aspx/TestMethod",
data: "{ 'Parameter':'Parameter'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (res) {
alert('success');
},
error: function (xhr, ajaxOptions, thrownError) {
alert('error getting Regions');
}
});
and in the code behind
[WebMethod()]
public static string TestMethod(string Parameter)
{
return "teststring";
}
Issue is control is not going in to success inside ajax, any idea?''
Testtry this
$.ajax({
type: "POST",
url: "Test.aspx/TestMethod",
data: "{ 'Parameter':'Parameter'}",
contentType: "application/json; charset=utf-8",
success: function (res) {
var s = JSON.stringify(res);
alert(s);
},
error: function () {
alert('error getting Regions');
}
});
There are few things you need to make sure you are doing.
First thing you need to add script manager with enable page method property true like below.
<asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
See my blog post about How to call ASP.Net page method with jQuery
Check the Page URL and everything. It should be correct and should be exactly same as page name and method name as it is case sensitive.
Check parameter also. There is another good post with parameter is also below for your reference.
http://www.aspsnippets.com/Articles/Call-ASPNet-Page-Method-using-jQuery-AJAX-Example.aspx

Making a Simple Ajax call to controller in asp.net mvc

I'm trying to get started with ASP.NET MVC Ajax calls.
Controller:
public class AjaxTestController : Controller
{
//
// GET: /AjaxTest/
public ActionResult Index()
{
return View();
}
public ActionResult FirstAjax()
{
return Json("chamara", JsonRequestBehavior.AllowGet);
}
}
View:
<head runat="server">
<title>FirstAjax</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var serviceURL = '/AjaxTest/FirstAjax';
$.ajax({
type: "POST",
url: serviceURL,
data: param = "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
alert(data);
}
function errorFunc() {
alert('error');
}
});
</script>
</head>
I just need to print an alert with the controller method returning data. Above code just print "chamara" on my view. An alert is not firing.
UPDATE
I modified my controller as below and it start working. I don't have an clear idea why it's working now. Some one please explain. The parameter "a" does not related i added it because i can not add two methods with same method name and parameters.I think this might not be the solution but its working
public class AjaxTestController : Controller
{
//
// GET: /AjaxTest/
[HttpGet]
public ActionResult FirstAjax()
{
return View();
}
[HttpPost]
public ActionResult FirstAjax(string a)
{
return Json("chamara", JsonRequestBehavior.AllowGet);
}
}
Remove the data attribute as you are not POSTING anything to the server (Your controller does not expect any parameters).
And in your AJAX Method you can use Razor and use #Url.Action rather than a static string:
$.ajax({
url: '#Url.Action("FirstAjax", "AjaxTest")',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
From your update:
$.ajax({
type: "POST",
url: '#Url.Action("FirstAjax", "AjaxTest")',
contentType: "application/json; charset=utf-8",
data: { a: "testing" },
dataType: "json",
success: function() { alert('Success'); },
error: errorFunc
});
After the update you have done,
its first calling the FirstAjax action with default HttpGet request
and renders the blank Html view . (Earlier you were not having it)
later on loading of DOM elements of that view your Ajax call get fired and displays alert.
Earlier you were only returning JSON to browser without rendering any HTML. Now it has a HTML view rendered where it can get your JSON Data.
You can't directly render JSON its plain data not HTML.
Use a Razor to dynamically change your URL by calling your action like this:
$.ajax({
type: "POST",
url: '#Url.Action("ActionName", "ControllerName")',
contentType: "application/json; charset=utf-8",
data: { data: "yourdata" },
dataType: "json",
success: function(recData) { alert('Success'); },
error: function() { alert('A error'); }
});
If you just need to hit C# Method on in your Ajax Call you just need to pass two matter type and url if your request is get then you just need to specify the url only. please follow the code below it's working fine.
C# Code:
[HttpGet]
public ActionResult FirstAjax()
{
return Json("chamara", JsonRequestBehavior.AllowGet);
}
Java Script Code if Get Request
$.ajax({
url: 'home/FirstAjax',
success: function(responce){ alert(responce.data)},
error: function(responce){ alert(responce.data)}
});
Java Script Code if Post Request and also [HttpGet] to [HttpPost]
$.ajax({
url: 'home/FirstAjax',
type:'POST',
success: function(responce){ alert(responce)},
error: function(responce){ alert(responce)}
});
Note: If you FirstAjax in same controller in which your View Controller then no need for Controller name in url. like url: 'FirstAjax',
First thing there is no need of having two different versions of jquery libraries in one page,either "1.9.1" or "2.0.0" is sufficient to make ajax calls work..
Here is your controller code:
public ActionResult Index()
{
return View();
}
public ActionResult FirstAjax(string a)
{
return Json("chamara", JsonRequestBehavior.AllowGet);
}
This is how your view should look like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var a = "Test";
$.ajax({
url: "../../Home/FirstAjax",
type: "GET",
data: { a : a },
success: function (response) {
alert(response);
},
error: function (response) {
alert(response);
}
});
});
</script>
It's for your UPDATE question.
Since you cannot have two methods with the same name and signature you have to use the ActionName attribute:
UPDATE:
[HttpGet]
public ActionResult FirstAjax()
{
Some Code--Some Code---Some Code
return View();
}
[HttpPost]
[ActionName("FirstAjax")]
public ActionResult FirstAjaxPost()
{
Some Code--Some Code---Some Code
return View();
}
And please refer this link for further reference of how a method becomes an action. Very good reference though.
View;
$.ajax({
type: 'GET',
cache: false,
url: '/Login/Method',
dataType: 'json',
data: { },
error: function () {
},
success: function (result) {
alert("success")
}
});
Controller Method;
public JsonResult Method()
{
return Json(new JsonResult()
{
Data = "Result"
}, JsonRequestBehavior.AllowGet);
}
instead of url: serviceURL,
use
url: '<%= serviceURL%>',
and are you passing 2 parameters to successFunc?
function successFunc(data)
{
alert(data);
}
Add "JsonValueProviderFactory" in global.asax :
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}

Categories

Resources