Add JQuery to asp.net mvc view

Question

I am currently working on a project to model a bikestore. I want to use Jquery in the Order.create view to cause only inventory items that belong to the store selected in the DropDownList to appear in the selectlist in the same view. How would I go about this?

Order.Create:

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

Inventory Model:

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

Store Model:

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

Order Model:

 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 Model:

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 Model:

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

Answer 1

The question is a bit unclear (you should delete the irrelevant code), however I will try my best to answer it. I hope I understand what you are looking for.

First off, there are a few javascript libraries that does what you are looking for (ajax filtering data tables) eg. DataTables and jTable

However, its easy to implement your own simple data table.

So first let me start with what I understand about your question:

• An Order can have multiple inventory items assigned to it.
• An Order has only a single store assigned to it.
• In your view you need a drop down to select the Store .
• When selecting a Store , that should populate an Inventory list which is pretty much a data table. You are using a @for loop to load it and display it in your view, but after selecting a Store from the drop down list it does not update the inventory list asynchronously.

Hence we are going to use the $.ajax route to update the Inventory list after selecting the store.

Here's what you can do:

First replace the Inventory @for loop list in your view with a div element and an id attribute.

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

Then add an event on StoreId element when changed.

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

Then you can define a method in your 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);
}

That should about do it. I hope this helps!

I have not tested the code, so if you see any mistakes, please edit the post.