CODEWITHSUNDEEP
c#.netasp.net-mvc
Medhanie W.
Medhanie W.

Reputation: 149

How to pass List<Model> from view into Controller

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.

Upvotes: 2

Views: 1937

Answers (2)

Rashid Ali
Rashid Ali

Reputation: 617

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.

Upvotes: 2

brian
brian

Reputation: 692

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?

Upvotes: 0

Related Questions