user4855057 user4855057 - 1 month ago 11x
Ajax Question

jQuery to call Action Method in ASP.NET MVC C# by Ajax

I have tried for hours to get this working, and I am really hoping one of you knows (a heck of a lot) more about this than I. When the client keys up in a textbox, I would like to call the MVC C# controller method called updateOrder(). Ideally, I would like to access form elements with a FormCollection (the form is called "createOrder").

In the controller, I have:


public static void updateOrder(){
string s = "asdf";

The string declaration above is breakpointed. In the view, I have a method I basically copy and pasted that I found on stackoverflow:


function updateOrderJS() {
var $form = $('form[id="createOrder"]');
$.ajax({type : "POST",
url : $form.attr('action'),
data : $form.serialize(),
error : function(xhr, status, error) {},
success : function(response) {
return false;

The event is simply:



The updateOrderJS() method fires (checked with an alert), but the breakpoint does not.


In Asp.Net MVC, you do not need to decorate your method with WebMethod. You just create an Action (which is a method) and return a result from it. For sample:

public class CustomerController : Controller 
   public ActionResult Index() 
       return View();

   public ActionResult UpdateOrder()
      // some code
      return Json(new { success = true, message = "Order updated successfully" }, JsonRequestBehavior.AllowGet);

And in your View, you could try a javascript like this (using the $.ajax jquery method -- see the comments):

    url: '@Url.Action("UpdateOrder")', // to get the right path to controller from TableRoutes of Asp.Net MVC
    dataType: "json", //to work with json format
    type: "POST", //to do a post request 
    contentType: 'application/json; charset=utf-8', //define a contentType of your request
    cache: false, //avoid caching results
    data: {}, // here you can pass arguments to your request if you need
    success: function (data) {
         // data is your result from controller
        if (data.success) { 
    error: function (xhr) {