Knockoutjs和表单绑定

时间:2016-01-07 18:12:13

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

我有以下视图,并形成以下行导致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的新手,我发现它很难完成。任何帮助将不胜感激!谢谢

1 个答案:

答案 0 :(得分:2)

问题在于您的视图模型是IEnumerable&lt; Order&gt;不订购。您应该将模型更改为@model GeogSocSite.Models.Order。