MVC 使用ViewBag 加载数据与laypage 结合

自己初学MVC ，将原有的项目页面改为MVC ，因原有页面与后端数据传递使用ajax，改为MVC模式后，Controller返回 json 数据就可直接用

所以，尝试ViewBag赋值与 laypage 结合使用留个记录

首先页面代码

<head  runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="content-type" content="text/html; charset=utf-8" />@Styles.Render("~/Content/static/layui-v2.5.6/layui/css/css")@Styles.Render("~/Content/static/layui-v2.5.6/layui/css/modules/laydate/default/css")@Scripts.Render("~/Content/static/jquery-1.10.2/jquery")@Scripts.Render("~/Content/static/layui-v2.5.6/layui/js")@Scripts.Render("~/Content/static/layui-v2.5.6/layui/lay/modules/datejs")<script src="@Url.Content("~/Content/static/layui-v2.5.6/layui/layui.all.js")"></script><style>.layui-card {float: left;padding: 10px;margin: 10px;}body {background-color: #009688;padding: 0;margin: 0px;}.form-control {border-style: solid;border-width: 1px;border-color: #C9C9C9 !important;width: 80%;height: 25px;border-radius: 50px;}.layui-btn-sm {border-radius: 50px;}td {white-space: nowrap;align: right;}</style>
</head>
<body><form id="form" runat="server" action="~/admin/loadData?page_index=1&page_size=1" class="layui-form layui-form-pane" method="post"><div class="col-md-12"><input type="hidden" id="closeID" /><div class="layui-card" style="width: 95%; min-width: 220px;"><div class="layui-card-body"><div class="layui-form-item"></div><div class="layui-form-item"><label class="layui-form-label">状态:</label><div class="layui-input-block">&nbsp;&nbsp;<input type="radio" title="所有" name="radbtnStatu" checked value="" /><input type="radio" title="未分配" name="radbtnStatu" value="001" /><input type="radio" title="对接中" name="radbtnStatu" value="002" /><input type="radio" title="已完成" name="radbtnStatu" value="003" /><input type="radio" title="已关闭" name="radbtnStatu" value="004" /><input type="hidden"  id="statu" value="@ViewBag.statu"/><input type="hidden"  id="total" value="@ViewBag.total"/><input type="hidden"  id="Vpage" value="@ViewBag.page"/></div></div><div class="layui-form-item"><label class="layui-form-label">提交日期:</label><div class="layui-input-block"><input type="text" id="txtstart" name="txtstart" class="layui-input" style="width: 272px;" value="@ViewBag.start" />~<input type="text" id="txtend" name="txtend" class="layui-input" style="width: 272px;" value="@ViewBag.end" /></div></div><div class="layui-form-item"><label class="layui-form-label">关键字:</label><div class="layui-input-block"><input type="text" id="txtSelect" name="txtSelect" class="layui-input" style="width: 560px;" value="@ViewBag.sel" />@* <a class="layui-btn" id="query" style="width: 102px; margin-top: -5px;" onclick="@Html.Action("loadData")">搜索</a>*@@*@Html.ActionLink("搜索","loadData",new{page_index=2,page_size=1},new{@style="width: 102px; margin-top: -5px;",@class="layui-btn"})*@<input type="submit" value="搜索" class="layui-btn" style="width: 102px; margin-top: -5px;" /></div></div><div class="layui-form-item" id="IsManager"><!--style="text-align: right;"--><div class="layui-inline"><a class="layui-btn" id="btnYes">指派</a>&nbsp;&nbsp;</div><div class="layui-inline"><div class="layui-input-inline"><select name="modules" id="userinfo" lay-search="" lay-verify="required"><option value="">搜索或直接选择人员</option></select></div></div></div><div class="layui-form-item"></div><div class="layui-form-item"><table class="layui-table" lay-size="sm"><thead><tr><th><input type="checkbox" id="selall" lay-ignore onclick="SelCheck()" /></th><th>联系人</th><th>联系电话</th><th>分配</th><th>状态</th><th>提交日期</th><th>下次联络时间</th><th>操作</th></tr></thead><tbody id="tab_list">@foreach (var item in ViewBag.DList){var uname = item.userName;if (item.userName.Length == 0){uname = "未分配";}htmllist += "";htmllist += "<tr>";htmllist += "<td>";htmllist += "<input type='checkbox' name='Manager' value=" + item.PriCustomTourID + " /></td>";htmllist += "<td>" + item.contact + "</td>";htmllist += "<td>" + item.phone + "</td>";htmllist += "<td>" + uname + "</td>";htmllist += "<td>" + item.statusName + "</td>";htmllist += "<td>" + item.SubTime + "</td>";htmllist += "<td>" + item.NextCorrespondTime + "</td>";var url = "/admin/PriCustomTourDetail?id=" + item.PriCustomTourID + "&enumID=" + @ViewBag.EnumID + "&status=" + item.status;htmllist += "<td><a class='layui-badge-rim j-iframe' style='margin-right: 10px;' href='javascript:' data-full='1' onclick=\"opena(\'" + url + "\')\" title='明细'>明细</a></td>";htmllist += "</tr>";}@Html.Raw(htmllist)</tbody></table></div><div id="pages" class="center"></div></div></div></div></form>
</body>
</html>

需注意

1. 拼接的html字符串，需要用 @Html.Raw() 渲染，才有效果

2. Submit 提交后台可直接 Request["XX"] 获取 XX为标签name

3. layui的资源包不要做任何文件路径调整。相关js会根据路径调用css

如若使用 BundleConfig 后样式无效，请查看 laydate.js 中的以下部分，根据自己的实际路径，做调整

Controller 代码如下

public ActionResult loadData(){int page = int.Parse(Request.Params["page_index"]);int limits = int.Parse(Request.Params["page_size"]);string sel = Request["txtSelect"];string starts = Request["txtstart"];string ends = Request["txtend"];string status = Request["radbtnStatu"];int total = 0;//List<PriCustomTour> list = _dal.GetDataByPage(statu, start, end, sel, userid, page, limit);//total = _dal.GetTotalCount(statu, start, end, sel, userid);List<PriCustomTour> list = new List<PriCustomTour>();PriCustomTour model = new PriCustomTour();model.contact = "测试";model.phone = "13734567654";model.statusName = "对接中";model.status = "001";model.userName = "";model.PriCustomTourID = "1111111";model.NextCorrespondTime = "2020-5-15";list.Add(model);PriCustomTour model1 = new PriCustomTour();model1.contact = "测试";model1.phone = "13734567654";model1.statusName = "对接中";model1.status = "001";model1.userName = "";model1.PriCustomTourID = "1111111";model1.NextCorrespondTime = "2020-5-15";list.Add(model1);ViewBag.DList = list;ViewBag.sel = sel;ViewBag.start = starts;ViewBag.end = ends;ViewBag.statu = status;ViewBag.EnumID = Request.Params["enumID"];ViewBag.total = 2; ;ViewBag.page = page;return View("Test");//后面可跟 , JavaScript("chrckradio()")，调用js方法//return Json(new//{//    code = 0,//    count = total,//    Manager = Manager,//    data = list,//    msg = "Get Data Success！" //});}

Controller没啥特别的，就是 return Json 可前端js 直接用

前端js 需注意的是 laypage

 window.onload = function () {layui.use(['element', 'layer', 'form'], function () {var form = layui.form;$("#userinfo").hide();$('input[name="radbtnStatu"]').hide();form.render('select');//需要渲染一下form.render('radio');});//执行一个laydate实例layui.laydate.render({elem: '#txtstart' //指定元素});layui.laydate.render({elem: '#txtend' //指定元素});chrckradio();getPage();}var page = $("#Vpage").val(); //设置首页页码var limit = 1;  //设置一页显示的条数var total;    //总条数function getPage() {layui.use('laypage', function () {var laypage = layui.laypage,layer = layui.layer;laypage.render({elem: 'pages', count: total //数据总数，从服务端得到, layout: ['count', 'prev', 'page', 'next', limit, 'skip'], limit: limit, curr: page   //page 作为当前页参数, groups: 5, jump: function (obj, first) {page = obj.curr;  //改变当前页码limit = obj.limit;$('#pages>div>a').each(function () {var dpage = $(this).attr("data-page");$(this).prop("href", "/admin/LoadData?page_index=" + dpage + "&page_size=" + limit);});}});});}function opena(url) {var url;                                 //转向网页的地址;var name = "newwindow";                           //网页名称，可为空;var iWidth = 600;                          //弹出窗口的宽度;var iHeight = (window.screen.availHeight) * 0.85;                        //弹出窗口的高度;var iTop = (window.screen.availHeight - 30 - iHeight) / 2;       //获得窗口的垂直位置;var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;           //获得窗口的水平位置;window.open(url, name, 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,location=no,directories=no,menubar=no,scrollbars=yes,resizable=no,status=no,titlebar=no');}function chrckradio(){var radval = $("#statu").val();total = $("#total").val();$('input[name="radbtnStatu"]').each(function () {if (radval == $(this).val()) {$(this).prop("checked", "checked");}});layui.form.render('radio');}function SelCheck() {if ($('#selall').prop("checked")) {$('input[name="Manager"]').not(":disabled").prop("checked", "checked");}else {$('input[name="Manager"]').not(":disabled").prop("checked", "");}}

js 需要注意的 laypage

因为 controller 返回 View 会重新加载所以 laypage的当前页始终是1 ，所以需要将当前页赋值给参数 page

laypage.render({}）中的当前页 curr: page

其次是将 laypage 的A标签加上 href 对应第几页为 a标签的 data-page

MVC 使用ViewBag 加载数据与laypage 结合相关推荐

ASP.NET MVC动态加载数据
ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: <table><tr><th styl ...
easyui datatable ajax 加载数据,ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询...
js前台对datagrid的定义代码,如下 mygrid = $('#mytable').datagrid({ fit: true, //自动大小 height: 'auto', rownumbers ...
highcharts.js两种数据绑定方式和异步加载数据的使用
一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...
layui删除后刷新表格_layui form表单提交之后重新加载数据表格的方法
如下图,在我们做高级查询的时候需要重新加载数据表格table.reload(); HTML form表单菜单:  JS $(function () { //注意:这里是数据表格的加载数据,必须写 ...
jQuery实现后台异步加载数据的省、市二级联动
实现省.市的二级联动,网上的案例大都是死数据,不好和后台交互,于是自己动手写了一个,前台jsp+jquery,后台是spring mvc的controller,用异步来加载数据.废话不多说,上代码!( ...
在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据
在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据如今,最流行的拍照设备智能手机可以捕获高达4K UHD的图像(3840×2160图像),原始数据超过25 MB.即使 ...
android 按住拖动gallery防止马上加载数据导致gallery卡的方法
gallery菜单滑动有一个不好的效果就是每次经过中间的菜单都默认是被选中状态,同时会加载数据以至于切换不流畅,有一种卡卡的感觉!!其实用线程来处理这个问题,一定的时间后如果选择的index值不变, ...
学习下ECharts 异步加载数据
ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行. ECharts 通常数 ...
datatables增删改查php,jQuery+datatables插件实现Ajax加载数据与增删改查功能示例_白峰_前端开发者...
本文实例讲述了这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查注意,需要引入  搜索  新增  编辑  删除职业姓名性别爱好 //点击查找 $(" ...

MVC 使用ViewBag 加载数据与laypage 结合

MVC 使用ViewBag 加载数据与laypage 结合相关推荐

最新文章

热门文章

MVC 使用ViewBag 加载数据 与laypage 结合

MVC 使用ViewBag 加载数据 与laypage 结合相关推荐

最新文章

热门文章

MVC 使用ViewBag 加载数据与laypage 结合

MVC 使用ViewBag 加载数据与laypage 结合相关推荐