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

Question

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 l

Answer 1

It looks like you're putting the URL of the MVC route in the action attribute of your <form> tag. I can't see what that attribute looks like because you didn't post your html, but from what I can see the value of that attribute might be wrong.

Most of the time, the URL to a specific MVC action is http://ServerDomain/Path(IfAny)/ControllerName/ActionName. For example, if you have a controller and action like this...

public class StackController
{
    [HttpPost]
    public ActionResult Overflow()
    {
        return View();
    }
}

...and your ASP.NET application is deployed to www.example.com, the URL in the action attribute of your <form> tag would be http://www.example.com/Stack/Overflow.

Of course, it's possible for other settings in your ASP.NET MVC to change these URLs, such as the route setup in your global.asax's RegisterRoutes method, or perhaps if your controllers are divided into Areas. If the URL of your <form> looks correct, please post the html along with any relevant controller routing code in your ASP.NET app.

If your form is inside of a Razor view (cshtml file), you can use <form action="@Url.Action({ controller = "ControllerName", action = "ActionName" })" method="post"> to generate the correct form URL.

Answer 2

In MVC, you don't need the [WebMethod] stuff - you just can have a regular controller action returning an ActionMethod (or null if you don't need a return value). The WebMethod attribute with static methods is for WebForms, not MVC.

public ActionMethod updateOrder(MyModel someModel) {
    // Do something
    return null;
}

Your URL in the javascript would be the URL to that action, which you can get to in Razor using @Url.Action("updateOrder", "Orders"), where "Orders" is the name of your controller.

Answer 3

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();
   }

   [HttpPost]
   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):

$.ajax({
    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) { 
            alert(data.message);
        }
    },
    error: function (xhr) {
        alert('error');
    }
});

Answer 4

1. Ensure "url" is in the format page.aspx/updateOrder.

2. Specify datatype: json

3. Ensure your updateOrderJS() is being called.

4. Ensure contentType: "application/json; charset=utf-8" is included.

Note: [WebMethod] is used for calling webforms methods, not MVC.