How to pass List<Model> from view into Controller

Question

I'm trying to pass a model class of List<> type from a view into a controller action method.

I couldn't find an already built in method from mvc to complete this task, and I am not much familiar with ajax/jquery. Few of the previously posted question doesn't really fit to my needs and couldn't get enough. Any help please.

I've a model class, I am able to populate all the data in a view, then a user will make changes to any of those data and the whole data in being displayed in the table should be send into a controller.

A method in my controller is waiting for List type of Model class.

public ActionResult Save(List<MyModel> myModel){
   ...
}

How can I send my model class into the method in my controller?

I tried the following js code but not working at all

Here is my Model class

public class MyModel
{
    public int spi_id { get; set; }
    public int s_id { get; set; }
    public int st_id { get; set; }
   }

Here is my View

@model IEnumerable<MyModel>

<form action="@Url.Action("Save", "Home")" method="post">

<table class="table" id="tblIe">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.s_id)
        </th>

    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.s_id)
            </td>

        </tr>
    }

</table>
<input type="submit" name="send" value="Send" id="btnSend" />

<script type="text/javascript">
$(document).ready(function () {
 $("#btnSend").click(function (e) {
    alert("button click");
    e.preventDefault();

    var model = @Html.Raw(Json.Encode(Model))
    $.ajax({
        type: 'post',
        url: '@Url.Action("Save", "Home")',
        data: JSON.stringify({ myModel: model }),
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        success: function (data) {
            alert(data);
        }
    });
    });
});

</script>

Here is my controller

[HttpPost]
    public ActionResult Save(List<MyModel> myModel)
    {
        _service.SaveMyModel(myModel);

        return View("Index");
    }

I need to pass the entire content of this model as a LIST<> into my Save method in my Controller.

They are simple class attributes id int school_id int uniruq style_id int colour_id int image_type char(1) last_update smalldatetime last_update_by varchar(15) — Medhanie W.
– Medhanie W., Commented Sep 17, 2019 at 16:54
You will need to create a view model that contains a list of the MyModel classes and then bind that view model to the view. — user10728126
– user10728126, Commented Sep 17, 2019 at 16:57
There would be no need to use Javascript, model will be posted back with form. Can you show the html of your table? — Rashid Ali
– Rashid Ali, Commented Sep 17, 2019 at 17:32
as per your table html, there will be only a display of school_id, you cant edit anything. any input field missing? — Rashid Ali
– Rashid Ali, Commented Sep 17, 2019 at 17:59

Rashid Ali · Accepted Answer · 2019-09-17 19:08:18Z

2

Since you are using a list, foreach loop won't work to hold and post back the values of model. you would have to use for loop with indexer to create html elements for all the fields, change your table html as below:

change your model type to List, indexer won't work with IEnumerable

Edit: Html.DisplayFor will not post back the value, an input field is required to do so. you may use Html.HiddenFor for all the fields to achieve that as shown in the code.

@model List<MyModel>

<table>
  <tr><th> @Html.DisplayNameFor(model => model.school_id) </th></tr>
@for(int i = 0; i < Model.Count; i++)
{
  <tr>
        <td>
          @Html.DisplayFor(m=> m[i].school_id)
          @Html.HiddenFor(m=> m[i].school_id)
       </td>
  </tr>
}
</table>

and decorate your Save method with ActionName and HttpPost attributes, action name should be same as given in form definition in the view:

[ActionName("Index")]
[HttpPost]
public ActionResult Save(List<MyModel> myModel){
   ...
}

On button btnSend click it will post the model back to Save method, no need of any javascript.

edited Sep 17, 2019 at 19:08

answered Sep 17, 2019 at 18:11

Rashid Ali

6276 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Medhanie W. Over a year ago

I am using IEnumerable not List, that's why I used foreach loop. you can now look at the post, I have included all the source code

Rashid Ali Over a year ago

foreach loop will not help you to post back the model values, make changes as per the solution given in the answer to fix the problem.

Medhanie W. Over a year ago

thanks, i changed the foreach loop to forloop, It is only getting the right count of rows but all the fields have null value, and I got null in my database table. Why you think is this?

Rashid Ali Over a year ago

you can get values only for fields those have input fields created with on the view. you are using Html.DisplayFor for all the fields, it won't post back the values. an input field is required to achieve that.

Medhanie W. Over a year ago

So far so good, i am getting values now except for @Html.EnumDropDownListFor which there is no HiddenFor option. I don't want to create a separate input field to copy the value, because it is in the dropdownlist itself where the user will make changes.

|

brian · Accepted Answer · 2019-09-17 17:14:02Z

0

The endpoint expects MyModel object list but you are sending a single MyModel object. Also make sure you added [HttpPost] attribute on the top of "the public ActionResult Save "

If you can't send the list of object for some reason, you can create a new model which includes a list of MyModel.

Can you try to remove this line "var model = @Html.Raw(Json.Encode(Model))"? and just pass Model instead of model?

edited Sep 17, 2019 at 17:14

answered Sep 17, 2019 at 17:00

brian

6926 silver badges9 bronze badges

1 Comment

Medhanie W. Over a year ago

sorry, I missed to include the [HttpPost] but I had it since the beginning. How do I send MyModel object as a List is what I am not clear with.

Collectives™ on Stack Overflow

How to pass List<Model> from view into Controller

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related