使用Ajax将多个实例传递给控制器

Question

使用Ajax将多个实例传递给控制器

Ziv*_*iel 5 ajax model-view-controller jquery

我尝试List<Theatres>使用AJAX从视图发送到控制器

每个theates都有一个TheatresName(字符串),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; }

    }

Run Code Online (Sandbox Code Playgroud)

用户输入他需要的剧院数量然后为循环提供创建它们的选项.

查看代码:

    @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")
     }

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

控制器代码

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

Run Code Online (Sandbox Code Playgroud)

evry time它给我一个空..我要做什么？

Answer 1

Roh*_*ora 1

根据我的说法，你可以实现的最好的就是这个，这肯定对你有用：

将您的 html 更改为：首先将您的上述模型更改为此模型

@model List<CimenaCityProject.Models.MovieTheaters>

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

Run Code Online (Sandbox Code Playgroud)

那么你的表单应该是这样的，我所做的更改也为你的所有编辑器和下拉列表提供了索引，这将为每个字段提供不同的名称。请记住将您的列表绑定到您的下拉列表，因为我已经写了他们的“您的列表”：

@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")
         }

Run Code Online (Sandbox Code Playgroud)

现在你的脚本代码应该是这样的，只需通过在 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()
}

Run Code Online (Sandbox Code Playgroud)

全部完成，您现在将在控制器中获得您的值:)

归档时间：	11 年，2 月前
查看次数：	183 次
最近记录：	11 年，2 月前