Pass multiple instances into the controller's field of view using Ajax

Question

I am trying to send a List<Theatres> from a view to a controller using AJAX

each theates has the meanings theates (string), TheatresNumber (int), HomeCinemaID (int), RowAmount (int).

here is the model code:

  public class MovieTheaters { [Key] public int MovieTheatersID { get; set; } public int HomeCinemaID { get; set; } public string TheatersName { get; set; } public int NumberHall { get; set; } public int RowAmount { get; set; } //FK . public virtual HomeCinema HomeCinema { get; set; } public virtual ICollection<Rows> Rows { get; set; } } 

the user enters the number of theaters he needs, then the cycle gives the opportunity to create them.

view code:

  @model CimenaCityProject.Models.MovieTheaters @{ ViewBag.Title = "Create"; } <h2>Create New Theatres</h2> @Html.AntiForgeryToken() @{ int? maxNumberOfTheatres = ViewBag.number; if (!maxNumberOfTheatres.HasValue) { maxNumberOfTheatres = 1; } } @using (Html.BeginForm("Create", "Theatres", FormMethod.Post, new { name = "TheatresForm", id = "TheatresForm" })) { @Html.ValidationSummary(true) <table> <tbody> @for (int i = 0; i < maxNumberOfTheatres.Value; i++) { <tr> <td id="NewTheaters"> @ViewBag.ErrorMassage <div style="position:relative; top: 0px; left: 205px; width: 278px;"> @string.Format("Theares Number {0}", i + 1) </div> <div> <br /> <div class="form-group"> @Html.LabelFor(model => model.HomeCinemaID, "HomeCinemaID", new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.DropDownList("HomeCinemaID") @Html.ValidationMessageFor(model => model.HomeCinemaID) </div> <br /> </div> <div class="form-group"> @Html.LabelFor(model => model.TheatersName, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.TheatersName) @Html.ValidationMessageFor(model => model.TheatersName) </div> <br /> </div> <div class="form-group"> @Html.LabelFor(model => model.NumberHall, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.NumberHall) @Html.ValidationMessageFor(model => model.NumberHall) </div> <br /> </div> <div class="form-group"> @Html.LabelFor(model => model.RowAmount, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.RowAmount) @Html.ValidationMessageFor(model => model.RowAmount) </div> </div> </div> </td> </tr> } </tbody> </table> } <div class="form-group"> <div class="col-lg-push-9"> <input type="submit" name="Create" value="Create" id="Create" /> </div> </div> <div id="divLoading" style="display: none; align-items: center"> <img src="~/Image/Elements/ajax-loader.gif" /> </div> <div id="divResult"></div> <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") } 

Ajax Code:

 <script type="text/javascript"> $(document).on('#TheatresForm' ,function () { var NewTheaters = []; $('table tbody tr td').each(function () { NewTheaters.push({ HomeCinemaID: $('#HomeCinemaID').val(), TheatersName: $('#TheatersName').val(), NumberHall: $('#NumberHall').val(), RowAmount: $('#RowAmount').val() }); }); $('#divLoading').show() $.ajax({ url: '@Url.Action()', type: 'POST', traditional : true, data: JSON.stringify(NewTheaters), contentType: 'application/json; charset=utf-8', success: function (result) { success(result) }, error: function (result) { alert(result.responseText + "Error") $('#divLoading').hide() } }); function success(result) { alert("success") $('#divResult').html(result) $('#divLoading').hide() } }); 

Controller code

  // GET: /Theatres/Create public ActionResult Create(int? id, int? number) { if (id == null) { ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName"); number = 1; ViewBag.number = number; } else { ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas.Where(x => x.HomeCinemaID == id).ToArray(), "HomeCinemaID", "CinemaName"); ViewBag.number = number; } ViewBag.ErrorMassage = ""; return View(); } // POST: /Theatres/Create [HttpPost] public ActionResult Create( List<MovieTheaters> NewTheaters) { foreach (var movietheaters in NewTheaters) { if (db.Theaters.Where(x => x.TheatersName == movietheaters.TheatersName && x.HomeCinemaID == movietheaters.HomeCinemaID).FirstOrDefault() == movietheaters) { ViewBag.ErrorMassage = "You cant add this Theatres again. Choose another name."; ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas.Where(x => x.HomeCinemaID == movietheaters.HomeCinemaID).ToArray(), "HomeCinemaID", "CinemaName", movietheaters.HomeCinemaID); return View(movietheaters); } else { if (ModelState.IsValid) { db.Theaters.Add(movietheaters); db.SaveChanges(); return RedirectToAction("Create", "Rows", new { id = movietheaters.MovieTheatersID, rwcpcty = movietheaters.RowAmount, last = 1 }); } } ViewBag.ErrorMassage = "Try again later"; ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName", movietheaters.HomeCinemaID); return View(movietheaters); } ViewBag.ErrorMassage = "Try again later"; ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName"); return View(); } 

evry time it throws me zero .. what do i need to do?

Answer 1

In my opinion, the best you can implement is that it will certainly work for you:

Change your html to this: First change your model to this model.

 @model List<CimenaCityProject.Models.MovieTheaters> @{ var selectlist = (SelectList)ViewBag.HomeCinemaID; } 

Then your form should look like this: the changes I made are also indexed to all your editors and drop-down lists, which will give you a different name for each field. Do not forget to associate your list with a drop-down list, as I wrote my "Your List":

 @using (Html.BeginForm("Create", "Theatres", FormMethod.Post, new { name = "TheatresForm", id = "TheatresForm" })) { @Html.ValidationSummary(true) <table> <tbody> @for (int i = 0; i < maxNumberOfTheatres.Value; i++) { <tr> <td id="NewTheaters"> @ViewBag.ErrorMassage <div style="position:relative; top: 0px; left: 205px; width: 278px;"> @string.Format("Theares Number {0}", i + 1) </div> <div> <br /> <div class="form-group"> @Html.LabelFor(model => model[i].HomeCinemaID, "HomeCinemaID", new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.DropDownListFor(model => model[i].HomeCinemaID,selectlist) @Html.ValidationMessageFor(model => model[i].HomeCinemaID) </div> <br /> </div> <div class="form-group"> @Html.LabelFor(model => model[i].TheatersName, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model[i].TheatersName) @Html.ValidationMessageFor(model => model[i].TheatersName) </div> <br /> </div> <div class="form-group"> @Html.LabelFor(model => model[i].NumberHall, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model[i].NumberHall) @Html.ValidationMessageFor(model => model[i].NumberHall) </div> <br /> </div> <div class="form-group"> @Html.LabelFor(model => model[i].RowAmount, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model[i].RowAmount) @Html.ValidationMessageFor(model => model[i].RowAmount) </div> </div> </div> </td> </tr> } </tbody> </table> } <div class="form-group"> <div class="col-lg-push-9"> <input type="button" name="Create" value="Create" id="Create" onclick="SaveTheatre()" /> </div> </div> <div id="divLoading" style="display: none; align-items: center"> <img src="~/Image/Elements/ajax-loader.gif" /> </div> <div id="divResult"></div> <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") } 

Now your script code should be like this, just submit your whole form, serializing it to jquery $('form:first').serializeArray(); :

 function SaveTheatre() { $.ajax({ url: '@Url.Action("Create","Home")', type: 'POST', data: $('form:first').serializeArray(), success: function(result) { success(result) }, error: function(result) { alert(result.responseText + "Error") $('#divLoading').hide() } }); } function success(result) { alert("success") $('#divResult').html(result) $('#divLoading').hide() } 

Everything is done, now you will get your values ​​in the controller :)

Answer 2

OK. many thanks @Rohit Arora and @Hemant Bhagat here the full answer works very well.

Code controller:

  // GET: /Theatres/Create public ActionResult Create(int? id, int? number) { if (id == null) { ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName"); number = 1; ViewBag.number = number; } else { ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas.Where(x => x.HomeCinemaID == id).ToArray(), "HomeCinemaID", "CinemaName"); ViewBag.number = number; } ViewBag.ErrorMassage = ""; return View(); } // POST: /Theatres/Create [HttpPost] public ActionResult Create( List<MovieTheaters> NewTheaters) { foreach (var movietheaters in NewTheaters) { if (db.Theaters.Where(x => x.TheatersName == movietheaters.TheatersName && x.HomeCinemaID == movietheaters.HomeCinemaID).FirstOrDefault() == movietheaters) { ViewBag.ErrorMassage = "You cant add this Theatres again. Choose another name."; ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas.Where(x => x.HomeCinemaID == movietheaters.HomeCinemaID).ToArray(), "HomeCinemaID", "CinemaName", movietheaters.HomeCinemaID); return View(movietheaters); } else { if (ModelState.IsValid) { db.Theaters.Add(movietheaters); db.SaveChanges(); return RedirectToAction("Create", "Rows", new { id = movietheaters.MovieTheatersID, rwcpcty = movietheaters.RowAmount, last = 1 }); } } ViewBag.ErrorMassage = "Try again later"; ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName", movietheaters.HomeCinemaID); return View(movietheaters); } ViewBag.ErrorMassage = "Try again later"; ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName"); return View(); } 

View code:

  @model List<CimenaCityProject.Models.MovieTheaters> @{ ViewBag.Title = "Create"; var selectlist = (SelectList)ViewBag.HomeCinemaID; } <h2>Create New Theatres</h2> @Html.AntiForgeryToken() @{ int? maxNumberOfTheatres = ViewBag.number; if (!maxNumberOfTheatres.HasValue) { maxNumberOfTheatres = 1; } } @using (Html.BeginForm("Create", "Theatres", FormMethod.Post)) { @Html.ValidationSummary(true) <table> <tbody> @for (int i = 0; i < maxNumberOfTheatres.Value; i++) { <tr> <td id="NewTheaters" style="width:700px"> @ViewBag.ErrorMassage <div style="position:relative; top: 0px; left: 205px; width: 278px;"> @string.Format("Theares Number {0}", i + 1) </div> <div> <br /> <div class="form-group"> @Html.LabelFor(model => model[i].HomeCinemaID, "HomeCinemaID", new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.DropDownListFor(model => model[i].HomeCinemaID, selectlist) @Html.ValidationMessageFor(model => model[i].HomeCinemaID) </div> <br /> </div> <div class="form-group"> @Html.LabelFor(model => model[i].TheatersName, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model[i].TheatersName) @Html.ValidationMessageFor(model => model[i].TheatersName) </div> <br /> </div> <div class="form-group"> @Html.LabelFor(model => model[i].NumberHall, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model[i].NumberHall) @Html.ValidationMessageFor(model => model[i].NumberHall) </div> <br /> </div> <div class="form-group"> @Html.LabelFor(model => model[i].RowAmount, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model[i].RowAmount) @Html.ValidationMessageFor(model => model[i].RowAmount) </div> </div> </div> </td> </tr> } </tbody> </table> } <div class="form-group"> <div class="col-lg-push-9"> <input type="button" name="Create" value="Create" id="Create" onclick="SaveTheatre()" /> </div> </div> <div id="divLoading" style="display: none; align-items: center"> <img src="~/Image/Elements/ajax-loader.gif" /> </div> <div id="divResult"></div> <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") } 

Ajax Code:

  <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/jquery.sigmacape.unobtrusive-1.1.2.js"></script> <script type="text/javascript"> function SaveTheatre() { $.ajax({ url: '@Url.Action()', type: 'POST', traditional : true, data: $('form:first').serializeArray(), // contentType: 'application/json; charset=utf-8', ---> this will give you Exeption Invalid JSON Primitive!! success: function (result) { success(result) }, error: function (result) { alert(result.responseText + "Error") $('#divLoading').hide() } }); } function success(result) { alert("success") $('#divResult').html(result) $('#divLoading').hide() } </script>