ASP.NETMVC快速开发框架之SqlSugar+SyntacticSugar+JQWi。。。jqwidgets.js:
是⼀个功能完整的框架，它具有专业的可触摸的jQuery插件、主题、输⼊验证、拖放插件、数据适配器，内置WAI-ARIA（⽆障碍⽹页应⽤）可访问性、国际化和MVVM模式⽀持。jQWidgets 为搭建专业⽹站和开发移动应⽤程序提供了⼀个全⾯的解决⽅案。它完全基于开放的标准和技术，如 HTML5、CSS、Javascript和jQuery。jQWidgets能实现响应式web开发，可以帮助您创建在桌⾯、平板电脑和智能⼿机上看起来很漂亮的应⽤程序和⽹站。
⽆论是美感还是功能都⽐easyui更胜⼀筹，代码开源使⽤收费。
SyntacticSugar.dll:
功能齐全包含验证、通⽤扩展函数、类型转换、⽂件上传、以及⼤量C#语法糖的⼀款⼯具类库。
源码地址：
SqlSugar.dll：
是⼀款基于MSSQL的轻量级、⾼性能、简单易⽤的ORM框架
教程及源码下载地址：
JQWidgetsSugar.dll （本贴的重点）
基于jqwidgets.js 的C#封装类库，⽬前只完成了grid部分，我的所有GIT项⽬会在以后项⽬开发中持续更新
效果图：
C#代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SqlSugar;
using DAL;
using JQWidgetsSugar;
using Models;
using SyntacticSugar;
namespace NetJQWidgets.Controllers
{
public class GridController : Controller
{
public ActionResult Index()
{
var adp = new GridDataAdapterSource();
adp.url = "/Grid/Data";
var gc = new GridConfig();
{
new GridButton(){ click="add", name="addbutton", icon="jqx-icon-plus", title="添加"},
new GridButton(){ click="edit", name="editbutton", icon="jqx-icon-edit", title="编辑"},
new GridButton(){ click="del", name="delbutton", icon="jqx-icon-delete", title="删除"}
};
gc.pageSize = 20;
gc.width = "80%";
new GridColumn(){ text="编号", datafield="id", width="40px", cellsalign=AlignType.left,datatype=Datatype.dataint },
new GridColumn(){ text="名称", datafield="name", cellsalign=AlignType.left,datatype=Datatype.datastring },
new GridColumn(){ text="产品名", datafield="productname", cellsalign=AlignType.left,datatype=Datatype.datastring },
new GridColumn(){ text="数量", datafield="quantity", cellsalign=AlignType.right , datatype=Datatype.dataint },
new GridColumn(){ text="创建时间", datafield="date", cellsformat="yyyy-MM-dd",cellsalign=AlignType.right, datatype=Datatype.datadate
}
};
var grid = JQXGrid.BindGrid("#netgrid", adp, gc);
ViewBag.validationBind = ValidationSugar.GetBindScript("validate_key_grid_index");
return View(grid);
}
[HttpDelete]
public JsonResult Del(int id)
{
using (SqlSugarClient db = SugarDao.GetInstance())
{
ActionResultModel<string> model = new ActionResultModel<string>();
model.isSuccess = db.Delete<GridTable>(id);
return Json(model);
}
}
[HttpPost]
public JsonResult Add(GridTable gt)
{
using (SqlSugarClient db = SugarDao.GetInstance())
{
string message = string.Empty;
var isValid = ValidationSugar.PostValidation("validate_key_grid_index", out message);
ActionResultModel<string> model = new ActionResultModel<string>();
if (isValid)//后台验证数据完整性
{
model.isSuccess = db.Insert(gt) != DBNull.Value;
}
else {
model.isSuccess = false;
}
return Json(model);
}
}
[HttpPut]
public JsonResult Edit(GridTable gt)
{
using (SqlSugarClient db = SugarDao.GetInstance())
{
ActionResultModel<string> model = new ActionResultModel<string>();
string message = string.Empty;
var isValid = ValidationSugar.PostValidation("validate_key_grid_index", out message);
if (isValid)//后台验证数据完整性
{
model.isSuccess = db.Update<GridTable>(gt, it => it.id == gt.id);
}
else {
model.isSuccess = false;
}
return Json(model);
}
}
[OutputCache(Duration = 0)]
public JsonResult Data(GridSearchParams pars)
{
using (SqlSugarClient db = SugarDao.GetInstance())
{
if (pars.sortdatafield == null) { //默认按id降序
pars.sortdatafield = "id";
pars.sortorder = "desc";
}
Sqlable sable = db.Sqlable().Form<GridTable>("g");//查询表的sqlable对象
var model = JQXGrid.GetWidgetsSource<Models.GridTable>(sable, pars);//根据grid的参数⾃动查询 return Json(model, JsonRequestBehavior.AllowGet);
}
}
}
}
Razor视图
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using JQWidgetsSugar
@section head{
<script src="/Content/My97DatePickerBeta/My97DatePicker/WdatePicker.js" type="text/javascript"></script> <link href="/Content/My97DatePickerBeta/My97DatePicker/skin/WdatePicker.css" rel="stylesheet"
type="text/css" />
<script src="/Content/jquery-validation-1.13.1/dist/jquery.validate.min.js" type="text/javascript"></script>
<link href="/Content/jquery-validation-1.13.1/validation.sugar.css" rel="stylesheet"
type="text/css" />
<script src="/Content/jquery-validation-1.13.1/validation.sugar.js" type="text/javascript"></script>
<script type="text/javascript">
//添加
function add(row) {
save(row, true);
}
//编辑
function edit(row) {
save(row, false);
}
//删除
function del(row) {
if (row == null) {
jqxAlert('请选择⼀条记录！')
} else {
jqxDelete({ gridSelector: "#netgrid",
url: "/Grid/Del",
data: { id: row.id }
});
}
}
function save(row, isAdd) {
var isEdit = !isAdd;
if (isEdit) {
if (row == null) {
jqxAlert('请选择⼀条记录！')
return;
}
}
//弹出框
jqxWindow("#editbox", isAdd?"添加":"编辑", 400, "auto");
//美化 button
$("#editbox button").jqxButton();
//取消事件
$('#cancel').unbind();
$('#cancel').on('click', function (e) {
$("#editbox").jqxWindow("close")
});
if (isAdd) {
//清空表单
$("#frmtable").formClear();
} else {
//格⽇化⽇期
row.date = $.Date(row.date, "yyyy-MM-dd")
//通过JSON⾃动填充表单，也可以⾃已实现
$("#frmtable").formFill({ data: row })
}
//确定事件
$('#save').unbind();
$('#save').on('click', function (e) {
factory.ajaxSubmit(function () {
var url = isAdd ? "/grid/add" : "/grid/edit";
var type = isAdd ? "post" : "put";
$("#frmtable").ajaxSubmit({
url: url,
type: type,
success: function (msg) {
if (msg.isSuccess == false) {
spnseInfo);
}
$("#netgrid").jqxDataTable('updateBoundData');
$("#editbox").jqxWindow("close")
}, error: function (msg) {
console.log(msg);
}
})
});
});
}
//绑定验证
$(function () {
window.factory = new validateFactory($("form"), "<img src=\"/Content/jquery-validation-1.13.1/error.png\" />");
factory.init();
});
</script>
@Html.Raw(Model)
}
<div id="netgrid">
</div>
<div id="editbox" class="hide">
<div class="savetable">
<form id="frmtable" class="form">
<table >
<tr>
<td align="right">
名称:
</td>
<td align="left">
<input id="id" name="id" type="hidden" value="0" />
<input id="name" name="name" type="text" />
</td>
</tr>
<tr>
<td align="right">
产品名:
</td>
<td align="left">
<input id="productname" name="productname" type="text" />
</td>
</tr>
<tr>
<td align="right">
数量:
</td>
<td align="left">
<input id="quantity" name="quantity" type="text" />
</td>
</tr>
<tr>
<td align="right">
时间:
</td>
<td align="left">
<input id="date" class="Wdate" onclick="WdatePicker()" name="date" type="text" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<br />
<button id="save" type="button">
保存</button>
<button type="button" id="cancel">
取消</button>
</td>
</tr>
jquery源码在线</table>
</form>
</div>
</div>
@Html.Raw(ViewBag.validationBind)
例⼦不是很难，就是最基本的增、删、查、改。
功能虽然简单但是也考虑到了很多问题⽐如：前端加后端的双向验证、代码扩展性强、语法简洁、异常的处理等。DEMO下载地址：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论