Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Before all I could say, that you choose not the easiest way. ScriptMethods is easy to use together with ASP.NET ScriptManager and not with jQuery. I’ll recommend you better use JSON-enabled WCF HTTP Services (better as RESTfull Service) instead of ASMX Webservice which you try to use now. Nevertheless, one can makes you code working without using any Microsoft technologies on the client side.</p> <p>First of all verify Server side.</p> <ol> <li>Rename webmethods.aspx to webmethods.asmx.</li> <li><p>Verify that you placed Inside of \ and a httpHandlers for asmx extension (ScriptHandlerFactory) also exist in the config:</p> <pre><code>&lt;configuration&gt; &lt;!-- ... --&gt; &lt;system.web&gt; &lt;webServices&gt; &lt;protocols&gt; &lt;add name="HttpGet"/&gt; &lt;/protocols&gt; &lt;/webServices&gt; &lt;httpHandlers&gt; &lt;!-- ... --&gt; &lt;add verb="*" path="*.asmx" type="System.Web.Script.Services.ScriptHandlerFactory" validate="false"/&gt; &lt;/httpHandlers&gt;&lt;/system.web&gt;&lt;/configuration&gt; </code></pre></li> <li><p>Verify that [ScriptService] attribute ([System.Web.Script.Services.ScriptService] if you like full names) set for your class inherited from System.Web.Services.WebService.</p></li> </ol> <p>Now you could test the service. Open in you Web-Browser URL like <a href="http://localhost/webmethods.asmx/AjaxGet?id=li1234" rel="noreferrer">http://localhost/webmethods.asmx/AjaxGet?id=li1234</a> If you receive back something like<br/> <code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;</code><br/> <code>&lt;string xmlns="http://tempuri.org/"&gt;li1234&lt;/string&gt;</code></p> <p>You can be sure that you service part works fine.</p> <p><strong>Remark:</strong> Independ on “ResponseFormat = System.Web.Script.Services.ResponseFormat.Json” attribute the service answer with XML responses if “Content-Type:application/json;” not set in the request.</p> <p>Now we’ll fix the client code. I hope that comments which I placed in the following code explain all.</p> <p>One more small remark. In the last part of code I call one more “complex” web method:</p> <pre><code>[WebMethod] [ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] public OutputData AjaxGetMore (InputData input) { return new OutputData () { id = input.id, message = "it's work!", myInt = input.myInt+1 }; } </code></pre> <p>Where </p> <pre><code>public class OutputData { public string id { get; set; } public string message { get; set; } public int myInt { get; set; } } public class InputData { public string id { get; set; } public int myInt { get; set; } } </code></pre> <p>Now only JavaScript code which use in some places JSON plugin, which could be replaced with Crockford's json2.js, if somebody prefer it.</p> <pre><code>var id = "li1234"; // version 1 - works var idAsJson = '"' + id + '"'; // string serializes in JSON format $.ajax({ type: "GET", url: "/webmethods.asmx/AjaxGet?id=" + idAsJson, contentType: "application/json; charset=utf-8", success: function(msg) { alert(msg.d); // var msg = {d: "li1234"} }, error: function(res, status) { if (status ==="error") { // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace var errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message); } } }); // version 2 with respect of JSON plugin $.ajax({ type: "GET", url: "/webmethods.asmx/AjaxGet?id=" + $.toJSON(id), contentType: "application/json; charset=utf-8", success: function(msg) { alert(msg.d); // var msg = {d: "li1234"} }, error: function(res, status) { if (status ==="error") { // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace var errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message); } } }); // version 3 where jQuery will construct URL for us $.ajax({ type: "GET", url: "/webmethods.asmx/AjaxGet", data: {id: $.toJSON(id)}, dataType: "json", contentType: "application/json; charset=utf-8", success: function(msg) { alert(msg.d); // var msg = {d: "li1234"} }, error: function(res, status) { if (status ==="error") { // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace var errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message); } } }); // version 4. We set "Content-Type: application/json" about our data, but we use no // not 'dataType: "json"' parameter. Then we have "Accept: */*" in the request // instead of "Accept: application/json, text/javascript, */*" before. // Everithing work OK like before. $.ajax({ type: "GET", url: "/webmethods.asmx/AjaxGet", data: {id: $.toJSON(id)}, contentType: "application/json; charset=utf-8", success: function(msg) { alert(msg.d); // var msg = {d: "li1234"} }, error: function(res, status) { if (status ==="error") { // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace var errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message); } } }); // version 5. If we don't place "Content-Type: application/json" in our reqest we // receive back XML (!!!) response with "HTTP/1.1 200 OK" header and // "Content-Type: text/xml; charset=utf-8" which will be placed. // How one can read in // http://weblogs.asp.net/scottgu/archive/2007/04/04/json-hijacking-and-how-asp-net-ajax-1-0-mitigates-these-attacks.aspx), // ASP.NET AJAX will not make JSON serialized of response data for // security reasons. $.ajax({ type: "GET", url: "/webmethods.asmx/AjaxGet", data: {id: $.toJSON(id)}, dataType: "json", //contentType: "application/json; charset=utf-8", success: function(msg) { alert(msg.d); // var msg = {d: "li1234"} }, error: function (res, status, ex) { // the code here will be works because of error in parsing server response if (res.status !== 200) { // if not OK // we receive exception in the next line, be var errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message); } else { alert("status=" + status + "\nex=" + ex + "\nres.status=" + res.status + "\nres.statusText=" + res.statusText + "\nres.responseText=" + res.responseText); } } }); // version 6. Send more komplex data to/from the service var myData = { id: "li1234", myInt: 100} $.ajax({ type: "GET", url: "/webmethods.asmx/AjaxGetMore", data: {input:$.toJSON(myData)}, dataType: "json", contentType: "application/json; charset=utf-8", success: function(msg) { // var msg = {__type: "Testportal.OutputData", id: "li1234", message: "it's work!", myInt:101} alert("message=" + msg.d.message + ", id=" + msg.d.id + ", myInt=" + msg.d.myInt); }, error: function(res, status) { if (status ==="error") { // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace var errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message); } } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload