Calling ASP NET MVC Action Methods from JavaScript

Question

I have sample code like this     lt div class  cart  gt         lt a onclick  addToCart   Model productId     class  button  gt  lt span gt Add to Cart lt  span gt  lt  a gt    lt  div gt    lt div class  wishlist  gt         lt a onclick  addToWishList   Model productId     gt Add to Wish List lt  a gt    lt  div gt    lt div class  compare  gt         lt a onclick  addToCompare   Model productId     gt Add to Compare lt  a gt    lt  div gt        How can I write JavaScript code to call the controller action method

User · Answer

You can simply add this when you are using same controller to redirect  var url    YourActionName parameterName     parameterValue  window location href   url

User · Answer

You are calling the addToCart method and passing the product id  Now you may use jQuery ajax to pass that data to your server side action method d  jQuery post is the short version of jQuery ajax   function addToCart id        post   Url Action  Add   Cart     id id   function data          do whatever with the result            If you want more options like success callbacks and error handling  use jQuery ajax   function addToCart id        ajax     url    Url Action  Add   Cart       data    id  id      success  function data         call is successfully completed and we got result in data        error function  xhr  ajaxOptions  thrownError                       some errror  some show err msg to user and log the error                     alert xhr responseText                                    When making ajax calls  I strongly recommend using the Html helper method such as Url Action to generate the path to your action methods    This will work if your code is in a razor view because Url Action will be executed by razor at server side and that c  expression will be replaced with the correct relative path  But if you are using your jQuery code in your external js file  You may consider the approach mentioned in this answer

User · Answer

If you do not need much customization and seek for simpleness  you can do it with built-in way - AjaxExtensions ActionLink method    lt div class  cart  gt         Ajax ActionLink  Add To Cart    AddToCart   new   productId   Model productId    new AjaxOptions     HttpMethod    Post       lt  div gt    That MSDN link is must-read for all the possible overloads of this method and parameters of AjaxOptions class  Actually  you can use confirmation  change http method  set OnSuccess and OnFailure clients scripts and so on

User · Answer

You can set up your element with  value   model productId    and   onclick  addToWishList this value

User · Answer

Javascript Function  function AddToCart id       ajax      url    Url Action  AddToCart    ControllerName        type   GET      dataType   json      cache  false     data     id   id       success  function  results            alert results           error  function          alert  Error occured                      Controller Method to call   HttpGet    public JsonResult AddToCart string id          string newId   id       return Json newId  JsonRequestBehavior AllowGet

User · Answer

Use jQuery ajax   function AddToCart id         ajax         url   urlToController         data    id  id         done function           alert  Added                http   api jquery com jQuery ajax

User · Answer

If you want to call an action from your JavaScript  one way is to embed your JavaScript code  inside your view   cshtml file for example   and then  use Razor  to create a URL of that action     function            sampleDiv   click function                        While this code is JavaScript  but because it s embedded inside          a cshtml file  we can use Razor  and create the URL of the action           Don t forget to add    around the url because it has to become a               valid string in the final webpage                     var url     Url Action  ActionName    Controller

User · Answer

Simply call your Action Method by using Javascript as shown below    var id   model Id    if you want to pass an Id parameter window location href     Url Action  Action    Controller       id    Hope this helps

[javascript] Calling ASP.NET MVC Action Methods from JavaScript

Examples related to javascript

Examples related to asp.net-mvc

Examples related to asp.net-mvc-3

Examples related to razor