开发工具与关键技术: Visual Studio 2015 mvc
作者:彭水清
撰写时间:2019/7/16
当鼠标点击按钮时会出现酒菜小类(WGSmallID)数据下拉框,然后再点击下拉框里的数据会显示酒菜项目(WGItemID)数据。
利用 bootstrap 的组件中的下拉菜单来动态的绑定数据库中的数据,通过 ID 选择器选择到 wineGreensMenu。在控制器查询(小类表查询项目表,调用酒菜项目表数据),然后在 js 中请求控制器的方法,在回调函数中接收到控制器查询到的数据库的动态数据,然后写点击下拉菜单调用的方法,追加酒菜项目数据。
下拉菜单按钮追加绑定动态数据图片效果图:
点击羊肉显示的效果图如下:(测试的效果所以字段里面的内容就随意了点)
那接下来就说一下需要怎么样做才能实现上面的效果呢。
1.利用 bootstrap 的组件中的下拉菜单来动态的绑定数据库中的数据
2.通过 ID 选择器选择到 wineGreensMenu
<div class="col-12" id="wineGreensMenu">
<div class="cont1">
<ul class="conten" id="wineGreensImage"></ul>
</div>
</div>
3.然后在 js 中请求控制器的方法,在回调函数中接收到控制器查询到的数据库的动态数据
- 请求控制器的方法代码
/// 小类表查询项目表
public ActionResult SelectWGItem(int WGSmallID)
{
List<WGItem> listWGItem = myModels.WGItem.Where(L => L.WGSmallID == WGSmallID).Select(L=> L).ToList();
return Json(listWGItem, JsonRequestBehavior.AllowGet);
}
/// 调用酒菜项目表数据
public ActionResult SelectWGItem1()
{
List<WGItem> listWGItem = myModels.WGItem.Select(L =>L).ToList();
return Json(listWGItem, JsonRequestBehavior.AllowGet);
}
5.Js绑定数据的代码
//点击下拉菜单调用的方法
function selectWGSmallID(WGSmallID) {
//清空酒菜项目数据
$("#wineGreensImage").empty();
$.post("/Main/SelectWGItem", { WGSmallID: WGSmallID }, function (data) {
for (var i = 0; i < data.length; i++) {
var WGItemID = data[i].WGItemID;
if (data[i].Discount == true) {
var Discount = "折扣"
}
else {
var Discount = "无折扣"
}
//追加酒菜项目数据
$("#wineGreensImage").append('<li onclick="clickWGImage(' + WGItemID + ')">' +
'<ahref="javascript:;">' +
'<b>' + Discount + '</b>' +
'<img src="' + data[i].WGPicture + '" alt="">' +
'<p>' + data[i].WGName + '</p>' +
'<h4>¥' + data[i].WGPrice + '</h4>' +
'</a>' +
'</li>');
}
}
@水平有限,错误和失误在所难免,若有如何意见和建议,请不吝指正,谢谢!