Friday, November 18, 2011

Ajax Call using Asp.net MVC Controller

I used to make a ajax call to .svc file.

ASP.Net, Ajax, Restful call.
The following example is a C# restful class makes the rest call possible and the JavaScript code that calls the AjaxDataService.svc end point.

C#

[ServiceContract]
public interface ITestService
{
    [OperationContract]
    [WebGet(ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetJsonData/{param}")]
    string GetJsonData(string text);
}
[ServiceBehavior(Name = "WCFHost.AjaxDataService",
    Namespace = "http://localhost:2469/"
    InstanceContextMode = InstanceContextMode.PerCall, 
    ConcurrencyMode = ConcurrencyMode.Multiple),
    AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]    
public class TestService : ITestService
{
    public string GetJsonData(string param)
    {
        return GetData2(param);
    }
}

JavaScript
function AjaxGrid(id) {
    this.GetJsonData = function (object1, param) {
        var statusNode = $(".Status");
        jQuery.ajax({
            url: "WCFHost/AjaxDataService.svc/GetJsonData?param=" + param,
            type: "POST", dataType: "json", async: true,
            beforeSend: function () { statusNode.text("Do Something on Before"); },
            success: function (xhr) { statusNode.text("Do Something on Success"); },
            complete: function () { statusNode.text("Do Something on Complete"); },
            error: function () { statusNode.text("Do Something on No Way!"); }
        });
    }
}


However, with asp.net MVC, you can make calls directly to specified controller.  

in a AwesomeController.cs
public class SearchController : Controller
{
   [HttpPost]
   public JsonResult GetJsonData(string param)
   {
       return Json(GetData2(param));
   }
}
JavaScript
function AjaxGrid(id) {
    this.GetJsonData = function (object1, param) {
        var statusNode = $(".Status");
        jQuery.ajax({
            url: "AwesomeController/GetJsonData?param=" + param,
            type: "POST", dataType: "json", async: true,
            beforeSend: function () { statusNode.text("Do Something on Before"); },
            success: function (xhr) { statusNode.text("Do Something on Success"); },
            complete: function () { statusNode.text("Do Something on Complete"); },
            error: function () { statusNode.text("Do Something on No Way!"); }
        });
    }
}


No comments: