Pass multiple instance in view to controller using Ajax

Question

I try to send a List<Theatres> from view to controller by using AJAX

each theates have a TheatresName (string), TheatresNumber (int), HomeCinemaID (int), RowAmount (int).

here 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 enter how many theatres he need then for loop gave the option 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 throw me a null .. what i have to do?

Answer 1

According to me the best you can implement is this, This will surely work for you:

Change your html to this : Firstly change your above model to this model

@model List<CimenaCityProject.Models.MovieTheaters>

@{
   var selectlist = (SelectList)ViewBag.HomeCinemaID;
 }

Then your form should be like this, Changes i made are indexing also given to all your editors and dropdownlist which will give you a different name to every field. Remember to bind your list to your dropdown as i have written their "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 send your whole form by serializing it in 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()
}

All done , You will get your values now in controller :)

Answer 2

ok. thank you very much @Rohit Arora and @Hemant Bhagat here the full answer working very good.

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>