如何提高碼農產量,基於ASP.NET MVC的敏捷開發框架之自定義表單開發隨筆四

来源:http://www.cnblogs.com/LRBPMS/archive/2016/06/21/5603412.html
-Advertisement-
Play Games

“廠長,上一次我們講過了工作流的整體規劃,今天我要動手做啦!我想先把工作流的自定義表單做出來。” “好的,以前我做這方面的東西,我給你設計了一份表結構,你先拿去看看。” “廠長,是不是沒發完,怎麼就一個表?” “我就知道你會這麼問,我現在給你解釋一下重點欄位的含義。” 數據表:將表單上的內容保存到哪 ...


 

“廠長,上一次我們講過了工作流的整體規劃,今天我要動手做啦!我想先把工作流的自定義表單做出來。”

 

“好的,以前我做這方面的東西,我給你設計了一份表結構,你先拿去看看。”

 


“廠長,是不是沒發完,怎麼就一個表?”

“我就知道你會這麼問,我現在給你解釋一下重點欄位的含義。”

數據表:將表單上的內容保存到哪個表。

關聯表的主鍵:要保存表單數據那張表的主鍵。

是否需要建表:是否需要把表單中的數據存入到表中,這裡的意思是,是將表單上面的欄位與數據表的欄位一一對應還是直接將整個表單的內容打包存一塊。這裡呢就看用戶的需要啦,如果需要作統計彙總之類的數據分析,就按欄位保存好了,如果不是就可以不用為表單上面每一個欄位都對應到數據欄位,這樣操作起來也簡單。

表單內容:註意啦!就是這裡,其實我是想把表單上所有的內容以json形式全部保存到一個欄位里。這樣後臺不用再單獨去建一張表來保存這些東西。前臺統一去解析就好了。

“明白了,這樣做確實好,可以少用好多表。”

“好的,閑話少說,我給你看第一個界面,我們在做界面佈局的時候要考慮用戶操作便捷性,所以可以做成嚮導式的。”


 

“演示地址就是下麵這個,你可以去看看”

http://www.learun.cn:8090 、 用戶名:System,密碼:0000

 

“廠長,這裡點下一步就是跳到一個新的頁面嗎?”

“當然不是,其實是多個DIV之間的切換。來我給你看看代碼。”

“別個這個頁面看起來很複雜的樣子,其實就是幾個div+js實現的。先看html”

 

<div class="widget-body">
    <div id="wizard" class="wizard" data-target="#wizard-steps" >
        <ul class="steps">
            <li data-target="#step-1" class="active"><span class="step">1</span>基本配置<span class="chevron"></span></li>
            <li data-target="#step-2"><span class="step">2</span>表單設計<span class="chevron"></span></li>
            <li data-target="#step-4"><span class="step">3</span>創建完成<span class="chevron"></span></li>
        </ul>
    </div>
    <div class="step-content wizard-step-content" id="wizard-steps">
        <div class="step-pane wizard-step-pane active" id="step-1">
        </div>
        <div class="step-pane flowapp" id="step-2">
            <div id="frmdesign"></div>
        </div>
        <div class="step-pane" id="step-4">
            <div class="drag-tip">
                <i class="fa fa-check-circle"></i>
                <p >設計完成,請點擊保存</p>
            </div>
        </div>
    </div>
    <div class="form-button" id="wizard-actions">
        <a id="btn_last" disabled class="btn btn-default btn-prev">上一步</a>
        <a id="btn_next" class="btn btn-default btn-next">下一步</a>
        <a id="btn_caogao" class="btn btn-info">保存草稿</a>
        <a id="btn_finish" disabled class="btn btn-success" onclick="finishbtn();">保存</a>
    </div>
</div>

再來看一下JS

 

        //載入導向
        $('#wizard').wizard().on('change', function (e, data) {
            var $finish = $("#btn_finish");
            var $next = $("#btn_next");
            if (data.direction == "next") {
                switch (data.step) {
                    case 1:
                        return bindingBase();
                        break;
                    case 2://綁定表單
                        if (!bindingFrm()) {
                            return false;
                        }
                        $finish.removeAttr('disabled');
                        $next.attr('disabled', 'disabled');
                        $('#btn_caogao').attr('disabled', 'disabled');
                        break;
                    default:
                        break;
                }
            } else {
                $finish.attr('disabled', 'disabled');
                $next.removeAttr('disabled');
                $('#btn_caogao').removeAttr('disabled');
            }
        });

 

“哇,真的呢,這種效果好,果然是可以跳來跳去的。那你現在講一下這個拖拽的表單是怎麼實現的吧。”

