Knockoutjs and Form binding

本文关键字：binding Form and Knockoutjs 更新时间：2023-09-26

我有以下视图，出于某种原因，以下行导致一个错误，即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>

我只想让用户选择显示的每种票证类型的数量，然后点击按钮将其与订单ID和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的新手，我发现很难完成。如有任何帮助，我们将不胜感激！感谢

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