I've looked at the previously-posted jQuery/MVC questions and haven't found a workable answer.
I have the following JavaScript code:
$.ajax({
type: "POST",
url: '#Url.Action("Search","Controller")',
data: "{queryString:'" + searchVal + "'}",
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (data) {
alert("here" + data.d.toString());
}
});
When calling the Url the post looks like:
NetworkError: 500 Internal Server Error -
Why does it return it like this (the logic behind it) and what's a solution?
P.S.: Additional Information: %22 is the URL Encoding Reference for <<">> character
In order for this to work that JavaScript must be placed within a Razor view so that the line
#Url.Action("Action","Controller")
is parsed by Razor and the real value replaced.
If you don't want to move your JavaScript into your View you could look at creating a settings object in the view and then referencing that from your JavaScript file.
e.g.
var MyAppUrlSettings = {
MyUsefulUrl : '#Url.Action("Action","Controller")'
}
and in your .js file:
$.ajax({
type: "POST",
url: MyAppUrlSettings.MyUsefulUrl,
data: "{queryString:'" + searchVal + "'}",
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (data) {
alert("here" + data.d.toString());
}
});
or alternatively look at levering the framework's built in Ajax methods within the HtmlHelpers which allow you to achieve the same without "polluting" your Views with JS code.
you have an type error in example of code. You forget curlybracket after success
$.ajax({
type: "POST",
url: '#Url.Action("Search","Controller")',
data: "{queryString:'" + searchVal + "'}",
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (data) {
alert("here" + data.d.toString());
}
})
;
A good way to do it without getting the view involved may be:
$.ajax({
type: "POST",
url: '/Controller/Search',
data: { queryString: searchVal },
success: function (data) {
alert("here" + data.d.toString());
}
});
This will try to POST to the URL:
"http://domain/Controller/Search (which is the correct URL for the action you want to use)"
Starting from Rob's answer, I am currently using the following syntax.Since the question has received a lot of attention,I decided to share it with you :
var requrl = '#Url.Action("Action", "Controller", null, Request.Url.Scheme, null)';
$.ajax({
type: "POST",
url: requrl,
data: "{queryString:'" + searchVal + "'}",
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (data) {
alert("here" + data.d.toString());
}
});
starting from mihai-labo's answer, why not skip declaring the requrl variable altogether and put the url generating code directly in front of "url:", like:
$.ajax({
type: "POST",
url: '#Url.Action("Action", "Controller", null, Request.Url.Scheme, null)',
data: "{queryString:'" + searchVal + "'}",
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (data) {
alert("here" + data.d.toString());
}
});
Simple way to access the Url Try this Code
$.ajax({
type: "POST",
url: '/Controller/Search',
data: "{queryString:'" + searchVal + "'}",
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (data) {
alert("here" + data.d.toString());
});
Related
Im new in js and razor,part of my code should be repeated and this imposed more lines of code to my project,it could be nice if i can make it reusable,for example Ajax,where should i create a ajax to a specific URL to just call it when i need?in a separated razor file?in the following code,i have two click events and my ajax call and url is repeating,i want to get rid of this repeat:
function seriesClick(e) {
var _clicketBarChart = e.series.categoryField;
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("faultstatistics","Dashbrd")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "name": _clicketBarChart }),
success: function (result) {
faultstatChart(result);
}
});
function changeEvent(e) {
var _clicketCellGrid = e.categoryCell;
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("faultstatistics","Dashbrd")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({"name": _clicketCellGrid }),
success: function (result) {
faultstatChart(result);
}
});
}
You have to create single method that can handle two situations, please refer to this example (based on your):
var ajaxHandler = function(targetName) {
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("faultstatistics","Dashbrd")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({"name": _clicketCellGrid }),
success: function (result) {
faultstatChart(result);
}
});
}
var seriesClick = function(e) {
var targetName = e.series.categoryField;
ajaxHandler(targetName);
}
var changeEvent = function(e) {
var targetName = e.categoryCell;
ajaxHandler(targetName);
}
I have these method in c# which requires 3 parameters
public void Delete_AgentTools(int ID,int UAM,int mode)
{
some code etc.
}
and I use javascript ajax to call this method and pass the parameter
function Delete_AgentTools(toolAccess, toolId, UAM) {
$.ajax({
type: "POST",
url: "IROA_StoredProcedures.asmx/Delete_AgentTools",
data: "{'toolAccess':'" + toolAccess + "', 'toolId':'" + toolId + "', 'UAM':'" + UAM + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success:function()
{
alert("Tool has been successfully delete");
},
error: function (XMLHttpRequest)
{
alert("error in Delete_AgentTools()");
console.log(XMLHttpRequest);
}
});
}
you see for me I want to simpilfy on how I pass the parameter in javascript. Is it possible to pass it as an object to the c# or simplify the passing of parameters in javascript
You can convert a js object as a JSON using JSON.stringify
var data = {};
data.toolAccess = value1;
data.toolId = value2;
data.UAM = value3;
$.ajax({
type: "POST",
url: "IROA_StoredProcedures.asmx/Delete_AgentTools",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
success:function()
{
alert("Tool has been successfully delete");
},
error: function (XMLHttpRequest)
{
alert("error in Delete_AgentTools()");
console.log(XMLHttpRequest);
}
});
function Delete_AgentTools(toolAccess, toolId, UAM) {
var data = {};
data.mode = toolAccess;
data.ID = toolId;
data.UAM = UAM;
$.ajax({
type: "POST",
url: "IROA_StoredProcedures.asmx/Delete_AgentTools",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
success:function()
{
alert("Tool has been successfully delete");
},
error: function (XMLHttpRequest)
{
alert("error in Delete_AgentTools()");
console.log(XMLHttpRequest);
}
});
No need to change in your C# code.
I wrote the following ajax call to fetch data using the nb (number of document view) parameter:
if ($("#fetch").hasClass("active")) {
$.ajax({
url: "ServletAjaxController",
type: "POST",
dataType: "json",
data: "c=" + controller + "&nb=300",
success: onSuccess,
contentType: "application/x-www-form-urlencoded;charset=UTF-8"
});
}
Now I want to do the same thing but expressing nb != 300 instead of the equal expression. Any IDEAs?
I have a ASP.Net project(not website). I have added the JQuery autocomplete widget to my master page and use the widget in MyPage.aspx.
In the .master I use something like this:
$.ajax({
url: "/MyService.asmx/MySearchMethod",
data: "{ 'param1': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
The MyService.asmx points to:
CodeBehind="~/App_Code/MyServiceMethods.cs" Class="MySearchMethod"
Everything works fine while in VS2010 development.
The problem is when I deploy the app to a test web server, I get the below error:
System.InvalidOperationException: No web service found at: /MyService.asmx
How can I reference my web service in the ajax url: so that the address can be resolved when the app is deployed?
try to use it as follows:
$.ajax({
url: "MyService.asmx/MySearchMethod",
data: "{ 'param1': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
or:
$.ajax({
url: "~/MyService.asmx/MySearchMethod",
data: "{ 'param1': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
Java script
$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: "id="+#Model.id+"&url="+#url
});
});
ReferenceError: Expired is not defined
[Break On This Error]
data: "id="+2925+"&url="+Expired
You probably want (but see also below):
$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: "id=#Model.id&url=#url"
});
});
...because you have to think about what the browser sees, and if #url gets replaced with Expired by the server, from the error you can tell that what the browser sees for your code is:
data: "id="+2925+"&url="+Expired // <=== What the browser sees with your current code
Even better, let jQuery handle any potential URI-encoding needed by passing it an object instead:
$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: {id: #Model.id, url: "#url"}
});
});
If you don't want to pass jQuery an object and let it handle the URI-encoding for you, then you'll want to handle it yourself:
data: "id=#Model.id&url=" + encodeURIComponent("#url")
$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: "{id:'" + #Model.id + "', 'url': " + #url + "}",
success: function (response) {
alert( response.d);
},
error: function (data) {
alert(data);
},
failure: function (msg) {
}
});
});
Try this it is working fine. If you are using url routing then you might get some other error.
so better get the respone output and check..
I think its because #url variable is assigned data Expired without quotes.