“恩,你看看,這個東西的原理其實就是拼接html,左邊放工具欄,工具欄上選擇不同的工具其實就是不同類型的控制項,右側設置控制項的屬性。中間顯示效果。”

 

 function setFrmInfo(data)
    {
        var _height = $(window).height() - 87 < 410 ? 410 : $(window).height() - 87;
        postData.FrmContent = data.FrmContent;
        if (data.isSystemTable == "0") {
            frmapp = $('#frmdesign').frmDesign({
                Height: _height,
                frmContent: postData.FrmContent
            });
        }
        else {
            var _frmdatabase = [];
            for (var i in frmdatabase)
            {
                if (frmdatabase[i].column != postData.FrmTableId)
                {
                    _frmdatabase.push(frmdatabase[i]);
                }
            }
            frmapp = $('#frmdesign').frmDesign({
                Height: _height,
                tablefiledJsonData: _frmdatabase,
                isSystemTable: postData.isSystemTable,
                frmContent: postData.FrmContent
            });
        }
    }
    function bindingFrm() {
        var frmcotentls = frmapp.getData();
        if (!frmcotentls) {
            return false;
        }
        postData.FrmContent = JSON.stringify(frmcotentls);
        return true;
    }
    /*=========表單選擇(end)====================================================================*/

    /*=========創建完成(begin)==================================================================*/
    function finishbtn() {
        postData["EnabledMark"] = 1;
        $.SaveForm({
            url: "../../FlowManage/FormDesign/SaveForm?keyValue=" + keyValue,
            param: postData,
            loading: "正在保存數據...",
            success: function () {
                $.currentIframe().$("#gridTable").trigger("reloadGrid");
            }
        })
    }


後臺代碼:

 


 

        /// <summary>
        /// 保存用戶表單(新增、修改)
        /// </summary>
        /// <param name="keyValue">主鍵值</param>
        /// <param name="userEntity">用戶實體</param>
        /// <returns></returns>
        [HttpPost]
        [ValidateAntiForgeryToken]
        [AjaxOnly]
        public ActionResult SaveForm(string keyValue, WFFrmMainEntity userEntity)
        {
            wfFrmMainBLL.SaveForm(keyValue, userEntity);
            return Success("操作成功。");
        }

 

        /// <summary>
        /// 保存表單
        /// </summary>
        /// <param name="entity">表單模板實體類</param>
        /// <param name="keyValue">主鍵</param>
        /// <returns></returns>
        public int SaveForm(string keyValue,WFFrmMainEntity entity)
        {
            try
            {
                if (string.IsNullOrEmpty(keyValue))
                {
                    entity.Create();
                    this.BaseRepository().Insert(entity);
                }
                else
                {
                    entity.Modify(keyValue);
                    this.BaseRepository().Update(entity);
                }
                return 1;
            }
            catch(Exception)
            {
                throw;
            }
        }

就這麼簡單,一個功能就完了。

 



您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • linux系統中通過write命令給線上的其他用戶發送消息。 ...
  • 1.上傳zookeeper-3.4.6.tar.gz安裝包 2.解壓tar -xzf zookeeper-3.4.6.tar.gz 3.配置(先在一臺節點上配置) 3.1添加一個zoo.cfg配置文件 $ZOOKEEPER/conf mv zoo_sample.cfg zoo.cfg 3.2修改配置 ...
  • <html> <head> <meta name="viewport" content="width=device-width" /> <title>創建二維碼</title> <script src="~/Content/uploadify/jquery-2.1.1.min.js"></scrip ...
  • Winform中Treeview控制項失去焦點,將選擇的節點設置為高亮顯示 (2012-07-16 13:47:07)轉載▼標簽: winform treeview drawnode Treeview控制項--Name:tVtypeList將tVtypeList的HideSelection屬性設置為Fa ...
  • 前言 繼之前發的帖子【ORM-Dapper+DapperExtensions】,對Dapper的擴展代碼也進行了改進,同時加入Dapper 對Lambda表達式的支持。 由於之前缺乏對Lambda的知識,還是使用了拿來主義。研究了些案例,總歸有些問題: 1、只能生成sql、不能將值進行參數化。 2、 ...
  • 天創恆達UB530高清視頻採集卡USB游戲PS4視頻翻錄電影網路直播錄播會議HDMI採集盒 http://item.jd.com/1567495458.html 天創恆達UB5A0 USB採集卡HDMI 分量 網路會議ps4游戲視頻高清採集盒1080p http://item.jd.com/1542 ...
  • 我們在前面章節中講了寄宿,在前面的實例中也用到了配置文件,這一篇主要講講如何在應用配置文件,提高WCF程式的靈活性。在編寫WCF服務應用程式時,編寫配置項也是其中一項主要工作,在前面的幾個示例中我也使用過配置文件,通過配置文件來簡化代碼。WCF通過公開終結點,向客戶端公開服務,包括服務的地址、服務用... ...
  • 原文: "Adding Validation" 作者: "Rick Anderson" 翻譯: "謝煬(Kiler)" 校對: "孟帥洋(書緣)" 、 "婁宇(Lyrics)" 、 "許登洋(Seay)" 在本章節中你將為 模型類添加驗證邏輯,以確保在用戶試圖創建或編輯影片數據時強制執行驗證規則。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...