Reputation: 149
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
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
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