Easyui + asp.net mvc + sqlite 开发教程

怼烎@ 2024-04-17 06:05 28阅读 0赞

第一节：

前言（技术简介）

EasyUI 是一套 js的前端框架 利用它可以快速的开发出好看的 前端系统 web 它是在jquery的框架基础上面   
  
现在越来越多的 企业用它来开发web系统  
  
extjs (功能很强大 但是非常复杂 速度 我感觉也没有 easyui快)  
  
easyui （比较适合初学者 小巧 而且 速度感觉还是可以 相对ext来说 ）  
  
ASP.NET MVC  
  
Sqlite 数据库  
  
（一个小型的数据库 不用安装 很多单机软件 利用他来做数据保存）  
  
工具 动软代码生成器 IDE(VS2010)  
  
物理框架是 win7 64位  
  
逻辑框架 三层 data business UI

MVC ASP.NET MVC  
  
MVC 是在 .net 3.5 以后才有的一个东西

![10110212-812790e0ea254d3199dfe003587ac21c.png][]

下载easyui  
  
![easyui下载][easyui]  外链资源： [easyui下载 ][easyui 1]地址：http://www.jeasyui.com/download/downloads/jquery-easyui-1.3.2.zip  
  
在asp.net MVC中添加 easyui

第二节：

创建一个home页的view

![10110446-b89d37e0de26413c80a4f6b81ea31f55.jpg][]  
  
index.aspx 在里面添加easyui的应用支持（添加js 和css）

[![复制代码][copycode.gif]][copycode.gif 1]

<script src="../../Content/Easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="../../Content/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
        <script src="../../Content/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
        <link href="../../Content/Easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
        <link href="../../Content/Easyui/themes/icon.css" rel="stylesheet" type="text/css" />

[![复制代码][copycode.gif]][copycode.gif 1]

布局 我们使用 easyui的 layout

[![复制代码][copycode.gif]][copycode.gif 1]

<body class="easyui-layout">
            <div data-options="region:'north',border:false" style="height:40px;background:#0099C8;padding:10px">logo</div>
            <div data-options="region:'west',split:true,title:'菜单栏'" style="width:150px;padding:10px;">
           <ul id="tt"></ul>  
        </div>
            <div data-options="region:'south',border:false" style="height:20px;background:#ccc;padding:1px;">北盟学习社区 当前登录人： admin</div>
            <div data-options="region:'center',title:'Center'"></div>
        <script type="text/javascript">
            $('#tt').tree({
                url: '/Prim/Index',
                checkbox: true
            });  
        </script>
    </body>

[![复制代码][copycode.gif]][copycode.gif 1]

这样 一个简单的布局 就搞定了

![10110502-dd66ae0ea34c4ebcb55e12b4a20cbb0e.jpg][]

easyui 布局的时候 我们要修改layout panel的一些样式  
  
但这里有一点要注意的 就是 五个region 其他都可以没有 但是 “'center',title:'” 这个 必须有

[![复制代码][copycode.gif]][copycode.gif 1]

<div data-options="region:'north',border:false" style="height:40px;background:#0099C8;padding:10px">logo</div>
            <div data-options="region:'west',split:true,title:'菜单栏'" style="width:150px;padding:10px;">
           <ul id="tt"></ul>  
        </div>
            <div data-options="region:'south',border:false" style="height:20px;background:#ccc;padding:1px;">北盟学习社区 当前登录人： admin</div>
            <div data-options="region:'center',title:'Center'"></div>

[![复制代码][copycode.gif]][copycode.gif 1]

$(  '\#tt' ).tree(\{

onClick:  function  (node) \{  //菜单树 的点击事件

//alert(node.attributes.url);  // alert node text property when clicked

//接下来是添加一个tab

$(   '\#tabs'  ).tabs( 'add'   , \{

title: node.text,

iconCls:   'icon-ok'  ,

content:  'asdfsdfsdfsdfsd'  ,

closable:  true

\});

\}

\});

![10111623-ff4ac7d000b04845bd0c3ed2b9b5449a.jpg][]

视频下载地址：  
  
![Easyui+asp.net mvc实用教程 第01节 Easyui Mvc Sqlite介绍 和三层的搭建][easyui]  外链资源： [Easyui+asp.net mvc实用教程 第01节 Easyui Mvc Sqlite介绍 和三层的搭建][Easyui_asp.net mvc_ _01_ Easyui Mvc Sqlite_]

![第02节 Easyui的引入和搭建 布局][easyui]  外链资源： [第02节 Easyui的引入和搭建 布局][02_ Easyui_]

