在asp.net mvc视图中添加JQuery

本文关键字：添加 JQuery 视图 mvc asp net | 更新日期: 2023-09-27 18:17:46

我目前正在为一个自行车商店建模。我想在Order中使用Jquery。创建视图，使只属于DropDownList中所选商店的库存项目出现在同一视图的选择列表中。我该怎么做呢?

订单。创建:

<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 Inventory
    {
        public int Id { get; set; }
        public string SerialNumber { get; set; }
        public virtual Store Store { get; set; }
        public int? StoreId { get; set; }
        public string Model { get; set; }
        public string Description { get; set; }
        public Decimal InventoryCost { get; set; }
        public Decimal RecSalePrice { get; set; }
        public Decimal SalePrice { get; set; }
        public string PaymentMethod { get; set; }
        public virtual BikeCategory Category { get; set; }
        public int? CategoryId { get; set; }

存储模型:

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>();
        }

订单模型:

 public class Order
    {
        public Order()
        {
            OrderedItems = new List<Inventory>();
        }
        public string CustomerName { get; set; } //FROM CONTROLLER User.Identity.Name
        public virtual List<Inventory> OrderedItems { get; set; }
        //public virtual List<Account> Accounts { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? PickupDate { get; set; }
         [Key, DatabaseGenerated(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.Identity)]
        public int OrderNumber { get; set; }
        public virtual Store StoreOrderedFrom { get; set; }
        public int? StoreId { get; set; }
        public Decimal TotalCost { get; set; }
        public string PaymentMethod { get; set; }

OrderVM模型:

public class OrderVM

     {
            public virtual Store Store { get; set; }
            public int? StoreId { get; set; }
            public string Name { get; set; }
            public string PaymentMethod { get; set; }
            public List<InventoryVM> Inventory { get; set; }
        }

InventoryVM模型:

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; }
    }

OrderedItemModel:

OrderController: 

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);
        }
    }

在asp.net mvc视图中添加JQuery

这个问题有点不清楚(你应该删除不相关的代码)，但是我会尽我最大的努力回答它。我希望我明白你在找什么。

首先，有一些javascript库可以实现您正在寻找的功能(ajax过滤数据表)。数据表和jTable

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

那么首先让我从我对你的问题的理解开始:

  • 一个Order可以有多个库存项目分配给它。
  • 一个Order只有一个store分配给它。
  • 在您的视图中，您需要下拉选择Store。
  • 当选择Store时，应该填充Inventory列表，这几乎是一个数据表。您正在使用@for循环来加载它并在视图中显示它，但在从下拉列表中选择Store后，它不会异步更新库存列表。

因此我们将使用$。在选择商店后更新库存列表。

你可以这样做:

首先用div元素和id属性替换视图中的Inventory @for循环列表。

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

然后在StoreId元素上添加一个事件。

$("#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);
        }
    });
});
然后你可以在你的OrdersController中定义一个方法: 
[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);
}

应该可以了。我希望这对你有帮助!

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

相关文章：