首页 > 资讯 > 后端开发 > ASP.NET >ASP.NET MVC项目实现三级联动无刷新

149

分享到

ASP.NET MVC项目实现三级联动无刷新

ASP.NET MVC 三级联动无刷新 2022-11-13 13:11:51 149人浏览八月长安

摘要

本篇实现有关客户、订单和产品的无刷新三级联动，先看最终效果：没有选择时，后2个Select状态为禁用：当选择第1个Select,第2个Select可供选择，第3个Select依

本篇实现有关客户、订单和产品的无刷新三级联动，先看最终效果：

没有选择时，后2个Select状态为禁用：

当选择第1个Select,第2个Select可供选择，第3个Select依旧禁用：

当选择第2个Select，第3个Select可供选择：

当选择第3个Select,界面出现"显示产品信息"按钮：

当点击"显示产品信息"按钮，显示产品信息：

当点击"清空"按钮，恢复到初始状态：

View Models

Model之间的关系为：

 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 = "产品名称")]
         public string Name { get; set; }
  
         [Display(Name = "单价")]
         public decimal UnitPrice { get; set; }
     }
 }

显示客户的Select

服务层方法

         //获取客户信息
         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

服务层方法

         //根据客户获取订单
         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();
         }

控制器方法

         //根据客户获取订单
         [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();
  
             //点击客户触发
             $('#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，显示产品Select

服务层方法

         //根据订单获取产品，订单和产品之间有中间表订单明细
         public static List<Product> GetProductsByOrder(int orderID)
         {
             List<Product> products = new List<Product>();
             products.Add(new Product(){ProductID = 1, Name = "产品1", UnitPrice = 85m});
             products.Add(new Product() { ProductID = 2, Name = "产品2", UnitPrice = 95m });
             products.Add(new Product() { ProductID = 3, Name = "产品3", UnitPrice = 65m });
             products.Add(new Product() { ProductID = 4, Name = "产品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;
         }

控制器方法

         //根据订单获取产品
         [HttpPost]
         public JsonResult Products(string orderID)
         {
             List<KeyValuePair<string,string>> items = new List<KeyValuePair<string, string>>();
             int id = 0; //需要传入服务层方法的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>
         产品：<select id="Products" name="Products">
                <option value="">==选择产品==</option>
            </select>
     </p>

视图js部分

 @section scripts
 {
     <script type="text/javascript">
         $(function () {
  
             //初始化
             init();
  
             //点击客户触发
             $('#Customers').change(function() {               
                 changeCustomer();
             });
  
             //点击订单触发
             $('#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);
             }
         }
  
         //点击订单显示产品
         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('==选择产品=='));
                         $.each(data, function(i, item) {
                             $('#Products').append($('<option></option>').val(item.Key).text(item.Value));
                         });
                     }
                 }
             });
         }
     </script>
 }

选择产品Select项，点击"显示产品信息"按钮，显示产品信息

服务层方法

         //根据产品ID获得产品信息
         public static Product GetProduct(int productId)
         {
             List<Product> products = new List<Product>();
             products.Add(new Product() { ProductID = 1, Name = "产品1", UnitPrice = 85m });
             products.Add(new Product() { ProductID = 2, Name = "产品2", UnitPrice = 95m });
             products.Add(new Product() { ProductID = 3, Name = "产品3", UnitPrice = 65m });
             products.Add(new Product() { ProductID = 4, Name = "产品4", UnitPrice = 75m });
  
             return products.Where(p => p.ProductID == productId).FirstOrDefault();
         }

控制器方法

         //根据产品ID获得产品
         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>
         产品：<select id="Products" name="Products">
                <option value="">==选择产品==</option>
            </select>
     </p>
     <p>
         <input  type ="button"  id ="ButtonReset"  value ="清空"  />
         <input type ="button"  id ="ButtonSubmit"  value ="显示产品信息"  />
  
     </p>
 </div>

视图js部分

 @section scripts
 {
     <script type="text/javascript">
         $(function () {
  
             //初始化
             init();
  
             //点击客户触发
             $('#Customers').change(function() {               
                 changeCustomer();
             });
  
             //点击订单触发
             $('#Orders').change(function() {
                 changeOrder();
             });
  
             //点击产品显示按钮
             $('#Products').change(function() {
                 changeProuct();
             });
  
             //点击显示产品
             $('#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);
             }
         }
  
         //点击订单显示产品
         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('==选择产品=='));
                         $.each(data, function(i, item) {
                             $('#Products').append($('<option></option>').val(item.Key).text(item.Value));
                         });
                     }
                 }
             });
         }
  
         //根据产品ID获取产品信息
         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);
                         }
                     }
                 });
             }
         }
  
         //点击产品显示按钮
         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('==选择订单=='));
  
             //产品Select,禁用，清空并显示第一项   
             $('#Products').attr("disabled", "true");
             $('#Products').empty();
             $('#Products').append($('<option></option>').val('').text('==选择产品=='));
  
             $('#ButtonSubmit').hide();
             $('#ProductInfo').empty();
         }
     </script>
 }

到此这篇关于asp.net MVC项目实现三级联动无刷新的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: ASP.NET MVC项目实现三级联动无刷新

本文链接: https://lsjlt.com/news/171266.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

ASP.NET MVC项目实现三级联动无刷新

View Models

显示客户的Select

选择客户Select，显示订单Select

选择订单Select，显示产品Select

选择产品Select项，点击"显示产品信息"按钮，显示产品信息

ASP.NET MVC项目实现三级联动无刷新

ASP.NET MVC实现城市或车型三级联动

ajax如何实现无刷新省市县三级联动

MVC方式如何实现三级联动

Ajax中怎么实现无刷新三联动下拉框功能

ASP.NET中怎么实现无刷新分页

ASP.NET Core 实现自动刷新JWT Token

Ajax+Servlet如何实现无刷新下拉联动效果

ajax怎么实现三级联动

Ajax实现三级联动效果

php三级联动实现步骤

ajax实现城市三级联动

vue实现三级联动动态菜单

ASP.NET Core怎么实现自动刷新JWT Token

Ajax实现省市区三级联动

java实现省市区三级联动

JavaScript+node实现三级联动菜单

js如何实现三级联动效果

jQuery如何实现三级联动效果

ajax如何实现三级联动效果

[红色]一次性下载远程页面上的所有内容284815分享

通过数组给您的文件排序284815解决

[紫色]利用ASP发送和接收XML数据的处理方法284815实例

ASP动态include文件284815分享

用asp自动解析网页中的图片地址284627(思路详解)

AspJpeg V1.5.0 破解版使用方法284587问题及解决

ASP动态include文件284587过程讲解

用asp自动解析网页中的图片地址284567处理办法

[紫色]利用ASP发送和接收XML数据的处理方法284567过程讲解

Session对象失效的客户端解决方法284567详解