![Easyui+asp.net mvc实用教程第03节][easyui]  外链资源： [Easyui+asp.net mvc实用教程第03节][Easyui_asp.net mvc_03]

[10110212-812790e0ea254d3199dfe003587ac21c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/e196558f8a884c57bd8edb38c483c819.png
[easyui]: http://www.bamn.cn/images/common/download.png
[easyui 1]: http://www.jeasyui.com/download/downloads/jquery-easyui-1.3.2.zip
[10110446-b89d37e0de26413c80a4f6b81ea31f55.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/00df2b28e80f43838d7d151dca726d9f.jpg
[copycode.gif]: http://common.cnblogs.com/images/copycode.gif
[copycode.gif 1]: http://www.cnblogs.com/maijin/archive/2013/08/10/3249798.html
[10110502-dd66ae0ea34c4ebcb55e12b4a20cbb0e.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/c7b3eb38dc9a4e1f9f2ad4493c6c0315.jpg
[10111623-ff4ac7d000b04845bd0c3ed2b9b5449a.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/bed8b342700b473f89ba92ce4c3c2093.jpg
[Easyui_asp.net mvc_ _01_ Easyui Mvc Sqlite_]: http://pan.baidu.com/share/link?shareid=3518141331&uk=540184145
[02_ Easyui_]: http://pan.baidu.com/share/link?shareid=3531526542&uk=540184145
[Easyui_asp.net mvc_03]: http://pan.baidu.com/share/link?shareid=3328046452&uk=540184145

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关 .NET MVC Jquery EasyUI Demo

<%@ Page Language="C\" Inherits="System.Web.Mvc.ViewPage<DotNetMvc.Models.EnApplica...

Love The Way You Lie/ 2024年04月18日 10:28/ 0 赞/ 34 阅读

相关 Easyui + asp.net mvc + sqlite 开发教程

一节：前言（技术简介） EasyUI 是一套 js的前端框架利用它可以快速的开发出好看的前端系统 web 它是在jquery的框架基础上面现在越来...

怼烎@/ 2024年04月17日 06:05/ 0 赞/ 29 阅读

相关 EasyUI+JavaWeb奖助学金管理系统开发教程

[点此查看全部文字教程、视频教程、源代码][Link 1] 目录 [EasyUI+JavaWeb奖助学金管理系统\[1\]-项目立项][EasyUI_JavaWeb_1

淩亂°似流年/ 2022年12月22日 08:50/ 0 赞/ 126 阅读

相关【EasyUI+MVC-搭建后台框架】

一.EasyUI简介： jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且

淩亂°似流年/ 2022年08月22日 11:30/ 0 赞/ 234 阅读

相关 MVC+easyui-datagrid之查看详情

在做GXPT时，我负责课表这块儿，而这块儿最大的特点是很难用到大家公共的东西，只能自己一点点去做，其中之一就是查看详情，这个功能我做了大概有两天时间，下面是

r囧r小猫/ 2022年08月06日 14:16/ 0 赞/ 144 阅读

相关 ExtJS4 MVC开发教程：搭建开发环境

在所有的JS框架中，ExtJS算的上是一个超重量级的前端框架，里面封装了大量的类库以至于很多刚开始接触ExtJS的朋友们不知如何下手，即便是很多人看着别人的dem

女爷i/ 2022年07月21日 05:43/ 0 赞/ 194 阅读

相关 SQLite快速入门教程

这个SQLite快速入门教程教你如何有效地开始学习并使用SQLite。通过本教程的实践操作学习之后，相信你应该可以了解并能够熟练地使用SQLite了。如果您一直在使用其他关

忘是亡心i/ 2022年06月15日 12:20/ 0 赞/ 474 阅读

相关 sqlite 操作简明教程

SQLite顾名思议是以 SQL为基础的数据库软件，SQL是一套强大的数据库语言，主要概念是由「数据库」、「资料表」（table）、「查询指令」（queries）等单元组成的

ゝ一纸荒年。/ 2022年06月11日 06:40/ 0 赞/ 214 阅读

相关 C# MVC使用easyUI 教程

步骤一：开发工具为visual studio2015和easyUI17，easyUI框架大家可以去逛网下载：[http://www.jeasyui.com/download/i

我就是我/ 2022年02月18日 20:49/ 0 赞/ 213 阅读

相关 SQLite 教程

内容导航 <table> <tbody> <tr> <td><a href="http://codingdict.com/article/7120" r

小咪咪/ 2021年09月21日 00:42/ 0 赞/ 332 阅读