ASP.NET?MVC項(xiàng)目實(shí)現(xiàn)三級聯(lián)動(dòng)無刷新
本篇實(shí)現(xiàn)有關(guān)客戶、訂單和產(chǎn)品的無刷新三級聯(lián)動(dòng),先看最終效果:
沒有選擇時(shí),后2個(gè)Select狀態(tài)為禁用:
當(dāng)選擇第1個(gè)Select,第2個(gè)Select可供選擇,第3個(gè)Select依舊禁用:
當(dāng)選擇第2個(gè)Select,第3個(gè)Select可供選擇:
當(dāng)選擇第3個(gè)Select,界面出現(xiàn)"顯示產(chǎn)品信息"按鈕:
當(dāng)點(diǎn)擊"顯示產(chǎn)品信息"按鈕,顯示產(chǎn)品信息:
當(dāng)點(diǎn)擊"清空"按鈕,恢復(fù)到初始狀態(tài):
View Models
Model之間的關(guān)系為:
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; namespace MvcApplication2.Models { public class Customer { public int CustomerID { get; set; } public string Name { get; set; } } public class Order { public int OrderID { get; set; } public int CustomerID { get; set; } public DateTime OrderTime { get; set; } } public class OrderDetail { public int OrderDetailID { get; set; } public int OrderID { get; set; } public List<Product> Products { get; set; } } public class Product { public int ProductID { get; set; } [Display(Name = "產(chǎn)品名稱")] public string Name { get; set; } [Display(Name = "單價(jià)")] public decimal UnitPrice { get; set; } } }
顯示客戶的Select
服務(wù)層方法
//獲取客戶信息 public static List<Customer> GetCustomers() { List<Customer> customers = new List<Customer>(); customers.Add(new Customer(){CustomerID = 1,Name = "張三"}); customers.Add(new Customer(){CustomerID = 2, Name = "李四"}); return customers; }
控制器方法
public ActionResult Index() { List<Customer> customers = Service.GetCustomers(); List<SelectListItem> items = new List<SelectListItem>(); foreach (Customer customer in customers) { SelectListItem item = new SelectListItem() { Text = customer.Name, Value = customer.CustomerID.ToString() }; items.Add(item); } ViewData["c"] = items; return View(); }
視圖
客戶:@Html.DropDownList("Customers", (List<SelectListItem>)ViewData["c"],"==選擇客戶==",new {id = "Customers"} )
選擇客戶Select,顯示訂單Select
服務(wù)層方法
//根據(jù)客戶獲取訂單 public static List<Order> GetOrdersByCustomer(int customerID) { List<Order> orders = new List<Order>(); orders.Add(new Order(){OrderID = 1,CustomerID = 1,OrderTime = new DateTime(2014,1,2)}); orders.Add(new Order() { OrderID = 2, CustomerID = 1, OrderTime = new DateTime(2014, 1, 3) }); orders.Add(new Order() { OrderID = 3, CustomerID = 2, OrderTime = new DateTime(2014,1,4) }); orders.Add(new Order() { OrderID = 4, CustomerID = 2, OrderTime = new DateTime(2014,1,5) }); return orders.Where(o => o.CustomerID == customerID).ToList(); }
控制器方法
//根據(jù)客戶獲取訂單 [HttpPost] public JsonResult Orders(string customerID) { List<KeyValuePair<string,string>> items = new List<KeyValuePair<string, string>>(); if (!string.IsNullOrEmpty(customerID)) { var orders = Service.GetOrdersByCustomer(int.Parse(customerID)); if (orders.Count() > 0) { foreach (Order order in orders) { items.Add(new KeyValuePair<string, string>( order.OrderID.ToString(), string.Format("{0} ({1:yyyy-MM-dd})",order.OrderID,order.OrderTime))); } } } return Json(items); }
視圖
<p> 客戶:@Html.DropDownList("Customers", (List<SelectListItem>)ViewData["c"],"==選擇客戶==",new {id = "Customers"} ) </p> <p> 訂單:<select id="Orders" name="Orders"> <option value="">==選擇訂單==</option> </select> </p>
視圖js部分
@section scripts { <script type="text/javascript"> $(function () { //初始化 init(); //點(diǎn)擊客戶觸發(fā) $('#Customers').change(function() { changeCustomer(); }); }); //初始化 function init() { $('#ButtonSubmit').hide(); $('#Orders').attr("disabled", "true"); $('#Products').attr("disabled", "true"); } //點(diǎn)擊客戶事件 function changeCustomer() { var selectedValue = $('#Customers option:selected').val(); if ($.trim(selectedValue).length > 0) { getOrders(selectedValue); } } //點(diǎn)擊客戶顯示訂單 function getOrders(customerID) { $.ajax({ url: '@Url.Action("Orders","Home")', data: { customerID: customerID }, type: 'post', cache: false, async: false, dataType: 'json', success: function(data) { if (data.length > 0) { $('#Orders').removeAttr("disabled"); $('#Orders').empty(); $('#Orders').append($('<option></option>').val('').text('==選擇訂單==')); $.each(data, function(i, item) { $('#Orders').append($('<option></option>').val(item.Key).text(item.Value)); }); } } }); } </script> }
選擇訂單Select,顯示產(chǎn)品Select
服務(wù)層方法
//根據(jù)訂單獲取產(chǎn)品,訂單和產(chǎn)品之間有中間表訂單明細(xì) public static List<Product> GetProductsByOrder(int orderID) { List<Product> products = new List<Product>(); products.Add(new Product(){ProductID = 1, Name = "產(chǎn)品1", UnitPrice = 85m}); products.Add(new Product() { ProductID = 2, Name = "產(chǎn)品2", UnitPrice = 95m }); products.Add(new Product() { ProductID = 3, Name = "產(chǎn)品3", UnitPrice = 65m }); products.Add(new Product() { ProductID = 4, Name = "產(chǎn)品4", UnitPrice = 75m }); List<OrderDetail> orderDetails = new List<OrderDetail>(); orderDetails.Add(new OrderDetail(){OrderDetailID = 1, OrderID = 1, Products = new List<Product>() { products[0], products[1] }}); orderDetails.Add(new OrderDetail() { OrderDetailID = 2, OrderID = 2, Products = new List<Product>() { products[2], products[3] } }); orderDetails.Add(new OrderDetail() { OrderDetailID = 3, OrderID = 3, Products = new List<Product>() { products[1], products[3] } }); orderDetails.Add(new OrderDetail() { OrderDetailID = 4, OrderID = 4, Products = new List<Product>() { products[0], products[2] } }); OrderDetail orderDetailsTemp = orderDetails.Where(od => od.OrderID == orderID).FirstOrDefault(); return orderDetailsTemp.Products; }
控制器方法
//根據(jù)訂單獲取產(chǎn)品 [HttpPost] public JsonResult Products(string orderID) { List<KeyValuePair<string,string>> items = new List<KeyValuePair<string, string>>(); int id = 0; //需要傳入服務(wù)層方法的id if (!string.IsNullOrEmpty(orderID) && int.TryParse(orderID, out id)) { var products = Service.GetProductsByOrder(id); if (products.Count() > 0) { foreach (Product product in products) { items.Add(new KeyValuePair<string, string>( product.ProductID.ToString(), product.Name )); } } } return Json(items); }
視圖
<p> 客戶:@Html.DropDownList("Customers", (List<SelectListItem>)ViewData["c"],"==選擇客戶==",new {id = "Customers"} ) </p> <p> 訂單:<select id="Orders" name="Orders"> <option value="">==選擇訂單==</option> </select> </p> <p> 產(chǎn)品:<select id="Products" name="Products"> <option value="">==選擇產(chǎn)品==</option> </select> </p>
視圖js部分
@section scripts { <script type="text/javascript"> $(function () { //初始化 init(); //點(diǎn)擊客戶觸發(fā) $('#Customers').change(function() { changeCustomer(); }); //點(diǎn)擊訂單觸發(fā) $('#Orders').change(function() { changeOrder(); }); }); //初始化 function init() { $('#ButtonSubmit').hide(); $('#Orders').attr("disabled", "true"); $('#Products').attr("disabled", "true"); } //點(diǎn)擊客戶事件 function changeCustomer() { var selectedValue = $('#Customers option:selected').val(); if ($.trim(selectedValue).length > 0) { getOrders(selectedValue); } } //點(diǎn)擊客戶顯示訂單 function getOrders(customerID) { $.ajax({ url: '@Url.Action("Orders","Home")', data: { customerID: customerID }, type: 'post', cache: false, async: false, dataType: 'json', success: function(data) { if (data.length > 0) { $('#Orders').removeAttr("disabled"); $('#Orders').empty(); $('#Orders').append($('<option></option>').val('').text('==選擇訂單==')); $.each(data, function(i, item) { $('#Orders').append($('<option></option>').val(item.Key).text(item.Value)); }); } } }); } //點(diǎn)擊訂單事件 function changeOrder() { var selectedValue = $('#Orders option:selected').val(); if ($.trim(selectedValue).length > 0) { getProducts(selectedValue); } } //點(diǎn)擊訂單顯示產(chǎn)品 function getProducts(orderID) { $.ajax({ url: '@Url.Action("Products","Home")', data: { orderID: orderID }, type: 'post', cache: false, async: false, dataType: 'json', success: function(data) { if (data.length > 0) { $('#Products').removeAttr("disabled"); $('#Products').empty(); $('#Products').append($('<option></option>').val('').text('==選擇產(chǎn)品==')); $.each(data, function(i, item) { $('#Products').append($('<option></option>').val(item.Key).text(item.Value)); }); } } }); } </script> }
選擇產(chǎn)品Select項(xiàng),點(diǎn)擊"顯示產(chǎn)品信息"按鈕,顯示產(chǎn)品信息
服務(wù)層方法
//根據(jù)產(chǎn)品ID獲得產(chǎn)品信息 public static Product GetProduct(int productId) { List<Product> products = new List<Product>(); products.Add(new Product() { ProductID = 1, Name = "產(chǎn)品1", UnitPrice = 85m }); products.Add(new Product() { ProductID = 2, Name = "產(chǎn)品2", UnitPrice = 95m }); products.Add(new Product() { ProductID = 3, Name = "產(chǎn)品3", UnitPrice = 65m }); products.Add(new Product() { ProductID = 4, Name = "產(chǎn)品4", UnitPrice = 75m }); return products.Where(p => p.ProductID == productId).FirstOrDefault(); }
控制器方法
//根據(jù)產(chǎn)品ID獲得產(chǎn)品 public ActionResult ProductInfo(string productID) { int id = 0; if (!string.IsNullOrEmpty(productID) && int.TryParse(productID, out id)) { var product = Service.GetProduct(id); ViewData.Model = product; } return PartialView("_ProductInfo"); }
_ProductInfo部分視圖
@model MvcApplication2.Models.Product <fieldset> <legend>Product</legend> <div class="display-label"> @Html.DisplayNameFor(model => model.Name) </div> <div class="display-field"> @Html.DisplayFor(model => model.Name) </div> <div class="display-label"> @Html.DisplayNameFor(model => model.UnitPrice) </div> <div class="display-field"> @Html.DisplayFor(model => model.UnitPrice) </div> </fieldset>
視圖
<div id="wrapper"> <p> 客戶:@Html.DropDownList("Customers", (List<SelectListItem>)ViewData["c"],"==選擇客戶==",new {id = "Customers"} ) </p> <p> 訂單:<select id="Orders" name="Orders"> <option value="">==選擇訂單==</option> </select> </p> <p> 產(chǎn)品:<select id="Products" name="Products"> <option value="">==選擇產(chǎn)品==</option> </select> </p> <p> <input type ="button" id ="ButtonReset" value ="清空" /> <input type ="button" id ="ButtonSubmit" value ="顯示產(chǎn)品信息" /> </p> </div>
視圖js部分
@section scripts { <script type="text/javascript"> $(function () { //初始化 init(); //點(diǎn)擊客戶觸發(fā) $('#Customers').change(function() { changeCustomer(); }); //點(diǎn)擊訂單觸發(fā) $('#Orders').change(function() { changeOrder(); }); //點(diǎn)擊產(chǎn)品顯示按鈕 $('#Products').change(function() { changeProuct(); }); //點(diǎn)擊顯示產(chǎn)品 $('#ButtonSubmit').click(function() { displayProductById(); }); //清空按鈕 $('#ButtonReset').click(function() { resetContent(); }); }); //初始化 function init() { $('#ButtonSubmit').hide(); $('#Orders').attr("disabled", "true"); $('#Products').attr("disabled", "true"); } //點(diǎn)擊客戶事件 function changeCustomer() { var selectedValue = $('#Customers option:selected').val(); if ($.trim(selectedValue).length > 0) { getOrders(selectedValue); } } //點(diǎn)擊客戶顯示訂單 function getOrders(customerID) { $.ajax({ url: '@Url.Action("Orders","Home")', data: { customerID: customerID }, type: 'post', cache: false, async: false, dataType: 'json', success: function(data) { if (data.length > 0) { $('#Orders').removeAttr("disabled"); $('#Orders').empty(); $('#Orders').append($('<option></option>').val('').text('==選擇訂單==')); $.each(data, function(i, item) { $('#Orders').append($('<option></option>').val(item.Key).text(item.Value)); }); } } }); } //點(diǎn)擊訂單事件 function changeOrder() { var selectedValue = $('#Orders option:selected').val(); if ($.trim(selectedValue).length > 0) { getProducts(selectedValue); } } //點(diǎn)擊訂單顯示產(chǎn)品 function getProducts(orderID) { $.ajax({ url: '@Url.Action("Products","Home")', data: { orderID: orderID }, type: 'post', cache: false, async: false, dataType: 'json', success: function(data) { if (data.length > 0) { $('#Products').removeAttr("disabled"); $('#Products').empty(); $('#Products').append($('<option></option>').val('').text('==選擇產(chǎn)品==')); $.each(data, function(i, item) { $('#Products').append($('<option></option>').val(item.Key).text(item.Value)); }); } } }); } //根據(jù)產(chǎn)品ID獲取產(chǎn)品信息 function displayProductById() { var selectedValue = $('#Products option:selected').val(); if ($.trim(selectedValue).length > 0) { $.ajax({ url: '@Url.Action("ProductInfo","Home")', data: { productID: selectedValue }, type: 'post', cache: false, async: false, dataType: 'html', success: function(data) { if (data.length > 0) { $('#ProductInfo').empty(); $('#ProductInfo').html(data); } } }); } } //點(diǎn)擊產(chǎn)品顯示按鈕 function changeProuct() { var selectedValue = $('#Products option:selected').val(); if ($.trim(selectedValue).length > 0) { $('#ButtonSubmit').show(); } else { $('#ButtonSubmit').hide(); $('#Products').empty(); } } //點(diǎn)擊清空按鈕 function resetContent() { $('#Customers option:eq(0)').attr('selected', true); //訂單Select,禁用,清空并顯示第一項(xiàng) $('#Orders').attr("disabled", "true"); $('#Orders').empty(); $('#Orders').append($('<option></option>').val('').text('==選擇訂單==')); //產(chǎn)品Select,禁用,清空并顯示第一項(xiàng) $('#Products').attr("disabled", "true"); $('#Products').empty(); $('#Products').append($('<option></option>').val('').text('==選擇產(chǎn)品==')); $('#ButtonSubmit').hide(); $('#ProductInfo').empty(); } </script> }
到此這篇關(guān)于ASP.NET MVC項(xiàng)目實(shí)現(xiàn)三級聯(lián)動(dòng)無刷新的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- ASP.NET無刷新分頁簡單實(shí)現(xiàn)
- asp.net實(shí)現(xiàn)文件無刷新上傳方法匯總
- asp.net使用AJAX實(shí)現(xiàn)無刷新分頁
- asp.net中利用Jquery+Ajax+Json實(shí)現(xiàn)無刷新分頁的實(shí)例代碼
- ajax.net +jquery 無刷新三級聯(lián)動(dòng)的實(shí)例代碼
- asp.net 無刷新分頁實(shí)例代碼
- asp.net Ajax之無刷新評論介紹
- asp.net 簡便無刷新文件上傳系統(tǒng)
- asp.net ajax實(shí)現(xiàn)無刷新驗(yàn)證碼
- asp.net+js 實(shí)現(xiàn)無刷新上傳解析csv文件的代碼
- 適用與firefox ASP.NET無刷新二級聯(lián)動(dòng)下拉列表
相關(guān)文章
HttpWebRequest和HttpWebResponse用法小結(jié)
在每個(gè)系統(tǒng)出寫入報(bào)告錯(cuò)誤代碼(找個(gè)合理的理由,比如系統(tǒng)免費(fèi)升級) -> 自家服務(wù)器接收并處理錯(cuò)誤報(bào)告 -> 反饋用戶(解決掉BUG就行,不要太聲揚(yáng))2011-09-09MVC 5 第二章 MVC5應(yīng)用程序項(xiàng)目結(jié)構(gòu)
通過本章學(xué)習(xí),你將了解到一個(gè)MVC 5應(yīng)用程序的項(xiàng)目組成以及項(xiàng)目文件的相關(guān)信息,從而更好地架構(gòu)設(shè)計(jì)出自己的項(xiàng)目結(jié)構(gòu)。2014-06-06利用docker-compose搭建AspNetCore開發(fā)環(huán)境
這篇文章主要為大家詳細(xì)介紹了利用docker-compose搭建AspNetCore開發(fā)環(huán)境,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07ASP.NET實(shí)現(xiàn)個(gè)人信息注冊頁面并跳轉(zhuǎn)顯示
這篇文章主要介紹了ASP.NET實(shí)現(xiàn)個(gè)人信息注冊頁面并跳轉(zhuǎn)顯示的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12獲取根目錄的URL例如http://localhost:51898
這篇文章主要介紹了獲取根目錄的URL的方法,需要的朋友可以參考下2014-02-02解析利用wsdl.exe生成webservice代理類的詳解
本篇文章是對利用wsdl.exe生成webservice代理類進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05ASP.NET MVC小結(jié)之基礎(chǔ)篇(二)
本文續(xù)上篇文章,還是介紹些asp.net mvc相關(guān)的基礎(chǔ)知識,非常的詳細(xì),新手朋友們看看,高手們略過吧2014-11-11asp.net中動(dòng)態(tài)改變網(wǎng)頁標(biāo)題的代碼
asp.net中動(dòng)態(tài)改變網(wǎng)頁標(biāo)題的代碼,需要的朋友可以參考下。2011-02-02