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