Asp.Net(C#) Jquery Ajax with WebMethod Call Problem - asp.net

Code Behind:
[WebMethod]
public static string emp()
{
return "BlaBla";
}
Aspx Page:
$(document).ready(function() {
$.get("TestPage.aspx/emp", null, function(data) {
alert(data);
})
})
Message Box Output: TestPage.aspx on the page codes
<!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><title>
</title>
<style>
tr
{
background-color: red;
color: White;
}
</style>
How to make return string ?
Thank You.

use
$(document).ready(function() {
// Add the page method call as an onclick handler for the div.
$("#Result").click(function() {
$.ajax({
type: "POST",
url: ""TestPage.aspx/emp",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// Replace the div's content with the page method's return.
$("#Result").text(msg.d);
}
});
});
});
In your page use
<div id="Result">Click here to return the string</div>

Related

Ajax Not returning Data to Action ASP.net MVC

I am new to MVC and facing a problem with accessing data via ajax in action of my ASP.NET Application.
Here is my Ajax Code:
$('.testBtn').click(function() {
$.ajax({
type: 'GET',
data: { id: 10 },
url="#Url.Action("GetData", "Consultation")",
success:function()
{
}
});
});
And here is my action inside the controller:
public ActionResult GetData(int id)
{
string x=id.ToStrring();
return null;
}
For testing I am just passing a static integer and getting its value inside my action.
On clicking the button I am getting the following error:
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult GetData(Int32)' in 'careshade_mvc.Controllers.ConsultationController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Here is working code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.testBtn').click(function () {
$.ajax(
{
url: 'Consultation/GetData',
type: "POST",
data: { id: 10 },
success: function (result) {
}
});
});
});
</script>
</head>
<body>
<input type="button" class="testBtn" value="ClickHere" name="button">
</body>
</html>
Try this:
$(document).ready(function() {
var id = 10;
$('.testBtn').click(function () {
$.ajax(
{
url: 'Consultation/GetData/' + id,//instead data: { id: 10 },
type: "GET",
success: function (result) {
}
});
});
});
You need to use a colon(:) character after url not the equals(=) sign.
Simply change:
url="#Url.Action("GetData", "Consultation")",
To this:
url:"#Url.Action("GetData", "Consultation")",
This was the only change I had to make to make the call work.Hope it helps you!

Ajax request with web method

