How to increase the yield of coders? ASP. net mvc-based Agile development framework-custom form development Article 4. asp. netmvc

How to increase the yield of coders? ASP. net mvc-based Agile development framework-custom form development Article 4. asp. netmvc

 

"Director, the last time we talked about the overall planning of the workflow, I have to do it today! I want to make the custom form of the workflow first ."

 

"Okay, I used to do this. I designed a table structure for you. Let's take a look at it first ."

 

"Director, isn't it done? Why is it just a table ?"

"I knew you would ask this question. I will explain the meaning of key fields to you now ."

Data Table: Table to which the content in the form is saved.

Primary Key of the associated table: the primary key of the table to save the form data.

Whether to create a table: whether to store the data in the form into the table, whether to one-to-one correspondence between the field in the form and the field in the data table or directly package the content of the entire form. Here we will look at the user's needs. If we need to perform statistical summary and other data analysis, we will save it by field, if not, you do not need to map data fields to each column in the form, which is easy to operate.

Form Content: note! Here, I want to save all the content in the form in json format to a field. In this way, you no longer need to create a table to save these items in the background. The front-end should be resolved in a unified manner.

"You understand, this is really good, you can use a lot of tables ."

"Okay, let's talk less about it. I'll show you the first interface. We should consider the convenience of user operations when making the interface layout, so we can make it a wizard ."

 

"This is the demo address. You can check it out"

Http://www.learun.cn: 8090, User name: System, password: 0000

 

"Director, click Next here to jump to a new page ?"

"Of course not. It is actually a switch between multiple Divs. Let me show you the code ."

"The other page looks very complicated, but it is actually implemented by several div + js. First look at 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> basic configuration <span class = "chevron "> </span> </li> <li data-target =" # step-2 "> <span class =" step "> 2 </span> form design <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 class =" step-pane "id = "step-4"> <div class = "drag-tip"> <I class = "fa-check-circle"> </I> <p> the design is complete, click Save </p> </div> <div class = "form-button" id = "wizard-actions"> <a id = "btn_last" disabled class = "btn-default btn-prev"> previous step </a> <a id = "btn_next" class = "btn-default btn-next"> next </a> <a id = "btn_caogao" class = "btn-info"> Save the draft </a> <a id = "btn_finish" disabled class = "btn -success "onclick =" finishbtn (); "> Save </a> </div>

Let's take a look at JS.

 

// Load-oriented $ ('# 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: // bind the form 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 ');}});

 

"Wow, really, this effect is good, and it can be jumped. Now, let's talk about how the drag-and-drop form is implemented ."

"Well, you can see that the principle of this item is to splice html. On the left side of the toolbar, choose different tools on the toolbar. Different types of controls are actually selected, and set the control attributes on the right side. ."

 

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;}/* =========== form selection (end) ========================================================== =================================== * // * ============== = in) ========================================================== =========================================== */function finishbtn () {postData ["EnabledMark"] = 1; $. saveForm ({url :".. /.. /FlowManage/FormDesign/SaveForm? KeyValue = "+ keyValue, param: postData, loading:" saving data... ", success: function () {$. currentIframe (). $ ("# gridTable "). trigger ("reloadGrid ");}})}

Background code:

 

 

/// <Summary> /// Save the user form (add or modify) /// </summary> /// <param name = "keyValue"> primary key value </param> /// <param name = "userEntity"> user entity </param >/// <returns> </returns> [HttpPost] [ValidateAntiForgeryToken] [AjaxOnly] public ActionResult SaveForm (string keyValue, WFFrmMainEntity userEntity) {wfFrmMainBLL. saveForm (keyValue, userEntity); return Success ("operation successful. ");}

 

/// <Summary> // Save the form /// </summary> /// <param name = "entity"> form template entity class </param> /// <param name = "keyValue"> Primary Key </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 ;}}

This is simple, and a function is complete.