jquery - 使用 Ajax 将 View 中的多个实例传递给 Controller

Question

我尝试发送 List<Theatres>使用 AJAX 从 View 到 Controller

每个theates有 TheatresName (string)、TheatresNumber (int)、HomeCinemaID (int)、RowAmount (int)。

此处模型代码:

 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; }

    }

用户输入他需要多少个剧院，然后 for 循环给出创建它们的选项。

查看代码:

    @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 代码:

<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 代码

     // 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();
    }

每次它都会给我一个空值..我必须做什么？

Answer 1

好的。非常感谢@Rohit Arora 和@Hemant Bhagat这里的完整答案效果很好。

代码 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();
    }

查看代码:

    @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 代码:

    <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>