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

Solution 1

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<string> Interests {set;get;}
}

And in your action method, specify [FromBody]

[HttpPost]
public PartialViewResult IndexPartial([FromBody] DashboardViewModel m)
{
    return PartialView("_IndexPartial",m);
}

Solution 2

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
{
}

Solution 3

//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 
<script src="~/Scripts/jquery-2.1.3.js"></script>
<script src="~/Scripts/dashboard.js"></script>
// If you want to capture your URL dynamically 

<div>
    <a class="dashboardUrl" href ="@Url.Action("IndexPartial","Dashboard")"> LinkText </a>
</div>
<div>
    <input class="myDate" type="text"/>
//OR
   @Html.EditorFor(model => model.MyDate) 
</div>

Solution 4

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)
     {}

View more solutions

Comments

[Reafidy]

Thanks, I understand regarding the Post/Get, but it appears in your code you are just posting one parameter of the model, is it not possible just to pass the entire model? The entire DashboardVIewModel.

[Julius Depulla]

@ Reafidy See full implementation below

[Julius Depulla]

@NEDian Thanks for Indentation

[Reafidy]

Thanks, using 'var viewModel = { Id : 1, MyDate:};' how do I get a value from a textbox on the page into the mydate parameter?

[Reafidy]

Sorry I was meaning how do I get a date from a textbox into the viewModel parameter?

[Reafidy]

Great, and sorry - once last question, how do I get the results of the ajax query to load in the "#DailyInvoiceItems" DIV?

[Julius Depulla]

Hope you can see the code changes and how you handle the result on success of ajax call

[Reafidy]

Using your code I can see the IndexPartial is fired and has the correct date but the page does not load the partial view in the DIV DailyInvoiceItems. It does not seem to do anything.

[Reafidy]

Using "text" did not work, I added my full controller code to help make sense of what I am trying to do.

[Julius Depulla]

That is not the reason. Look at your Action Method Implementation, it has to look like my one

[Reafidy]

Sorry but it still doesnt seem to work with changing the controller code to match yours. The only difference is I removed , 'JsonRequestBehavior.AllowGet' as System.Web.MVC is gone from asp.net 5.

[Julius Depulla]

You will need JsonRequestBehavior.AllowGet to allow json object to be returned from your controller to the view. It is disabled in ASP.NET MVC 5 for security reason, but if you need to return json data, that is how you enable it.

[Reafidy]

I cant use that code I get a compile error: The name 'JsonRequestBehavior' does not exist in the current context. Because System.Web.MVC does not exist in asp.net 5 mvc 6.

[Julius Depulla]

Please read this blog, you will get help on adding dependencies and also more tinyurl.com/o2dabre

[Reafidy]

I don't see how the articles you linked to will help. There is no dependency to add. System.Web.MVC will not work with asp.net 5.

[Dushan Perera]

@Reafidy Cool. Check out stackoverflow.com/a/20226220/40521 for a more detailed explanation on posting models to controllers.

[Julius Depulla]

@Reafidy Your action method was mvc 5, I gave you solution for mvc 5. If you need mvc 6, I gave you links to learn mvc 6. But now I realize you want mvc 6, I have just changed the action method to mvc 6, all you have to do is wrap your data in Json() method and changed the return type to IActionResult in mvc 6. See my edit in my code. an

[Imran Saeed]

Add some explanation to your code so that the answer is more reusable for others.

[George Geschwend]

@'Julius Depulla' This method of MVC/ajax/jquery wasn't working for me. I Debugged through the jquery and discovered that while in the ajax section there was a parser error. However the definition of var viewModel = { Id : 1, TotalSales: 50, ...etc. was fine, as I was able to peek into the viewModel var. only after it got into the ajax section, did it failed with parser error. Do you or anyone else have any ideas?

[George Geschwend]

One more quick question... Shouldent the json definining the var veiwModel have quotations around the words? Ergo: { "Id": 1, "MyDate": "myDate"...etc.. . If the answer is no, was curious to know why?

[Allen Wang]

Is it possible for jquery to read the model parameters back from the PartialView once it returns? For example, I want to create a new element and read the new Model Id passed back from the controller to add an additional dom element? I know I could include this in the partial view, but what if I want the Id for another section unrelated to the partial view, but with that element id?

[Dave]

This technique was amazingly simple and effective for me. I placed the ajax call on an actionlink with javascript, rather than on a submit button.