I am trying to call a webmethod I created. The problem I'm having is that the ajax call never calls my webmethod; this is strange to me because I have another webmethod located in the same file with the same return type and parameters that is able to be referenced fine in the "url" definition of the ajax call.
My aspx document consists of the following:
File name CS.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="_Default" %>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<script>
function ShowCurrentTime() {
if(document.getElementById("txtUserName").value == "" && document.getElementById("app_name").value == ""){
alert("One of the fields must be filled out");
return 0;
}
$.ajax({
type: "POST",
url: "CS.aspx/getAppId",
data: '{name: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
var y = document.getElementById("test");
y.innerHTML = response.d;
}
</script>
<body>
<form id="form1" runat="server">
<div>
<table style="background-color:#fcfcfc; width:30%;">
<tr>
<td><b>Application ID:</b> </td>
<td><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br /></td>
</tr>
<tr>
<td><b>Application Name:</b></td>
<td><asp:TextBox ID="app_name" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><input id="btnGetTime" type="button" value="Search"
onclick = "ShowCurrentTime()" /></td>
</tr>
</table>
<p id="test"></p>
</body>
</html>
My web method looks like the following with the filename CS.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
using System.Web.Script.Serialization;
public partial class _Default : System.Web.UI.Page
{
[System.Web.Services.WebMethod]
public static string getAppId(string appName) {
return "this is a string";
}
}
I've put a breakpoint at the return statement, just to make sure that the method is even called, while in debug mode, and have had no luck.
Make sure you have a reference to jQuery if you want to make a jQuery ajax call.
Also, the parameters of your WebMethod need to match the parameter name you are passing in. The parameter is appName:
$.ajax({
type: "POST",
url: "CS.aspx/getAppId",
data: '{appName: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: function (response) {
alert(response.d);
}
});
And in the WebMethod it is appName as well:
[System.Web.Services.WebMethod]
public static string getAppId(string appName)
{
return "this is a string";
}
In your code, there is a mismatch.
I would also make a habit of closing your div and form tags.
You need to place this service in a WCF or ASMX service and create a JavaScript proxy for it. See http://msdn.microsoft.com/en-us/library/bb532367(v=vs.90).aspx
Related
NOTE: I did search the forums but didn't find anything that matched my issue or worked.
Hi all,
I'm trying to make a simple call from an asp.net web form using json & ajax to a method in the code-behind page but it's returning that page html instead of the value from the method.
Here is the method in the code-behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
namespace Tags
{
public partial class AJAX3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string CalculateSum(Int32 Num1, Int32 Num2)
{
Int32 Result = Num1 + Num2;
return Result.ToString();
}
}
}
Here is my web form:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="AJAX3.aspx.cs" Inherits="Tags.AJAX3" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Call asp.net server side page methods using jQuery AJAX & json</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnCalculate").click(function () {
//Get values from textboxes that will be passed to function
var num1 = $('#txtFirstNumber').val();
var num2 = $('#txtSecondNumber').val();
$.ajax({
type: "POST",
dataType: "text",
contentType: "application/json; charset=utf-8",
//Url is the path of our web method (Page name/function name)
url: "AJAX3/CalculateSum",
//Pass values to parameters. If function have no parameters, then we need to use data: "{ }",
data: "{'Num1':'" + num1 + "', 'Num2':'" + num2 + "'}",
//called on ajax call success
success: function (result) {
$('#dvMsg').text("Sum of " + num1 + " and " + num2 + " = " + result);
},
//called on ajax call failure
error: function (xhr, textStatus, error) {
$('#dvMsg').text("Error:" + error + ", xhr: " + xhr + ", textStatus: " + textStatus);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Enter First Number:</td>
<td>
<asp:TextBox ID="txtFirstNumber" runat="server" Text="22" /></td>
</tr>
<tr>
<td>Enter Second Number:</td>
<td>
<asp:TextBox ID="txtSecondNumber" runat="server" Text="33" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnCalculate" Text="Calculate" runat="server" OnClientClick="return false;" />
<div id="dvMsg"></div>
</td>
</tr>
</table>
</div>
</form>
</body>
My goal is to return a string and not a JSON object.
What am I doing wrong?
Thanks!
i am trying use $.ajax() method in asp.net to fill a html tag but i didn't get any data from on success parameter
i am calling getData function from c# code and I tried to return a string but it doesn't work i also tried to user Response.write() but the same issue
when I alert returned value it show me the aspx page code
as following image
here is my code
Default.apsx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#firstDrop").on("change", function () {
$.ajax({
url: "Default.aspx/getData",
type: "POST",
data: { id: $("#firstDrop").val() },
success: function (data) {
alert(data);
$("#secondDrop").html(data);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select runat="server" id="firstDrop">
<option value="0">first select</option><option value="1">second select</option><option value="3">third select</option>
</select>
<select id="secondDrop"></select>
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string getData()
{
return"<option>ABC</option><option>CDE</option>";
}
}
Basic rule when creating a webmethod in asp.net.
Your method should be static.
You need to decorate your function with System.Web.Services.WebMethod.
C# Code Behind
[System.Web.Services.WebMethod]
public static string GetCurrentTime(string name)
{
return "Hello " + name + Environment.NewLine + "The Current Time is: "
+ DateTime.Now.ToString();
}
Javascript (Aspx)
Here, in your case make your getdata function static and webmethod as well. When calling the webmethod through ajax use data.d to read the response.
[System.Web.Services.WebMethod]
public static string getData(int id)
{
return "<option>ABC</option><option>CDE</option>";
}
$("#firstDrop").on("change", function() {
$.ajax({
url: "Default.aspx/getData",
type: "POST",
dataType: "json",
data: {
id: $("#firstDrop").val()
},
success: function(data) {
alert(data.d);
$("#secondDrop").html(data.d);
}
});
});
Reference Site:
https://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx
Similar thread "Calling webmethod in webform"
calling-a-webmethod-with-jquery-in-asp-net-webforms
I have to pass bulk array values to code behind (cs) using ajax i had researched a lot and used this code but it didnot worked for me below is the code that i used what i need is i need to pass bulk array values in code behind(cs) using ajax
JS
<head runat="server">
<title></title>
<script>
function foo() {
var values = ["1,", "2", "3"];
// Make the ajax call
$.ajax({
type: "POST",
url: "Default.aspx/Done", // the method we are calling
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ arr: values }),
dataType: "json",
success: function (result) {
alert('Yay! It worked!');
},
error: function (result) {
alert('Oh no :(');
}
});
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" UseSubmitBehavior="false" OnClientClick="return foo();" />
</div>
</form>
</body>
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace PassingValueFromJavascriptToCs
{
public partial class WebForm3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static void done(string[] ids)
{
String[] a = ids;
// Do whatever processing you want
// However, you cannot access server controls
// in a static web method.
}
}
}
First of all the button for aspx is sending your aspx form to a postback so that you would need to change the aspx like this
<script>
function foo() {
var values = ["1,", "2", "3"];
// Make the ajax call
$.ajax({
type: "POST",
url: "Default.aspx/Done", // the method we are calling
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ arr: values }),
dataType: "json",
success: function (result) {
alert('Yay! It worked!');
},
error: function (result) {
alert('Oh no :(');
}
});
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" UseSubmitBehavior="false" OnClientClick="return foo();" />
</div>
</form>
</body>
The reason the foo method returns false that you dont want to make your button start a postback. I also added another property UseSubmitBehavior="false" to guarantee it.
The scripts section i changed the values object to a real array and then when sending data , i converted it to json with values object inside. This code will work in your example just fine
Edit : For the working version on my tests
The aspx page (trimmed details to the master page)
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script>
function test() {
var values = ["1,", "2", "3"];
// Make the ajax call
$.ajax({
type: "POST",
url: "Default.aspx/test", // the method we are calling
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ arr: values }),
dataType: "json",
success: function (result) {
debugger;
alert('Yay! It worked!');
},
error: function (result) {
alert('Oh no :(');
}
});
return false;
}
</script>
<asp:Button ID="Button3" UseSubmitBehavior="false" OnClientClick="return test();" runat="server" Text="Deneme" />
</asp:Content>
The RouteConfig and original method
public static class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
var settings = new FriendlyUrlSettings();
//settings.AutoRedirectMode = RedirectMode.Permanent;
routes.EnableFriendlyUrls(settings);
}
}
[WebMethod]
public static void test(string[] arr)
{
}
Well at least one issue is your url is "Default.aspx/Done" but the method appears to be on WebForm3.aspx/Done.
What actually happens with your code? Does it error?
I am trying to get an autocomplete textbox working for my website on a web form. This is to autocomplete the textbox with house names once the user has started typing. The sql database is connected and the ado.net model is all set up. I just can't seem to figure out why it is not working.
The aspx page is below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#<%=txtHouseName%>").autocomplete({
source: function (request, response) {
$.ajax({
url: "WebForm1.aspx/GetHouseName",
data: "{ 'pre':'" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return { value: item }
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Auto Complete Textbox without using Web Service</h3>
<table>
<tr>
<td>House Name: </td>
<td>
<div class="ui-widget" style="text-align:left">
<asp:TextBox ID="txtHouseName" runat="server" Width="350px" CssClass="textboxAuto" Font-Size="12px" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
and this is the code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Houses_of_Mayo
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<string> GetHouseName(string pre)
{
List<string> allHouseName = new List<string>();
using (HOMEntities h = new HOMEntities())
{
allHouseName = (from a in h.Houses
where a.Name.StartsWith(pre)
select a.Name).ToList();
}
return allHouseName;
}
}
}
I have a website where I display student info. I want to add few text fields on the website and update those fields asynchronously using jQuery(Ajax) on Button click. I believe I have all the requirements in place but the data is still not updated.
Am I missing something here? Clicking buttons does nothing.
Here is my Code -
Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Student.Models;
namespace Student.Controllers
{
public class StudentController : Controller
{
public ActionResult Index()
{
return View("Student");
}
[HttpPost()]
public ActionResult DisplayStudentName(string id)
{
StudentDataContext db = new StudentDataContext();
var StudentName = (from p in db.vwStudent.Where(a => a.StudentId == id)
group p by p.StudentName into g
select g.Key).FirstOrDefault();
ViewData["StudentName"] = StudentName;
return View("Student");
}
[HttpPost()]
public ActionResult DisplayStudentStatus(int? id, string flg)
{
AccountDataContext db = new AccountDataContext();
var StudentStatus = (from p in db.vwStudent.Where(a => a.StudentId == id && a.LastFlag == flg)
group p by p.Status into g
select g.Key).FirstOrDefault();
ViewData["StudentStatus "] = StudentStatus;
return View("Student");
}
}
}
jQuery:
$("#Button1").click(function() {
var link = '<%= Url.Action("DisplayStudentName", "Student")';
$.ajax({
url: link,
data: "{id: '<%= ViewContext.RouteData.Values["id"] %>'}",
dataType: "html",
success: Success,
error: Fail
});
});
$("#Button2").click(function() {
var link = '<%= Url.Action("DisplayStudentStatus", "Student")';
$.ajax({
url: link,
data: "{id: '<%= ViewContext.RouteData.Values["id"] %>' ,
flg: '<%= ViewContext.RouteData.Values["flg"] %>'}",
dataType: "html",
success: Success,
error: Fail
});
});
function Success(){
alert("Success");
}
function Fail(){
alert("Fail");
}
View:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Student Form
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<form id="form1" method="get" runat="server">
Student ID:<input type="text" name="id" id="StudentId" value="<%=HttpContext.Current.Request.QueryString["id"]%>" /><br />
Student Name:<input type="text" name="StudentName" id="StudentName" value="<%=ViewData["StudentName"]%>"/>
<div id="Btn1"><input type="button" value="Display Student Name" name="Btn1" id="Button1" />
</div>
Student Status:<input type="text" name="StudentStatus" id="StudentStatus" value="<%=HttpContext.Current.Request.QueryString["StudentStatus"]%>" />
<div id="Btn2"><input type="button" value="Display Profit Center" name="Btn2" id="Button2" />
</div>
</div>
</form>
</asp:Content>
Thanks in advance
There are a couple of issues with your code that I see:
You should not wrap the data parameters into single quotes.
Your success and error parameters should not be strings. They should be functions
You should never hardcode urls in an ASP.NET MVC application. You should always use url helpers when dealing with urls
So:
$("#Button1").click(function() {
var link = '<%= Url.Action("DisplayStudentName", "Student")';
$.ajax({
url: link,
data: { id: '<%= ViewContext.RouteData.Values["id"] %>' },
success: Success,
error: Fail
});
});
$("#Button2").click(function() {
var link = '<%= Url.Action("DisplayStudentStatus", "Student")';
$.ajax({
url: link,
data: {
id: '<%= ViewContext.RouteData.Values["id"] %>' ,
flg: '<%= ViewContext.RouteData.Values["flg"] %>'
},
success: Success,
error: Fail
});
});
where obviously you must have declared the 2 functions used:
function Success(data) {
// ...
}
function Fail() {
// ...
}
need to mention post in ur ajax parameters
$.ajax({
url: link,
type: 'post',
Also you have mentioned json as the datatype in your ajax function but your action is returning text/html.
Make these 2 changes and if it doesnt work then check fiddler to see what response you are getting from the server.
If you are getting a valid response then check your success function to see if you are doin things right.
If you want to support get and post scenarios on your action then change the attribute on your action to
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]