Can someone explain me why this gives me an error?
My ajax call something like this.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$('#btn1').click(function () {
var values = JSON.stringify({ data: $('#form1').serializeArray() });
alert($('#form1').serializeArray());
$.ajax({
type: "POST",
url: "Default.aspx/Test",
contentType: "application/json; charset=utf-8",
scripts: true,
dataType: "json",
data: values,
success: function (data) { $('#results').append(data.d); },
error: function () { $('#results').append('hata'); }
});
}); });
</script>
</head>
<body>
<form runat="server" id="form1">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
<button id="btn1" type="button">bummm</button>
<div id="results"></div>
</form>
</body>
</html>
[WebMethod]
public static string Test (string data)
{
return "İşlem başarılı"+data;
}
It says me {"Message":"Type \u0027System.String\u0027 is not supported for deserialization of an array.","StackTrace":"
I think this happens because you wrong call your webmethod with ajax.
Your webmethod have one parameter named data with type string, but you try send without name, so try change your code like this:
var KaydetDataWithAjax = function (e)
{
var values =JSON.stringify({data: $(e).serializeArray()});
alert(values);
$.ajax({
type: "POST",
dataType: 'json',
contentType: "application/json; charset=utf-8",
url: "Harita.aspx/HaritaKaydet",
scripts: true,
data:values,
success: function (dt) { alert(dt);},
complete:function(){},
error: function () { alert('error'); }
});
};
UPDATE
this method work on new project
$.ajax({
type: "POST",
dataType: 'json',
contentType: "application/json; charset=utf-8",
url: "Harita.aspx/HaritaKaydet",
scripts: true,
data:JSON.stringify({data: 'text'}),
success: function (dt) { alert(dt);},
complete:function(){},
error: function () { alert('error'); }
});
if in your case it not work then possibly helps if you provide little more code
UPDATE 2
turns out it's all simple than i thought!
serializeArray() returns Array! So it find on server method with parameters something like List<object>, so to solve you must stringify array too
so try this code
var KaydetDataWithAjax = function (e)
{
var values =JSON.stringify({data: JSON.stringify($(e).serializeArray())});
alert(values);
$.ajax({
type: "POST",
dataType: 'json',
contentType: "application/json; charset=utf-8",
url: "Harita.aspx/HaritaKaydet",
scripts: true,
data:values,
success: function (dt) { alert(dt);},
complete:function(){},
error: function () { alert('error'); }
});
};

Ajax call doesn't work

I try to use ajax call in my aspx page. Here is my script:
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery/ui/jquery-ui-1.8.23.custom.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: "WebForm1.aspx/List",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
alert('asd');
}
});
});
</script>
</head>
Here is my server side code:
[WebMethod]
public static string[] List()
{
...
}
I put a break point List's first row but nothing happen. Do you have any suggestion, where I make a mistake?
The parameter you're specifying is json; but where's the json data?? data: '{}', is an object. Also, I'd check the url parameter. Presumably, you'd need to write your call like this:
var AjaxData = '{"ParameterName":""}';
$.ajax({
type: "POST",
url: "../WebForm1.aspx/GetList",
data: AjaxData ,
contentType: "application/json; charset=utf-8",
dataType: "json",....
And then on the server side, you should therefore specify that you're receiving a string, since that's the format of json data. I would also recommend changing the name of the WebMethod because List can be confusing. And finally, you're returning json, therefore you're returning a string and not an array. Server method like this:
[WebMethod]
public string GetList(string ParameterName)
{
...
}

How to fetch wcf dataservice by jquery?

I am trying to fetch wcf service from jquery. I have written below code but getting error.
jquery code:
function LoadAutoComplete(method, param) {
firstIncrement = pageSize + 1;
$.ajax({
type: "POST",
url: "Services/Popup.svc/" + method,
dataType: "json",
contentType: "application/json; charset=utf-8",
data: params,
processdata: true,
success: function (data) {
if (data.PopupData != null) {
alert(data);
}
else {
//response = null;
//return response;
}
},
error: function (result) { alert("Error"); }
});
}
function LoadTest(id) {
var prm = "<%= this.Sequence %>";
var params = '"sequence":' + prm;
method = "GetNotes";
LoadAutoComplete(method,params);
}
.aspx page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!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">
<script src="JS/Popup.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
LoadAutoComplete("GetNotes","<%= this.Sequence %>");
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
GetNotes is my method name which i have written in Business logic.
Error: Microsoft JScript runtime error: '$' is undefined
You need to include jQuery, add the following script tag above the others:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Using SimpleModal and ASP.NET MVC

I am using Simple Modal with asp.net MVC. I have set it up using the OSX demo, which loads a view into the dialog.
The javascript I am using is:
jQuery(function($) {
$("input.ema, a.ema").click(function(e) {
e.preventDefault();
$("#osx-modal-content").modal({
appendTo: 'form',
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: '<div class="close">X</div>',
minHeight: 80,
opacity: 65,
position: ['0', ],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close,
onShow: OSX.show
});
});
var OSX = {
container: null,
open: function(d) {
var self = this;
$.ajax({
url: "/Message/UserMessage/",
type: 'GET',
dataType: 'html', // <-- to expect an html response
success: doSubmitSuccess
});
function doSubmitSuccess(result) {
$('div#osx-modal-data').html(result);
}
self.container = d.container[0];
d.overlay.fadeIn('slow', function() {
$("#osx-modal-content", self.container).show();
$('div#osx-modal-title').html("Send Email");
var title = $("#osx-modal-title", self.container);
title.show();
d.container.slideDown('slow', function() {
setTimeout(function() {
var h = $("#osx-modal-data", self.container).height() +
title.height() +
20; // padding
d.container.animate({
height: h
}, 200, function() {
$("div.close", self.container).show();
$("#osx-modal-data", self.container).show();
});
}, 300);
});
})
},
close: function(d) {
var self = this;
d.container.animate({
top: "-" + (d.container.height() + 20)
}, 500, function() {
self.close(); // or $.modal.close();
});
},
show: function(d) {
var self = this;
$("#txtEmail", self.container).hide();
});
}
};
});
On the show function I am trying to hide the txtEmail box, but it doesnt seem to be able to find it.
The HTML which is going into the dialog is
<%# Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>
<!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>CreateMessage</title>
</head>
<body>
<div>
<p>
<input id="txtEmail" type="text" style="width: 90%" /></p>
<p>
<textarea id="TextArea1" cols="20" rows="5"></textarea></p>
<p>
<input id="submitmsg" type="submit" value="Send" /></p>
</div>
</body>
</html>
Can anyone help me out on this?
Thanks,
I believe that the AJAX call hasn't completed by the time the show method is invoked and thus the element doesn't exist at the time that you are going to hide it. You should probably move all of the code following the ajax call in the open handler into the ajax callback, along with the code to hide the txtEmail element.
var OSX = {
container: null,
open: function(d) {
var self = this;
$.ajax({
url: "/Message/UserMessage/",
type: 'GET',
dataType: 'html', // <-- to expect an html response
success: function(html) {
$('div#osx-modal-data').html(result)
.find("#txtEmail")
.hide();
...rest of code to display the dialog...
}
});

Resources