Pass Model To Controller using Jquery Ajax

Question

I am trying to pass my model to a controller using JQuery Ajax   I m not sure how to do this correctly   So far I have tried using Url Action but the model is blank   Note  none of the duplicate threads on stackoverflow seem to address using ASP NET 5 MVC 6   View       inpDateCompleted   change function              var url      Url Action  IndexPartial    DashBoard   Model  null                 DailyInvoiceItems   load url         Controller     HttpGet   public PartialViewResult IndexPartial DashBoardViewModel m              Do stuff with my model       return PartialView   IndexPartial

User · Answer

Use the following JS     document  ready function              btnsubmit   click function                      ajax                    type   POST                    url    Plan PlanManage         your action                  data      PlanForm   serialize        your form name it takes all the values of model                                 dataType   json                    success  function  result                         console log result                                              return false                  and the following code on your controller    HttpPost  public string PlanManage Plan objplan     model plan

User · Answer

C  class  public class DashBoardViewModel        public int Id   get  set        public decimal TotalSales   get  set        public string Url   get  set         public string MyDate  get  set         JavaScript file   Create dashboard js file   document  ready function              See the html on the View below         dashboardUrl   on  click   function            var url     this  attr  href                      inpDateCompleted   change function                     Construct your view model to send to the controller            Pass viewModel to ajax function              Date         var myDate       myDate   val                IF YOU USE  Html EditorFor    the myDate is as below         var myDate       MyDate   val            var viewModel     Id   1  TotalSales  50  Url  url  MyDate  myDate                ajax               type   GET               dataType   json               cache  false              url    Dashboard IndexPartial               data  viewModel               success  function  data  textStatus  jqXHR                      Do Stuff                      DailyInvoiceItems   html data Id                              error  function  jqXHR  textStatus  errorThrown                      Do Stuff or Nothing                                           ASP NET 5 MVC 6 Controller public class DashboardController         HttpGet      public IActionResult IndexPartial DashBoardViewModel viewModel                    Do stuff with my model         var model   new DashBoardViewModel    Id   23    Some more results here              return Json model               MVC View     Include jQuerylibrary    Include dashboard js   lt script src    Scripts jquery-2 1 3 js  gt  lt  script gt   lt script src    Scripts dashboard js  gt  lt  script gt     If you want to capture your URL dynamically    lt div gt       lt a class  dashboardUrl  href    Url Action  IndexPartial   Dashboard    gt  LinkText  lt  a gt   lt  div gt   lt div gt       lt input class  myDate  type  text   gt    OR     Html EditorFor model   gt  model MyDate    lt  div gt

User · Answer

Looks like your IndexPartial action method has an argument which is a complex object  If you are passing a a lot of data  complex object   It might be a good idea to convert your action method to a HttpPost action method and use jQuery post to post data to that  GET has limitation on the query string value    HttpPost  public PartialViewResult IndexPartial DashboardViewModel m         May be you want to pass the posted model to the parial view     return PartialView   IndexPartial        Your script should be  var url     Url Action  IndexPartial   YourControllerName      var model     Name   Shyju   Location  Detroit       post url  model  function res        res contains the markup returned by the partial view      You probably want to set that to some Div         SomeDivToShowTheResult   html res         Assuming Name and Location are properties of your DashboardViewModel class and SomeDivToShowTheResult is the id of a div in your page where you want to load the content coming from the partialview   Sending complex objects   You can build more complex object in js if you want  Model binding will work as long as your structure matches with the viewmodel class  var model     Name   Shyju                  Location  Detroit                  Interests     Code   Coffee   Stackoverflow                     ajax       type   POST       data  JSON stringify model       url  url      contentType   application json     done function  res            SomeDivToShowTheResult   html res         For the above js model to be transformed to your method parameter  Your View Model should be like this   public class DashboardViewModel     public string Name  set get     public string Location  set get     public List lt string gt  Interests  set get       And in your action method  specify  FromBody    HttpPost  public PartialViewResult IndexPartial  FromBody  DashboardViewModel m        return PartialView   IndexPartial  m

User · Answer

As suggested in other answers it s probably easiest to  POST  the form data to the controller  If you need to pass an entire Model Form you can easily do this with serialize   e g       myform   on  submit   function e       e preventDefault         var formData     this  serialize           post   student update   formData  function response              Do something with response               So your controller could have a view model as the param e g     HttpPost   public JsonResult Update StudentViewModel studentViewModel        Alternatively if you just want to post some specific values you can do       myform   on  submit   function e       e preventDefault         var studentId     this  find   Student StudentId        var isActive     this  find   Student IsActive           post   my url    studentId   studentId  isActive   isActive   function response              Do something with response               With a controller like         HttpPost       public JsonResult Update int studentId  bool isActive

[asp.net-mvc] Pass Model To Controller using Jquery/Ajax

Examples related to asp.net-mvc

Examples related to asp.net-core

Examples related to asp.net-core-mvc