C# 将JQuery添加到asp.net mvc视图

我目前正在做一个项目来模拟一个自行车店。我想在Order.create视图中使用Jquery，以使属于DropDownList中所选商店的库存项目仅显示在同一视图的selectlist中。我该怎么办

订单。创建：

<div class="form-group">
            @for(int i = 0; i < Model.Inventory.Count; i++)
            {
                <div class="col-md-10">
                    @Html.HiddenFor(m => m.Inventory[i].Name)
                    @Html.HiddenFor(m => m.Inventory[i].Id)
                    @Html.HiddenFor(m => m.Inventory[i].Price)
                    @Html.CheckBoxFor(m => m.Inventory[i].IsSelected)
                    @Html.LabelFor(m => m.Inventory[i].IsSelected, Model.Inventory[i].Name)
                    @Html.DisplayFor(m => m.Inventory[i].Price)
                </div>
            }
            <div class="col-md-10">
                @Html.LabelFor(m => m.Name)
                @Html.TextBoxFor(m => m.Name)
                @Html.LabelFor(m => m.PaymentMethod)
                @Html.TextBoxFor(m => m.PaymentMethod)
                @Html.LabelFor(model => model.StoreId, "StoreId", htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.DropDownList("StoreId", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.StoreId, "", new { @class = "text-danger" })
            </div>
            </div>

门店型号：

public class Store
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public string City { get; set; }

        public string State { get; set; }

        public int Zip { get; set; }

        public string Address { get; set; }

        public string Phone { get; set; }

        public string Hours { get; set; }

        public virtual List<Employee> Employees { get; set; }

        public virtual List<Inventory> StoreInventory { get; set; }

        public Store() 
        {
            Name = "";
            Employees=new List<Employee>();
            StoreInventory = new List<Inventory>();
        }

OrderEditEmodel：

订单管理员：

public class OrdersController : Controller
    {
        private BikeStoreContext db = new BikeStoreContext();

        // GET: Orders

        public ActionResult Index()
        {
            return View(db.Orders.ToList());
        }

        // GET: Orders/Details/5
        public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Order order = db.Orders.Find(id);
            if (order == null)
            {
                return HttpNotFound();
            }
            return View(order);
        }

        // GET: Orders/Create
        public ActionResult Create()
        {
            var inventory = db.StoreInventory;
            OrderVM model = new OrderVM
            {
                Inventory = inventory.Select(i => new InventoryVM { Id = i.Id, Name = i.Model, Price=i.RecSalePrice}).ToList()

            };
            ViewBag.StoreId= new SelectList(db.Stores, "Id", "Name");

            return View(model);
        }

        // POST: Orders/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "PaymentMethod, Inventory")]OrderVM model)
        {
            var Order = new Order
            {

                CustomerName = model.Name,
                OrderDate = DateTime.Now,
                PaymentMethod = model.PaymentMethod,
                TotalCost=0,
                PickupDate=DateTime.Now.AddDays(7),
                StoreOrderedFrom=db.Stores.Find(model.StoreId),
                StoreId=model.StoreId


            };

            IEnumerable<int> selectedItems = model.Inventory.Where(i => i.IsSelected).Select(i => i.Id);
            foreach(var item in selectedItems)
            {
                var orderItem = new OrderedItem { OrderId = Order.OrderNumber, InventoryId = item };
                db.OrderedItems.Add(orderItem);
                Order.TotalCost = Order.TotalCost + model.Inventory.Find(i => i.Id == item).Price;
                db.StoreInventory.Remove(db.StoreInventory.Find(item));
            }
            db.Orders.Add(Order);
            db.SaveChanges();
            model.Inventory.RemoveAll(i => i.IsSelected);
            db.SaveChanges();
            ViewBag.StoreId = new SelectList(db.Stores, "Id", "Name", model.StoreId);
            return View(model);

        }

        // GET: Orders/Edit/5
        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Order order = db.Orders.Find(id);
            if (order == null)
            {
                return HttpNotFound();
            }
            return View(order);
        }

        // POST: Orders/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "OrderNumber,CustomerName,OrderDate,PickupDate,TotalCost,PaymentMethod")] Order order)
        {
            if (ModelState.IsValid)
            {
                db.Entry(order).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(order);
        }

        // GET: Orders/Delete/5
        public ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Order order = db.Orders.Find(id);
            if (order == null)
            {
                return HttpNotFound();
            }
            return View(order);
        }

        // POST: Orders/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            Order order = db.Orders.Find(id);
            db.Orders.Remove(order);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }

[HttpGet]
public JsonResult GetInventoryForStore(int storeId)
{
    var store = db.Store.Find(storeId);

    if (store == null)
        return Json(null, JsonRequestBehavior.AllowGet);

    return Json(store.StoreInventory.ToList(), JsonRequestBehavior.AllowGet);
}

---

这个问题有点不清楚，你应该删除不相关的代码，但是我会尽力回答。我希望我能理解你在找什么

首先，有几个javascript库可以实现ajax过滤数据表的功能，例如和

但是，实现自己的简单数据表很容易

首先让我从我对你的问题的理解开始：

