在MVC+三层 中使用jquery-easyui步骤和相关介绍:
介绍jQuery EasyUI:
jQuery EasyUI是以jQuery为基础的开源JavaScript网页用户界面代码库。
包含底层用户交互、动画、特效和可更换主题的可视控件。
jQuery UI的优点:
简单易用
继承 jQuery 简易使用特性,提供高度抽象接口,短期改善网站易用性。
开源免费
采用 MIT & GPL 双协议授权,轻松满足自由产品至企业产品各种授权需求。
广泛兼容
兼容各主流桌面浏览器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。
轻便快捷
组件间相对独立,可按需加载,避免浪费带宽拖慢网页打开速度。
美观多变
提供近 20 种预设主题,并可自定义多达 60 项可配置样式规则,提供 24 种背景纹理选择。
开放公开
从结构规划到代码编写,全程开放,文档、代码、讨论,人人均可参与
jQuery UI的缺点
A、代码不够健壮:缺乏全面的测试用例,部分组 件Bugs较多,不能达到企业级产品开发要求
B、架规划不足:组件间 API 缺乏协调,缺乏配合 使用帮助。
C、控件较少:相对于 Dojo、YUI、Ext JS 等成熟 产品,可用控件较少,无法满足复杂界面功能 要求
注:Model:用来封装表字段
在DAL:用存储过程+DBhelp来读取和判断数据库数据
在BLL:调用并判断DAL的方法
一、先将jquery-easyui的文件夹拖到MVC项目文件夹中
二、jquery-easyui中要引用的文件:
例如
1、easyui-1.32:
<link href="~/Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<link href="~/Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
<link href="~/Scripts/jquery-easyui-1.3.2/demo/demo.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
2、easyui-1.34
<1>.引用Jquery的Js文件
<script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script>
<2>.引用Easy UI的Js文件
<script src="jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript"></script>
<3>.导入Easy UI的主题Css文件
<link href="jquery-easyui- 1.3.4/themes/default/easyui.css"rel="stylesheet" type="text/css" />
<4>.导入Easy UI的图标Css文件
<link href="jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" />
<5>.引用Easy UI的国际化文件 以下为让它显示中文
<scriptsrc=" jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" ype="text/javascript"></script>
<6>.页面上加上UTF-8编码 防止jquery.easyui.min.js 内容乱码
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
三、在Easy UI中的GridView中的用法(显示,增加,修改,删除、Easy UI的修饰和用途)
1、《1》显示(前台代码的数据绑定)(注:其字段必须与后台绑定字段一致)
@*显示用户数据*@
<table id="dg" class="easyui-datagrid" title="信息显示" style="width: 700px; height: 250px"
data-options="rownumbers:true,singleSelect:true,pagination:true,url:'/Power/PowerList'">
<thead>
<tr>
<th data-options="field:'UsersId',width:80,align:'center'"">用户编号</th>
<th data-options="field:'UsersName',width:100,align:'center'"">用户姓名</th>
<th data-options="field:'Pass',width:80,align:'center'">用户密码</th>
<th data-options="field:'AddDate',width:100,align:'center'">添加日期</th>
<th data-options="field:'Power',width:80,align:'center'">操作</th>
<th data-options="field:'jiao',width:80,align:'center'">操作角色</th>
</tr>
</thead>
</table>
《2》后台要将数据转换成json数据格式
JavaScriptSerializer helper = new JavaScriptSerializer();
string json = helper.Serialize(jsonlist);
json = "{\"total\":" + PowerManager.GetSelList().Count() + ",\"rows\":" + json + "}";
return Content(json);
2、《1》增加(前台代码)
@*<%--添加图层表单--%>*@
<div id="Add" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save'" style="width: 450px; height: 300px; padding: 10px;">
<div class="easyui-panel" title="New Topic" style="width: 400px">
<div style="padding: 10px 0 10px 60px">
<form id="ff" method="post" action="/Power/Create">
<table>
<tr>
<td>用户姓名</td>
<td>
<input class="easyui-validatebox" type="text" id="UsersName" name="UsersName" data-options="required:true,validType:'int'" /></td>
</tr>
<tr>
<td>用户密码</td>
<td>
<input class="easyui-validatebox" type="text" id="Pass" name="Pass" data-options="required:true" /></td>
</tr>
</table>
</form>
</div>
<div style="text-align: center; padding: 5px">
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()">提 交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">清 空</a>
</div>
</div>
<script>
function submitForm() {
location.reload();
$('#ff').form('submit');
$('#Add').form('close');
}
function clearForm() {
$('#ff').form('clear');
}
</script>
</div>
《2》增加(后台代码)
// POST: /Power/Create
//添加用户
[HttpPost]
public ActionResult Create(Model.tab_Users model)
{
try
{
// TODO: Add insert logic here
PowerManager.p_Power_AddUsers(model);
return RedirectToAction("Index");
}
catch
{
return View();
}
}
3、《1》修改(前台代码)
@* 修改页面*@
<div id="Update" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save'" style="width: 450px; height: 300px; padding: 10px;">
<div class="easyui-panel" title="New Topic" style="width: 400px">
<div style="padding: 10px 0 10px 60px">
<form id="fun" method="post" action="/Power/Edit">
<table>
<tr>
<td>
<input type="hidden" id="UsersId" name="UsersId" />
</td>
</tr>
<tr>
<td>用户姓名</td>
<td>
<input class="easyui-validatebox" type="text" id="Usersname" name="Usersname" data-options="required:true,validType:'int'" />
</td>
</tr>
<tr>
<td>用户密码</td>
<td>
<input class="easyui-validatebox" type="text" id="pass" name="pass" data-options="required:true" />
</td>
</tr>
</table>
</form>
</div>
<div style="text-align: center; padding: 5px">
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()">修 改</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">清 空</a>
</div>
</div>
<script>
function submitForm() {
location.reload();
$('#fun').form('submit');
$('#Update').form('close');
}
function clearForm() {
$('#fun').form('clear');
}
</script>
</div>
《2》修改(后台代码)
// GET: /Power/Edit/5
//修改
[HttpPost]
public ActionResult Edit(Model.tab_Users model)
{
try
{
Model.tab_Users model2 = PowerManager.GetSelList().SingleOrDefault(d => d.UsersId == model.UsersId);
model2.UsersName = model.UsersName;
model2.Pass = model.Pass;
model2.AddDate = DateTime.Now;
int res = PowerManager.updateUsers(model2);
if (res > 0)
{
return RedirectToAction("Index");
}
else
{
return View();
}
}
catch
{
return View();
}
}
4、《1》删除、Easy UI的修饰和用途(前台代码)
<script type="text/javascript">
$(function () {
$("#Add").window('close');
$("#Update").window('close');
$("#che1").window('close');
$("#che").window('close');
$("#AddRole").window('close')
var pager = $('#dg').datagrid('getPager'); // get the pager of datagrid
pager.pagination({
buttons: [{
iconCls: 'icon-search',
handler: function () {
var row = $("#dg").datagrid('getSelected')
if (row) {
var id = row.UsersId;
//alert(id);
$.get(
"/Power/Details?UsersId=" + id,
function (data) {
//alert("aa");
$("#role").html(data);
//alert("a");
$('#Role').window('open');
}
)
}
else {
$.messager.alert('警告', '必须选择一行');
}
}
}, {
iconCls: 'icon-add',
handler: function () {
$("#Add").window('open');
}
}, {
iconCls: 'icon-edit',
handler: function () {
var row = $("#dg").datagrid('getSelected');
if (row) {
$("#Usersname").val(row.UsersName + "");
$("#pass").val(row.Pass + "");
$("#UsersId").val(row.UsersId + "");
var id = row.UsersId;
$("#Update").window('open');
}
else {
$.messager.alert('警告', '请输入要修改的行');
}
}
}, {
iconCls: 'icon-remove',
handler: function () {
var row = $("#dg").datagrid('getSelected');
if (confirm('您确定要删除??')) {
if (row) {
//alert(row);
window.location.href = "/Power/Delete?UsersId=" + row.UsersId;
}
else {
$.messager.alert('警告', '请输入要删除的行');
}
}
}
}]
});
})
</script>
《2》后台(删除代码)
// POST: /Power/Delete/5
//删除
public ActionResult Delete(int UsersId)
{
try
{
int res = PowerManager.DelUserById(UsersId);
if (res > 0)
{
return RedirectToAction("Index");
}
else
{
return View();
}
}
catch
{
return View();
}
}