欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ASP.NET?MVC項目實現(xiàn)三級聯(lián)動無刷新

 更新時間:2022年07月31日 09:18:24   作者:Darren?Ji  
這篇文章介紹了ASP.NET?MVC項目實現(xiàn)三級聯(lián)動無刷新的方法,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

本篇實現(xiàn)有關(guān)客戶、訂單和產(chǎn)品的無刷新三級聯(lián)動,先看最終效果:

沒有選擇時,后2個Select狀態(tài)為禁用:

當(dāng)選擇第1個Select,第2個Select可供選擇,第3個Select依舊禁用:

當(dāng)選擇第2個Select,第3個Select可供選擇:

當(dāng)選擇第3個Select,界面出現(xiàn)"顯示產(chǎn)品信息"按鈕:

當(dāng)點擊"顯示產(chǎn)品信息"按鈕,顯示產(chǎn)品信息:

當(dāng)點擊"清空"按鈕,恢復(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 = "單價")]
         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();
  
             //點擊客戶觸發(fā)
             $('#Customers').change(function() {               
                 changeCustomer();
             });
         });
  
         //初始化
         function init() {
             $('#ButtonSubmit').hide();
             $('#Orders').attr("disabled", "true");
             $('#Products').attr("disabled", "true");
         }
  
         //點擊客戶事件
         function changeCustomer() {
             var selectedValue = $('#Customers option:selected').val();
             if ($.trim(selectedValue).length > 0) {
                 getOrders(selectedValue);
             }
         }
  
         //點擊客戶顯示訂單
         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)品之間有中間表訂單明細
         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();
  
             //點擊客戶觸發(fā)
             $('#Customers').change(function() {               
                 changeCustomer();
             });
  
             //點擊訂單觸發(fā)
             $('#Orders').change(function() {
                 changeOrder();
             });
         });
  
         //初始化
         function init() {
             $('#ButtonSubmit').hide();
             $('#Orders').attr("disabled", "true");
             $('#Products').attr("disabled", "true");
         }
  
         //點擊客戶事件
         function changeCustomer() {
             var selectedValue = $('#Customers option:selected').val();
             if ($.trim(selectedValue).length > 0) {
                 getOrders(selectedValue);
             }
         }
  
         //點擊客戶顯示訂單
         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));
                         });
                     }
                 }
             });
         }
  
         //點擊訂單事件
         function changeOrder() {
             var selectedValue = $('#Orders option:selected').val();
             if ($.trim(selectedValue).length > 0) {
                 getProducts(selectedValue);
             }
         }
  
         //點擊訂單顯示產(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項,點擊"顯示產(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();
  
             //點擊客戶觸發(fā)
             $('#Customers').change(function() {               
                 changeCustomer();
             });
  
             //點擊訂單觸發(fā)
             $('#Orders').change(function() {
                 changeOrder();
             });
  
             //點擊產(chǎn)品顯示按鈕
             $('#Products').change(function() {
                 changeProuct();
             });
  
             //點擊顯示產(chǎn)品
             $('#ButtonSubmit').click(function() {
                 displayProductById();
             });
  
             //清空按鈕
             $('#ButtonReset').click(function() {
                 resetContent();
             });
         });
  
         //初始化
         function init() {
             $('#ButtonSubmit').hide();
             $('#Orders').attr("disabled", "true");
             $('#Products').attr("disabled", "true");
         }
  
         //點擊客戶事件
         function changeCustomer() {
             var selectedValue = $('#Customers option:selected').val();
             if ($.trim(selectedValue).length > 0) {
                 getOrders(selectedValue);
             }
         }
  
         //點擊客戶顯示訂單
         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));
                         });
                     }
                 }
             });
         }
  
         //點擊訂單事件
         function changeOrder() {
             var selectedValue = $('#Orders option:selected').val();
             if ($.trim(selectedValue).length > 0) {
                 getProducts(selectedValue);
             }
         }
  
         //點擊訂單顯示產(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);
                         }
                     }
                 });
             }
         }
  
         //點擊產(chǎn)品顯示按鈕
         function changeProuct() {
             var selectedValue = $('#Products option:selected').val();
             if ($.trim(selectedValue).length > 0) {
                 $('#ButtonSubmit').show();
             } else {
                 $('#ButtonSubmit').hide();
                 $('#Products').empty();
             }
         }
  
         //點擊清空按鈕
         function resetContent() {
             $('#Customers option:eq(0)').attr('selected', true);
  
             //訂單Select,禁用,清空并顯示第一項        
             $('#Orders').attr("disabled", "true");
             $('#Orders').empty();
             $('#Orders').append($('<option></option>').val('').text('==選擇訂單=='));
  
             //產(chǎn)品Select,禁用,清空并顯示第一項   
             $('#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àn)三級聯(lián)動無刷新的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論