使用 ViewModel 添加模型的多个实例答案

【问题标题】：Using ViewModel to add multiple instances of a model使用 ViewModel 添加模型的多个实例
【发布时间】：2015-12-14 07:25:08
【问题描述】：

我有模型事件和票

public class Event
{
    public int EventID { get; set; }
    [Required]
    public String Name { get; set; }
    [Required]
    public String Location { get; set; }

    [Required]
    [DataType(DataType.Date)]
    public DateTime Date { get; set; }
    [Required]
    [DataType(DataType.MultilineText)]
    public String Description { get; set; }
    [Required]
    public int TicketsAvailable { get; set; }
    //navigation property
    public virtual ICollection<Order> Order { get; set; }
    //navigation property
    public virtual ICollection<Ticket> Ticket { get; set; }
}

public class Ticket
{
   public int TicketID { get; set; }
   [Required]
   [ForeignKey("Event")]
   //foreign key
    public int EventID { get; set; }
   [Required]
   public string Description { get; set; }
   [Required]
   public float Price { get; set; }
    //navigation property
    public virtual Event Event { get; set; }
    //navigation property
    public ICollection<OrderDetails> OrderDetails { get; set; }
}

我创建了两个视图模型，允许我为每个事件添加多个门票

public class TicketVm
{
    [Required]
    public string Description { get; set; }
    [Required]
    public float Price { get; set; }
}

public class CreateTicketVm
{
    public int EventId { get; set; }
    public List<TicketVm> Tickets { set; get; }
}

然后我有一个允许用户创建新事件的视图。然后，当他们提交此事件时，他们将被定向到 CreateTicket 视图，该视图应该使用与创建的事件相同的 EventID 向该事件添加新票。

这是我的创建工单视图

@model Site.Models.CreateTicketVm

<head>
<title>Create Event Tickets</title>
<link href="Content/TicketStyles.css" rel="stylesheet" type="text/css">
</head>


<h3> Tickets</h3>
<div id="tickets"></div>
@Html.HiddenFor(s => s.EventId)

<input type="button" id="add" value="Add Ticket" />
<input type="submit" id="btnSave" />

@section scripts{
<script>
$(function () {
    //Lets create the first row
    addNewRow();

    $("#add").click(function (e) {
        e.preventDefault();
        addNewRow();
    });

    $("#btnSave").click(function (e) {
        e.preventDefault();

        var createTicket = { EventId: $("#EventId").val(), Tickets: [] };
        var rows = $("#tickets").find(".item");

        $.each(rows, function (i, row) {
            var _row = $(this);

            var inputs = _row.find("input");
            var ticket = {};
            $.each(inputs, function (index, item) {
                var _this = $(this);
                ticket[_this.data("for")] = _this.val();
            });
            createTicket.Tickets.push(ticket);
        });

        var targetUrl = "@Url.Action("CreateTicket","Tickets1")";
        $.ajax({
            url: targetUrl,
            contentType: "application/json",
            data: JSON.stringify(createTicket),
            type: "POST"
        }).done(function (res) {
            if (res.Status === "Success") {
                window.location.href = "@Url.Action("Success")";
            }
        });
    });
});

function addNewRow() {
    $.get("@Url.Action("AddNewTicketRow","Tickets1")", function (res) {
        $("#tickets").append(res);
    });
}
</script>
}

这是我的 AddNewTicket 局部视图

@model Site.Models.TicketVm
<div class="item">
    @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
<div>
    @Html.TextBoxFor(model => model.Description, new { @data_for = "Description" })
</div>

@Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })
<div>
    @Html.TextBoxFor(s => s.Price, new { @data_for = "Price" })
</div>
</div>

这是我的 Tickets1Controller 类

 public class Tickets1Controller : Controller
 {
    private ApplicationDbContext db = new ApplicationDbContext();


    public ActionResult CreateTicket(int id)
    {

        var vm = new CreateTicketVm { EventId = id };
        return View(vm);
    }


    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult CreateTicket(CreateTicketVm model)
    {
        if (model != null)
        {

            foreach (var ticketVm in model.Tickets)
            {
                db.Tickets.Add(new Ticket{ EventID = model.EventId, 
                 Description=ticketVm.Description, Price =ticketVm.Price});
                db.SaveChanges();

            }
            return RedirectToAction("Index");

        }
        return RedirectToAction("Index");  
    }

    public ActionResult AddNewTicketRow()
    {
        var vm = new TicketVm();
        return    PartialView("~/Views/Tickets1/Partials/AddNewTicketRow.cshtml", vm);
    }

我的工单没有保存，我不明白为什么，因为 EventID 被传递到 CreateTicket 视图，但是当单击提交按钮并且工单没有被保存到我的数据库表时没有任何反应。非常感谢任何有关如何解决此问题的建议。

【问题讨论】：

建议你看看答案here和here
如果您在代码中修改这一行并逐步执行，result 最终会是什么？ var result = db.SaveChanges();

标签： c# jquery asp.net asp.net-mvc

【解决方案1】：

一旦我遇到同样的问题。我所做的是为页面定义一个 jquery 变量，并在每次单击“AddNewTicketRow”时增加它。并将其作为参数发送到“AddNewTicketRow”控制器并将其用作 INDEX 来创建 AddNewTicket像这样的局部视图：

@Html.TextBoxFor(M => M.Description, new { Name = "Tickets[" + @Model.Index + "].Description", id = "Tickets[" + @Model.Index + "].Description" })

@Html.TextBoxFor(M => M.Price, new { Name = "Tickets[" + @Model.Index + "].Price", id = "Tickets[" + @Model.Index + "].Price" })

【讨论】：