vs2017 + miniUI 後端框架使用

時間 2019-12-10

標籤 vs2017 miniui 後端框架使用简体版

原文原文鏈接

vs2017 + miniUI 後端框架使用

上miniUI官網直接下載框架。http://www.miniui.com/ 此框架使用說明很清楚。javascript

2.一、vs2017建立安裝miniUI後端框架

建立一個新項目，名稱：MiniUi_dapper 解決方案名稱：UnitiTwocss

選擇MVC，點擊肯定，等待一下。html

建立完成，一個mvc項目就建立成功，而後咱們在引入miniUi的框架。java

安裝miniUi框架文件，放置對應的目錄。node

注：當前項目miniUI版本不是最新版本，如須要最新版本可於官方下載。mysql

修改 App_Start文件夾下BundleConfig.cs 的方法內容jquery

代碼：sql

public static void RegisterBundles(BundleCollection bundles)數據庫

{json

bundles.Add(new ScriptBundle("~/bundles/js").Include(

"~/Scripts/jquery-1.6.2.js",

"~/Scripts/jquery.unobtrusive*",

"~/Scripts/jquery.validate*",

"~/Scripts/miniui/miniui.js",

"~/Scripts/common.js"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/themes/default/skin.css", "~/Content/themes/Login.css", "~/Content/themes/icons.css"));

}

修改文件 view 》 Home 》 Index.cshtml 文件，雙擊後修改代碼

建立項目時Index.cshtml源代碼

替換上MiniUi的代碼（直接都複製到頁面上便可）：

<!—代碼開始-->

ViewBag.Title = "管理平臺";

Layout = "~/Views/Shared/_Layout.cshtml";

}

@section headers

{

.mini-header div {

padding-left: 0px;

}

.IndexNav {

/*width: 460px;*/

float: right;

display: block;

height: 77px;

font-size: 14px;

vertical-align: middle;

margin-right: 10px;

}

.IndexNav a {

color: #FFFFFF;

font-size: 14px;

text-decoration: none;

}

.IndexNav td {

color: #FFFFFF;

font-size: 14px;

text-decoration: none;

}

.IndexNav a:hover {

text-decoration: underline;

font-size: 14px;

color: #FFFFFF;

}

</style>

}

<div title="north" region="north" class="mini-header" bodystyle="overflow:hidden;"

height="77px" showheader="false" showsplit="false">

</div>

<tr>

當前登陸用戶：

</td>

系統管理員

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</tr>

</table>

</div>

<div id="application_tree" class="mini-outlooktree" idfield="id" parentfield="pid" iconfield="icon" url="@Url.Action("UserApplications", new { id = Request["AppID"] })"

textfield="name">

</div>

<div id="mainTabs" class="mini-tabs" activeindex="0" style="width: 100%; height: 100%;"

onactivechanged="">

</div>

@section scripts

{

$(document).ready(function () {

mini.parse();

mini.get("application_tree").on("nodeclick", function (e) {

var item = e.node;

lastMenuItem = item;

if (item.url)

AddMainTab({ title: item.name, id: item.id, url: item.url, iconCls: item.icon }, true);

});

var portal = new mini.ux.Portal();

portal.set({

style: "width: 98%; height:auto;overflow:hidden",

columns: ['60%', '40%']

});

var tab = mini.get("mainTabs");

window.LoadRelationTab = function (id) {

var tree = mini.get("application_tree");

var node = tree.getNode(id);

if (node != null)

AddMainTab({ title: node.name, id: node.id, url: node.url, iconCls: node.icon }, true);

}

$("#btn_exit").bind("click", function () {

msgBox("是否肯定註銷登陸?", "系統提示", 2, function (action) {

if (action == "yes")

window.location.replace('@Url.Action("Exit", "Accounts")');

});

$("#btn_pass").click(function () {

top.createPopWindow('@Url.Action("UserSet", "Accounts")', '用戶設置', 400, 300, function () {

var iframe = this.getIFrameEl();

iframe.contentWindow.OpenContext = { parent: window, popwin: this };

}, null, null)

});

$("#btn_role").click(function () {

$.getJSON('@Url.Action("ReLoadRole", "Accounts")', function (e) {

msgBox(e.message, "系統提示", 0, function () { window.top.location.replace('@Url.Action("Index", "Home")'); });

});

portal.render(document.getElementById("portal_panels")); //tab.getBodyEl(tab.tabs[0]).firstChild);

$.getJSON('@Url.Action("PortalPanels")', function (data) {

$(data).each(function () {

this.height = "auto";

this.bodyStyle = "overflow:hidden";

this.showCloseButton = false;

this.showCollapseButton = false;

this.onload = function (e) {

var el = e.sender.getIFrameEl();

var cb = $(el.contentWindow.document.body);

cb.css("height", "auto");

e.sender.setHeight(cb.height() + 40);

if (el.contentWindow.onPortalLoad) {

el.contentWindow.onPortalLoad(e);

}

};

});

portal.setPanels(data);

});

document.title = '@ViewBag.Title';

var msgs = [];

var count = 0

var _alert = function (i) {

if (i < count && count > 0) {

if (msgs[i] != "")

msgBox(msgs[i], "系統提示", 1, function () { _alert(i + 1) });

else _alert(i + 1)

}

_alert(0);

$.getJSON('@Url.Action("GetBrokerWarning", "Common")', function (a) {

$(a).each(function () { msgs.push(this); });

count = msgs.length;

_alert(0);

});

</script>

}

<!—代碼結束-->

修改文件 view 》 Shared 》_Layout.cshtml，雙擊後修改代碼,直接粘貼一下代碼便可

<!—代碼開始-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>@ViewBag.Title</title>

@Styles.Render("~/Content/css")

@RenderSection("headers", false)

</head>

<body>

@RenderBody()

var reloginUrl = '@Url.Action("ReLogon", "Accounts", new { r = true })';

</script>

@RenderSection("scripts", false)

</body>

</html>

<!—代碼結束-->

運行一下項目

看見上圖表示代碼嵌入成功，運行正常，安裝完成。

2.2 、vs2017中相關頁面數據配置。

A、配置左側菜單欄導航

新建文件 1.txt，放置路徑爲 content 》 doc 》 1.txt

1.txt文件內容是json格式數據：

[{

"id": "2",

"orders": 1,

"pid": "1",

"name": "菜單管理",

"url": "/app/Home/TreeDataList/2",

"icon": "icon-node"

{

"id": "1",

"orders": 2,

"name": "系統管理",

"url": "/app/Admin/Index/1",

"icon": "icon-system"

{

"id": "6",

"orders": 2,

"pid": "1",

"name": "部門管理",

"url": "/app/Home/TreeDataList/6",

"icon": "icon-depart"

}]

當前項目下 View 》 Home 》 Index.cshtml 修改頁面代碼

代碼修改成：

url="@Url.Content("~/Content/doc/1.txt")"

運行一下項目，左邊菜單欄出來了，成功。

B、配置右邊顯示欄數據。

新建文件 1.txt，放置路徑爲 content 》 doc 》 2.txt

2.txt文件內容是json格式數據：

{

"total": 1,

"data": [

{

"Id": 242,

"Title": "關於武漢市商品房網上籤約和合同備案系統、武漢市房地產經紀服務平臺維護的通知",

"Public_Date": "\/Date(1548980328000)\/",

"Content_Type": 1,

"ReadId": 0

}

]

}

當前項目下建立新文件 Views 》 Home 》 NoticePanel.cshtml（新建立）

NoticePanel.cshtml 頁面代碼爲（可直接複製）：

Layout = Layout = "~/Views/Shared/_Layout.cshtml"; ;

}

日期

</div>

標題

</div>

</div>

var onNoticeLinkRender = function (e) {

var click = "";

if (e.record.Content_Type == 1) {

click = "mini.open({url:'@Url.Action("NoticeView", "Home")/" + e.record.Id + "',title:'" + e.record.Title + "', width:800,height:600,onload:notice_load})";

if(e.record.Impotant_Level ==1 && e.record.ReadId ==0 ){

setTimeout(function(){

mini.open({url:'@Url.Action("NoticeView", "Home")/'+ e.record.Id ,title: e.record.Title , width:800,height:600, onload:notice_load})

}, 500);

}

else {

click = "mini.open({url:'"+ e.record.Url+"',title:'" + e.record.Title + "', width:800,height:600,onload:notice_load})";

}

return '<a href="javascript:void(0)" onclick="' + click + '">查看</a>';

};

$(document).ready(function () {

mini.parse();

window.notice_load = function (a, b, c) {

var iframe = this.getIFrameEl();

iframe.contentWindow.OpenContext = { parent: window, popwin: this };

};

var ng = mini.get("notice_grid");

ng.load();

});

</script>

控制器 controller 》 HomeController.cs 添加方法（直接複製到代碼裏）

[HttpGet]

public ActionResult NoticePanel()

{

return View();

}

最後一步，添加 view 》 Home 》 Index.cshtml 代碼

改成

運行項目，左邊數據顯示

到此框架的安裝，菜單和數據顯示都完成，並顯示成功了。

2.3 鏈接數據庫操做，頁面數據顯示，查詢列表操做。

A、管理nuget程序包安裝 dapper ，在安裝mysql驅動，前面有介紹。

B、mysql建立表:

CREATE TABLE `company` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`CompanyName` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '公司名稱',

`Address` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '地址',

`mobile` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '電話',

`link` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '聯繫人',

`intodate` datetime(0) NULL DEFAULT NULL COMMENT '註冊時間',

PRIMARY KEY (`id`) USING BTREE

) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

SET FOREIGN_KEY_CHECKS = 1;

C、從數據庫取數據，頁面顯示列表。

修改Content 》 doc 》 1.txt 文件內容。

{

"id": "6",

"orders": 2,

"pid": "1",

"name": "部門管理",

"url": "/app/Home/TreeDataList/6",

"icon": "icon-depart"

}

修改代碼爲：

{

"id": "6",

"orders": 2,

"pid": "1",

"name": "部門管理",

"url": " /Home/Company",

"icon": "icon-depart"

}

添加實體類

class Company

{

public int id { get; set; }

public string CompanyName { get; set; } //公司名

public string Address { get; set; } //地址

public string mobile { get; set; } //電話

public string link { get; set; } //聯繫人

public DateTime intodate { get; set; } //註冊時間

}

在控制器添加方法，Controllers 》HomeController

[HttpPost]

public ActionResult CompanyList(int? pageIndex, int? pageSize)

{

using (var conn = new MySqlConnection(ConnectionString))

{

pageIndex = pageIndex ?? 0;

pageSize = pageSize ?? 10;

var query = "select * from Company";

var result = conn.Query<Company>(query).ToList();

var total = result.Count();

var list = result

.OrderByDescending(d => d.id).Skip((pageIndex * pageSize).Value)

.Take((pageSize).Value).Select(d => new

{

d.id,

d.CompanyName,

d.Address,

d.mobile,

d.link,

d.intodate

}).ToList();

return Json(new { total = total, data = list }, JsonRequestBehavior.AllowGet);

}

運行項目，在左側點擊菜單 部門管理

完成從數據庫取數據並在頁面上顯示，點擊分頁顯示下頁數據。

可加qq羣學習索取源碼：qq：547765059

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。