Enable Jquery Ajax calls to Webservice methods in ASP.NET

if you want to make Jquery Ajax calls to ASP.NET webservice methods in a asmx file you need to remember two things

1. to add following lines of code into the web.config file

<webServices>
 <protocols>
 <add name="HttpGet"/>
 <add name="HttpPost"/>
 </protocols>
 </webServices>

2. Make sure not place your asp.net webservices in a separate folder why? it will cause Cross-domain call error: you can’t make XMLHttpRequest calls from a different location than your application root(even if they are in the same machine the webservice and the application should be under the same folder),  This is a constrain imposed by the browser not AJAX, if you want to call a third party webservice you should create a bridge webservice, this webservice should be created under your application’s project and will serve as a bridge between the client and the third party webservice: the client would call your webservice and in turn it would call the third party webservice and return the result to the client.

How invoke ASP.NET MVC Action methods using Jquery

Following code snippet demonstrate one way of invoking an action method in a ASP.NET MVC controller using JQuery. Here we are using html helper Raw() method to invoke the the view helper @url.Action(). This method will accept the Action name, controller name and RouteValueDictionary parameter value collection. In this example the action method is returning a view therefore we have set it to javascript location property. Once user click on the reset button system will navigate to the view call ActionMethodName. In this scenario reset button is placed inside a view with a Model properties.

 //on Reset click reload the form
        $(".Reset").click(function () {
            location = '@Html.Raw(@Url.Action("EditFeesHeader", "FeesHeader", new RouteValueDictionary(new { CCBApprovalID = Model.CCBApprovalId, DoE = Model.DoE })))';
        });

There can be a situation where you have to invoke an action method using Jquery with out Model data. In such situations you may need to collect the data using JQuery and bind it to action method call. Following code shows how to invoke action methods in such situations.

  //On cancel click back to CCBApproval edit screen
        $(".Cancel").click(function () {
            var Val1 = $('.ccbid').val();
            location = '@Url.Action("<ActionName>", "<Controllername>")' 
 + "?<parameter1>=" + Val1 + "&<parameter2>=val2";
        });

Here we directly invoke the view helper url.action() method. The method call will create the link without parameter values. Next step will be constructing the parameter query string with the values retrieved with JQuery.