一个订单可以分配多个库存项目。 订单只分配了一个存储区。 在您的视图中，您需要一个下拉列表来选择商店。 当选择一个商店时，这应该填充一个库存列表，它几乎是一个数据表。您正在使用@for循环加载它并在视图中显示它，但从下拉列表中选择一个存储后，它不会异步更新库存列表。 因此，我们将使用$.ajax路由在选择商店后更新库存列表

以下是您可以做的： 首先用div元素和id属性替换视图中的Inventory@for循环列表

<div id="inventory-list">  </div>

那就差不多了。我希望这有帮助

---

我还没有测试代码，所以如果您看到任何错误，请编辑帖子。

为什么是jQuery？只是不要发送控制器中没有库存的自行车。尽量不让那个样的逻辑出现在视图中。若你们打算使用jQuery，那个么发布所有这些服务器端代码只会分散你们的注意力。我不做MVC，但在您的库存项目中，如果您可以将StoreID添加为一个类，那么您可以使用jquery隐藏所有div，然后重新显示与store ID匹配的类。您需要级联DropDownList。有关如何实现它们的示例，请参阅和此

public class InventoryVM
    {
        public decimal Price { get; set; }
        public int Id { get; set; }
        public string Name { get; set; }
        public bool IsSelected { get; set; }
        public virtual Store Store { get; set; }
        public int? StoreId { get; set; }
    }

public class OrdersController : Controller
    {
        private BikeStoreContext db = new BikeStoreContext();

        // GET: Orders

        public ActionResult Index()
        {
            return View(db.Orders.ToList());
        }

        // GET: Orders/Details/5
        public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Order order = db.Orders.Find(id);
            if (order == null)
            {
                return HttpNotFound();
            }
            return View(order);
        }

        // GET: Orders/Create
        public ActionResult Create()
        {
            var inventory = db.StoreInventory;
            OrderVM model = new OrderVM
            {
                Inventory = inventory.Select(i => new InventoryVM { Id = i.Id, Name = i.Model, Price=i.RecSalePrice}).ToList()

            };
            ViewBag.StoreId= new SelectList(db.Stores, "Id", "Name");

            return View(model);
        }

        // POST: Orders/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "PaymentMethod, Inventory")]OrderVM model)
        {
            var Order = new Order
            {

                CustomerName = model.Name,
                OrderDate = DateTime.Now,
                PaymentMethod = model.PaymentMethod,
                TotalCost=0,
                PickupDate=DateTime.Now.AddDays(7),
                StoreOrderedFrom=db.Stores.Find(model.StoreId),
                StoreId=model.StoreId


            };

            IEnumerable<int> selectedItems = model.Inventory.Where(i => i.IsSelected).Select(i => i.Id);
            foreach(var item in selectedItems)
            {
                var orderItem = new OrderedItem { OrderId = Order.OrderNumber, InventoryId = item };
                db.OrderedItems.Add(orderItem);
                Order.TotalCost = Order.TotalCost + model.Inventory.Find(i => i.Id == item).Price;
                db.StoreInventory.Remove(db.StoreInventory.Find(item));
            }
            db.Orders.Add(Order);
            db.SaveChanges();
            model.Inventory.RemoveAll(i => i.IsSelected);
            db.SaveChanges();
            ViewBag.StoreId = new SelectList(db.Stores, "Id", "Name", model.StoreId);
            return View(model);

        }

        // GET: Orders/Edit/5
        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Order order = db.Orders.Find(id);
            if (order == null)
            {
                return HttpNotFound();
            }
            return View(order);
        }

        // POST: Orders/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "OrderNumber,CustomerName,OrderDate,PickupDate,TotalCost,PaymentMethod")] Order order)
        {
            if (ModelState.IsValid)
            {
                db.Entry(order).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(order);
        }

        // GET: Orders/Delete/5
        public ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Order order = db.Orders.Find(id);
            if (order == null)
            {
                return HttpNotFound();
            }
            return View(order);
        }

        // POST: Orders/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            Order order = db.Orders.Find(id);
            db.Orders.Remove(order);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }

<div id="inventory-list">  </div>

$("#StoreId").change(function() {

    var selectedStoreId = $('#StoreId').val();

    $.ajax({
        url: '@Url.Action("GetInventoryForStore", "Orders")',
        type: "GET",
        dataType: "json",
        data: { storeId: selectedStoreId },
        beforeSend: function() {
            //clear the div element
            $("#inventory-list").empty();

            //add gif spinner here to show its loading
        },
        success: function (data) {
            if (data != null)
            {
                var items = '<table><tr><th>Name</th><th>Id</th></tr>';
                $.each(data, function (i, item) {
                    //I only added name and Id, but you can add the rest as well
                    items += "<tr><td>" + item.Name + "</td><td>" + item.Id + "</td></tr>";
                });
                items += "</table>";

                //add items to inventory div.
                $("#inventory-list").html(items);
            }
            else
            {
                //show the user that a problem occurred loading the data
                //update inventory-list with an error message
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});

[HttpGet]
public JsonResult GetInventoryForStore(int storeId)
{
    var store = db.Store.Find(storeId);

    if (store == null)
        return Json(null, JsonRequestBehavior.AllowGet);

    return Json(store.StoreInventory.ToList(), JsonRequestBehavior.AllowGet);
}