你的位置:首页 > ASP.net教程

[ASP.net教程]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="http://www.cnblogs.com//Content/My97DatePickerBeta/My97DatePicker/WdatePicker.js" type="text/javascript"></script>  <link href="http://www.cnblogs.com//Content/My97DatePickerBeta/My97DatePicker/skin/WdatePicker.css" rel="stylesheet"    type="text/css" />  <script src="http://www.cnblogs.com//Content/jquery-validation-1.13.1/dist/jquery.validate.min.js" type="text/javascript"></script>  <link href="http://www.cnblogs.com//Content/jquery-validation-1.13.1/validation.sugar.css" rel="stylesheet"    type="text/css" />  <script src="http://www.cnblogs.com//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" >  <div >    <form id="frmtable" >    <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" 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>    </table>    </form>  </div></div>@Html.Raw(ViewBag.validationBind)

 

例子不是很难,就是最基本的增、删、查、改。

功能虽然简单但是也考虑到了很多问题比如: 前端加后端的双向验证、代码扩展性强、语法简洁、异常的处理等。 

 

DEMO下载地址:https://github.com/sunkaixuan/JQWidgetsSugar