Knockoutjs 和表单绑定答案

【问题标题】：Knockoutjs and Form bindingKnockoutjs 和表单绑定
【发布时间】：2016-04-12 06:18:03
【问题描述】：

我有以下观点，并且出于某种原因，以下行导致 OrderID 不是 Order 的属性的错误。然而它绝对是。

<td>@Html.DisplayFor(model => model.OrderID)</td>

这里是风景

@model IEnumerable<GeogSocSite.Models.Order>
<head>
<title>Order</title>
<link rel="stylesheet" href="~/Content/TableSheet.css">

</head>
<body>
<h1>Choose Your Tickets</h1>
<p> Hello</p>
<form action="@Url.Action("NextPage", "Order")" method="get">

    <table align="center" cellspacing="2" border="1" table data-bind='visible: gifts().length>0'>

        <thead>
            <tr>
                <th align="center">Description</th>
                <th align="center">Price</th>
                <th align="center">Add</th>
            </tr>
        </thead>
        <tbody data-bind="foreach : gifts">

            @foreach (GeogSocSite.Models.Ticket ticket in ViewBag.listTickets)
            {
                <tr>
                    <td data-bind="text: ticketID">@Html.DisplayFor(m => ticket.TicketID)</td>
                    <td>@Html.DisplayFor(model => model.OrderID)</td>
                    <td align="center">@ticket.Description</td>
                    <td align="center">@ticket.Price</td>
                    <td align="center"> @Html.DropDownList("Quantity",  (IList<SelectListItem>)ViewBag.Quantities, "", new { data_bind = " value:  selectedOptionValue" }) </td>
                </tr>
            }
        </tbody>
    </table>
    <button data-bind='click: addGift'>Add Gift</button>
    <button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
 </form>
    <div>
        <button data-bind="click: next">Next </button>
    </div>
    <div id="proceed">
        @Html.ActionLink("Proceed", "Order", "Order")
    </div>
    <div>
        @Html.ActionLink("Back to List", "Index", "Events")
    </div>
    <script type="text/javascript">
        var GiftModel = function (gifts) {
            var self = this;
            self.gifts = ko.observableArray(gifts);


            self.save = function (form) {
                alert("Could now transmit to server: " + ko.utils.stringifyJson(self.gifts));
                // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.gifts);
            };
        };

        var viewModel = new GiftModel([

        ]);
        ko.applyBindings(viewModel);

        // Activate jQuery Validation
        $("form").validate({ submitHandler: viewModel.save });
    </script>
</body>

我只想让用户选择显示的每种票证类型的数量，然后通过单击按钮将其连同 orderID 和 TicketID 一起发送回控制器，但我遇到了真正的困难。这是我的订单模型

 public class Order
 {

    public int OrderID { get; set; }

    //foreign key
    [Required]
    [ForeignKey("Event")]
    public int EventID { get; set; }


    [Required]
    public DateTime OrderDate { get; set; }

    [Required]
    public float OrderTotal { get; set; }

    public ApplicationUser user { get; set; }

    public virtual Event Event { get; set; }

    }

这是我的控制器方法

    [AllowAnonymous]
    public ActionResult CreateOrder(int id)
    {
        //  Ticket ticket = new Ticket();
        //  ticket.EventID = id;
        //  ViewBag.EventID = new SelectList(db.Events, "EventID", "Name");
        //  return View(ticket);
        Event e1 = db.Events.Find(id);
        List<SelectListItem> quantities = new List<SelectListItem>();
        ViewBag.listTickets = (from t in db.Tickets where t.EventID == id select t).ToList();
        if (e1.TicketsAvailable == 0)
        {
            return View("Error");
        }
        else if (e1.TicketsAvailable < 5)
        {
            for (int loop = 0; loop < e1.TicketsAvailable; loop++)
            {
                quantities.Add(new SelectListItem { Text = loop.ToString(), Value = loop.ToString() });
            }
        }
        else
        {
            for (int loop = 0; loop <= 5; loop++)
            {
                quantities.Add(new SelectListItem { Text = loop.ToString(), Value = loop.ToString() });
            }
        }
            ViewBag.Quantities = quantities;
            string currentUserId = User.Identity.GetUserId();
            ApplicationUser currentUser = db.Users.FirstOrDefault(x => x.Id == currentUserId);
            Order order = new Order { EventID = e1.EventID, OrderDate = DateTime.Now, user=currentUser };
            return View();

        }

    }

我完全坚持做可能很简单的任务，但由于我是 asp.net mvc 和 knockoutjs 的新手，我发现很难完成。任何帮助将不胜感激！谢谢

【问题讨论】：

标签： javascript c# asp.net asp.net-mvc knockout.js

【解决方案1】：

问题在于您的视图模型是 IEnumerable 而不是 Order。您可能应该将模型更改为 @model GeogSocSite.Models.Order。

【讨论】：

非常感谢您修复了我的构建错误！您是否知道为什么 OrderID 为空，因为我认为我正在将新订单传递到视图中并且 ID 会自动生成？再次感谢您的帮助@Inari
为了将模型传递到视图中，您需要将其作为参数提供给返回方法。一个例子是 return View(model);
那太好了，谢谢！可能是另一个愚蠢的问题，但如果我想将所有这些数据传递给我的控制器并将其保存到我的数据库中？目前表单动作和方法都得到了我需要改变这个@Inari吗？
看看asp.net网站上的教程。他们将帮助指导您进一步努力。 ;)