I am currently using JQuery to post to action methods in my MVC app. The methods are quite complicated and since I only know the basics of Javascript and JQuery, if I wanted to use JQuery to make a client side call, would I be able to make a call to a web
service to do this? I am new to all these technologies so not sure about how posting from JQuery to web services etc works!
data: '{"fieldOne":"' + fieldOne + '", "fieldTwo":"' + fieldTwo + '"}', //"{}", //Must use "{}" for autocomplete functionality that requires not paramaters inorder for json to be compatable with IE 6
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
});
function AjaxSucceeded(result) {
if (result.d != null && result.d != '') {
alert(result.d); //result must be followed by .d to display the results, this is a json requirement
I have changed the JQuery to include the AjaxSucceeded and AjaxFailed methods :
$(".submit-form-button").click(function () {
$.ajax({
type: "POST",
url: "http://lovelyjubbly.info/NFLC.asmx/GetQBRating",
contentType: "application/json; charset=utf-8",
data: '{"Completion":"' + Completion + '", "Gain":"' + Gain + '", "Touchdown":"' + Touchdown + '", "Interception":"' + Interception + '"}', //"{}", //Must use "{}" for autocomplete functionality that requires not paramaters inorder for json to be compatable with IE 6
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
});
});
function AjaxSucceeded(result) {
if (result.d != null && result.d != '') {
$('#output').text(result.d); //result must be followed by .d to display the results, this is a json requirement
}
}
function AjaxFailed(result) {
$('#output').text(result.status + ' ' + result.statusText);
}
I would start buy making all of your parameters string inside of you webmethod and do you convertion at the server. Generally when dealing with ajax/xml you deal with strings. If this does not help make sure you are calling the correct address of the service
or in this case web method i.e page/method. Also when you are sending parameters make sure you are at the very least sending an empty string and not a null.
I have changed my JQuery (see below) and changed my web service to accept strings and then convert them, but I still get the same error. Can anybody help? This is my first attempt at JQuery and I am starting to get a little frustrated with it (although
probably not helped by the fact that my computer has decided to start to die on me at the same time!)
$(".submit-form-button").click(function () {
var Completion = $('input[name=Completion]').val();
var Gain = $('input[name=Gain]').val();
var Touchdown = $('input[name=Touchdown]').val();
var Interception = $('input[name=Interception]').val();
$.ajax({
type: "POST",
url: "http://lovelyjubbly.info/NFLC.asmx/GetQBRating",
contentType: "application/json; charset=utf-8",
data: '{"Completion":"' + Completion + '", "Gain":"' + Gain + '", "Touchdown":"' + Touchdown + '", "Interception":"' + Interception + '"}', //"{}", //Must use "{}" for autocomplete functionality that requires not paramaters inorder for json to be compatable with IE 6
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
});
});
I am also wondering if I might not be referencing all the scripts I need. This is the section of my page where I am doing this :
mike72
Member
721 Points
357 Posts
JQuery and web services
Sep 24, 2010 02:43 PM|LINK
I am currently using JQuery to post to action methods in my MVC app. The methods are quite complicated and since I only know the basics of Javascript and JQuery, if I wanted to use JQuery to make a client side call, would I be able to make a call to a web service to do this? I am new to all these technologies so not sure about how posting from JQuery to web services etc works!
najmulansari
Member
275 Points
52 Posts
Re: JQuery and web services
Sep 24, 2010 03:01 PM|LINK
Hi,
Please go through the article in the link below.........
It has complete description to how to use jquery and how to consume a webservice from client side using JQuery.
http://dotnetslackers.com/articles/ajax/using-jquery-with-asp-net.aspx
Hope this will help you!!!!
Don't forget to mark solution providing post as "Answered".
It helps others to find correct solutions!
www.dotnetlogix.com
VB_Gone-Wild
Participant
815 Points
437 Posts
Re: JQuery and web services
Sep 24, 2010 03:08 PM|LINK
Its actually pretty straight forward, below is a sample of how this works in general:
$.ajax({
type: "POST",
url: "http://www.wherevertheserviceis.com/webserviceName",
contentType: "application/json; charset=utf-8",
data: '{"fieldOne":"' + fieldOne + '", "fieldTwo":"' + fieldTwo + '"}', //"{}", //Must use "{}" for autocomplete functionality that requires not paramaters inorder for json to be compatable with IE 6
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
});
function AjaxSucceeded(result) {
if (result.d != null && result.d != '') {
alert(result.d); //result must be followed by .d to display the results, this is a json requirement
}
}
function AjaxFailed(result) {
alert(result.status + ' ' + result.statusText);
}
mike72
Member
721 Points
357 Posts
Re: JQuery and web services
Sep 24, 2010 04:40 PM|LINK
Hi VB,
Thanks for the great example...how would I then return the return value from the web service back to the front end?
Here is my front end :
<% using (Html.BeginForm()) { %> <%= Html.TextBox("Completion") %> <%= Html.TextBox("Gain") %> <%= Html.TextBox("Touchdown") %> <%= Html.TextBox("Interception") %> <button class="submit-form-button" type="submit" id="getQBRating">Submit</button> <% } %>Here is my JQuery :
$(".submit-form-button").click(function () { $.ajax({ type: "POST", url: "http://lovelyjubbly.info/NFLC.asmx/?op=GetQBRating", contentType: "application/json; charset=utf-8", data: '{"Completion":"' + Completion + '", "Gain":"' + Gain + '", "Touchdown":"' + Touchdown + '", "Interception":"' + Interception + '"}', //"{}", //Must use "{}" for autocomplete functionality that requires not paramaters inorder for json to be compatable with IE 6 dataType: "json" }); });And here is my web service :
[WebMethod] public double GetQBRating(double dblCompletion, double dblGain, double dblTouchdown, double dblInterception) { double dblResult; dblCompletion = ((dblCompletion - 30) * 0.05); if (dblCompletion < 0) { dblCompletion = 0; } if (dblCompletion > 2.375) { dblCompletion = 2.375; } dblGain = ((dblGain - 3) * 0.25); if (dblGain < 0) { dblGain = 0; } if (dblGain > 2.375) { dblGain = 2.375; } dblTouchdown = (dblTouchdown * 0.2); if (dblTouchdown > 2.375) { dblTouchdown = 2.375; } dblInterception = (2.375 - (dblInterception * 0.25)); if (dblInterception < 0) { dblInterception = 0; } dblResult = Math.Round((((dblCompletion + dblGain + dblTouchdown + dblInterception) / 6) * 100), 2); return dblResult; }I am new to all these technologies, so please bear with me if i ask some stupid questions!
raghav_khung...
All-Star
32835 Points
5563 Posts
MVP
Re: JQuery and web services
Sep 24, 2010 06:16 PM|LINK
Hi Mike,
The above poster has already told you where you will get the result i.e in "AjaxSucceeded" mthod for above case.
mike72
Member
721 Points
357 Posts
Re: JQuery and web services
Sep 24, 2010 07:04 PM|LINK
I have changed the JQuery to include the AjaxSucceeded and AjaxFailed methods :
$(".submit-form-button").click(function () { $.ajax({ type: "POST", url: "http://lovelyjubbly.info/NFLC.asmx/GetQBRating", contentType: "application/json; charset=utf-8", data: '{"Completion":"' + Completion + '", "Gain":"' + Gain + '", "Touchdown":"' + Touchdown + '", "Interception":"' + Interception + '"}', //"{}", //Must use "{}" for autocomplete functionality that requires not paramaters inorder for json to be compatable with IE 6 dataType: "json", success: AjaxSucceeded, error: AjaxFailed }); }); function AjaxSucceeded(result) { if (result.d != null && result.d != '') { $('#output').text(result.d); //result must be followed by .d to display the results, this is a json requirement } } function AjaxFailed(result) { $('#output').text(result.status + ' ' + result.statusText); }Changed the HTML to this :
<p> <% using (Html.BeginForm()) { %> <%= Html.TextBox("Completion") %> <%= Html.TextBox("Gain") %> <%= Html.TextBox("Touchdown") %> <%= Html.TextBox("Interception") %> <button class="submit-form-button" type="submit" id="getQBRating">Submit</button> <div id="output"></div> <% } %> </p>And changed the webservice to this :
[WebMethod] public double GetQBRating(double Completion, double Gain, double Touchdown, double Interception) { double Result; Completion = ((Completion - 30) * 0.05); if (Completion < 0) { Completion = 0; } if (Completion > 2.375) { Completion = 2.375; } Gain = ((Gain - 3) * 0.25); if (Gain < 0) { Gain = 0; } if (Gain > 2.375) { Gain = 2.375; } Touchdown = (Touchdown * 0.2); if (Touchdown > 2.375) { Touchdown = 2.375; } Interception = (2.375 - (Interception * 0.25)); if (Interception < 0) { Interception = 0; } Result = Math.Round((((Completion + Gain + Touchdown + Interception) / 6) * 100), 2); return Result; }Can anybody tell me whether I have everything right? When I do the button click I get the error :
'Completion' is undefined
karan@dotnet
All-Star
26228 Points
4596 Posts
Re: JQuery and web services
Sep 24, 2010 07:31 PM|LINK
In your jquery your params are undefined"
data: '{"Completion":"' + Completion + '", "Gain":"' + Gain + '", "Touchdown":"' + Touchdown + '", "Interception":"' + Interception + '"}',May be I have missed but I dont see the above params ie Completion, Touchdown etc.
If its texbox value the you need to get the textbox value and pass to it
Karan
~ Blog ~
Remember To Mark The Post(s) That Helped You As The ANSWER
VB_Gone-Wild
Participant
815 Points
437 Posts
Re: JQuery and web services
Sep 24, 2010 07:37 PM|LINK
I would start buy making all of your parameters string inside of you webmethod and do you convertion at the server. Generally when dealing with ajax/xml you deal with strings. If this does not help make sure you are calling the correct address of the service or in this case web method i.e page/method. Also when you are sending parameters make sure you are at the very least sending an empty string and not a null.
mike72
Member
721 Points
357 Posts
Re: JQuery and web services
Sep 25, 2010 01:27 PM|LINK
I have changed my JQuery (see below) and changed my web service to accept strings and then convert them, but I still get the same error. Can anybody help? This is my first attempt at JQuery and I am starting to get a little frustrated with it (although probably not helped by the fact that my computer has decided to start to die on me at the same time!)
$(".submit-form-button").click(function () { var Completion = $('input[name=Completion]').val(); var Gain = $('input[name=Gain]').val(); var Touchdown = $('input[name=Touchdown]').val(); var Interception = $('input[name=Interception]').val(); $.ajax({ type: "POST", url: "http://lovelyjubbly.info/NFLC.asmx/GetQBRating", contentType: "application/json; charset=utf-8", data: '{"Completion":"' + Completion + '", "Gain":"' + Gain + '", "Touchdown":"' + Touchdown + '", "Interception":"' + Interception + '"}', //"{}", //Must use "{}" for autocomplete functionality that requires not paramaters inorder for json to be compatable with IE 6 dataType: "json", success: AjaxSucceeded, error: AjaxFailed }); });I am also wondering if I might not be referencing all the scripts I need. This is the section of my page where I am doing this :
<asp:Content ID="Content4" ContentPlaceHolderID="ScriptContent" runat="server"> <script type="text/javascript" src="/scripts/jquery-1.4.1.js"></script> <script type="text/javascript" src="/scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="/scripts/qbrating.js"></script> </asp:Content>raghav_khung...
All-Star
32835 Points
5563 Posts
MVP
Re: JQuery and web services
Sep 25, 2010 01:34 PM|LINK
First of all remove one of them. Use either one of them. They both are same and the only diff is second one is the minified version of the first one.