ASP.NET MVC 快速开发框架之 SqlSugar+SyntacticSugar+JQWidgetsSugar+jqwidgets
jqwidgets.js:
是一个功能完整的框架,它具有专业的可触摸的jQuery插件、主题、输入验证、拖放插件、数据适配器,内置WAI-ARIA(无障碍网页应用)可访问性、国际化和MVVM模式支持。jQWidgets 为搭建专业网站和开发移动应用程序提供了一个全面的解决方案。它完全基于开放的标准和技术,如 HTML5、CSS、Javascript和jQuery。jQWidgets能实现响应式web开发,可以帮助您创建在桌面、平板电脑和智能手机上看起来很漂亮的应用程序和网站。
无论是美感还是功能都比easyui更胜一筹,代码开源使用收费。
SyntacticSugar.dll:
功能齐全包含验证、通用扩展函数、类型转换、文件上传、以及大量C#语法糖的一款工具类库。
源码地址:https://github.com/sunkaixuan/SyntacticSugar
SqlSugar.dll:
是一款基于MSSQL的轻量级、高性能、简单易用的ORM框架
教程及源码下载地址: http://www.cnblogs.com/sunkaixuan/p/4649904.html
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(); gc.gridbuttons = new List<GridButton>() { 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%"; gc.columns = new List<GridColumn>(){ 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); model.respnseInfo = model.isSuccess ? "删除成功" : "删除失败"; 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; model.respnseInfo = model.isSuccess ? "添加成功" : "添加失败"; } else { model.isSuccess = false; model.respnseInfo = message; } 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); model.respnseInfo = model.isSuccess ? "编辑成功" : "编辑失败"; } else { model.isSuccess = false; model.respnseInfo = message; } 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 = $.convert.toDate(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) { jqxAlert(msg.respnseInfo); } $("#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 style="table-layout: fixed; border-style: none;"> <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 style="margin-left: 5px;" type="button" id="cancel"> 取消</button> </td> </tr> </table> </form> </div> </div> @Html.Raw(ViewBag.validationBind)
例子不是很难,就是最基本的增、删、查、改。
功能虽然简单但是也考虑到了很多问题比如: 前端加后端的双向验证、代码扩展性强、语法简洁、异常的处理等。
DEMO下载地址:https://github.com/sunkaixuan/JQWidgetsSugar