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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- ASP.NET無刷新分頁簡單實現(xiàn)
- asp.net實現(xiàn)文件無刷新上傳方法匯總
- asp.net使用AJAX實現(xiàn)無刷新分頁
- asp.net中利用Jquery+Ajax+Json實現(xiàn)無刷新分頁的實例代碼
- ajax.net +jquery 無刷新三級聯(lián)動的實例代碼
- asp.net 無刷新分頁實例代碼
- asp.net Ajax之無刷新評論介紹
- asp.net 簡便無刷新文件上傳系統(tǒng)
- asp.net ajax實現(xiàn)無刷新驗證碼
- asp.net+js 實現(xiàn)無刷新上傳解析csv文件的代碼
- 適用與firefox ASP.NET無刷新二級聯(lián)動下拉列表
相關(guān)文章
HttpWebRequest和HttpWebResponse用法小結(jié)
在每個系統(tǒng)出寫入報告錯誤代碼(找個合理的理由，比如系統(tǒng)免費升級) -> 自家服務(wù)器接收并處理錯誤報告 -> 反饋用戶(解決掉BUG就行，不要太聲揚)2011-09-09
MVC 5 第二章 MVC5應(yīng)用程序項目結(jié)構(gòu)
通過本章學(xué)習(xí)，你將了解到一個MVC 5應(yīng)用程序的項目組成以及項目文件的相關(guān)信息，從而更好地架構(gòu)設(shè)計出自己的項目結(jié)構(gòu)。2014-06-06
利用docker-compose搭建AspNetCore開發(fā)環(huán)境
這篇文章主要為大家詳細介紹了利用docker-compose搭建AspNetCore開發(fā)環(huán)境，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
ASP.NET實現(xiàn)個人信息注冊頁面并跳轉(zhuǎn)顯示
這篇文章主要介紹了ASP.NET實現(xiàn)個人信息注冊頁面并跳轉(zhuǎn)顯示的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
獲取根目錄的URL例如http://localhost:51898
這篇文章主要介紹了獲取根目錄的URL的方法,需要的朋友可以參考下2014-02-02
解析利用wsdl.exe生成webservice代理類的詳解
本篇文章是對利用wsdl.exe生成webservice代理類進行了詳細的分析介紹，需要的朋友參考下2013-05-05
ASP.NET MVC小結(jié)之基礎(chǔ)篇（二）
本文續(xù)上篇文章，還是介紹些asp.net mvc相關(guān)的基礎(chǔ)知識，非常的詳細，新手朋友們看看，高手們略過吧2014-11-11
這篇文章主要介紹了ASP.NET操作各類時間段獲取方法,實例匯總了各類常見的時間段獲取方法,需要的朋友可以參考下2014-11-11
利用頁面爬蟲(獲取其他頁面HTML)加載到自己頁面，實現(xiàn)所謂的小偷程序吧，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈2013-06-06
asp.net中動態(tài)改變網(wǎng)頁標題的代碼
asp.net中動態(tài)改變網(wǎng)頁標題的代碼，需要的朋友可以參考下。2011-02-02