Build a backend management system for ASP. Mvc5+ef6+easyui 1.4.3+unity4.x Injection (55)-Workflow design-form layout

Preface: This section is a bit more interesting. Basic pure UI, but not very complex

With the implementation of form printing and a more compliant process form, we have to customize the layout to fit the business scenario print! What effect do we want? See

(We did not layout the form before and set the layout after the form)

Post-Change layout

Knowledge points in this section:

Easyui draggable combined with resizable (drag and set size)

Add the action action in the form to extract the Create code from section 48. Change the name

 [Supportfilter (actionname =  " edit   "  string   ID) { if  (string  . IsNullOrEmpty (ID)) { return   View ();            } viewbag.formid  = ID;            Viewbag.perm  = Getpermission ();                        viewbag.html  = Excehtmljs (ID);         return   View (); }

UI code Extraction: code under jquery-easyui-1.4.3\demo\droppable and resizable files

Post-Extraction code: I added a little style myself.

Formlayout.cshtml

<style type="Text/css">Input[type="text"], input[type=" Number"], input[type="datetime"], input[type="datetime"],Select, textarea {display:normal;} #setFormLayout {position:relative;overflow:hidden;width: -%; height:500px} #setFormLayout. Easyui-DRAGGABLE{BORDER:1PX # thesolid;overflow:hidden;background: #fff; width:300px;} . Inputtable{height: -%;width: -%;} . inputtable. Inputtitle{border-RIGHT:1PX # thesolid;width:80px;padding-right:10px;text-align:right;vertical-Align:middle}. inputtable. inputcontent {text-align:right;vertical-align:middle;padding:5px;} . inputtable. inputcontent. Input{width: the%}. inputtable. inputcontent textarea{height: -%;min-height:40px;} </style><div id="Setform"> <div id="Setformlayout" class="Easyui-panel"> <divclass="easyui-draggable"data-option="Ondrag:ondrag"> <tableclass="inputtable"> <tr> &LT;TDclass="InputTitle"> Name </td> <tdclass="inputcontent"><inputclass="input"Type="text"/></td> </tr> </table> </div> </div></div>&lt ;script>function Ondrag (e) {varD =E.data; if(D.left <0) {D.left =0 }        if(D.top <0) {D.top =0 }        if(D.left + $ (d.target). Outerwidth () >$ (d.parent). Width ()) {D.left= $ (d.parent). Width ()-$ (d.target). Outerwidth (); }        if(D.top + $ (d.target). Outerheight () >$ (d.parent). Height ()) {D.top= $ (d.parent). Height ()-$ (d.target). Outerheight (); }    }    $('. Easyui-draggable'). Draggable ({edge:5}). resizable ();</script>

Code parsing :

Ondrag

E

Fires during drag and returns False when no more drags are allowed.

   $ ('. Easyui-draggable '). Draggable ({edge:5 }). resizable (); border position within 5px can be set to the size of the boundary

Run Result: arbitrary drag position

Populate the form: How to populate the form. We need to extract the "form request" code. Jump to section 48 to see how to read the form's code

// gets the HTML form for the specified name

        Private stringGethtml (stringIdstringNorefStringBuilder Sbjs) {StringBuilder SB=NewStringBuilder (); Flow_formattrmodel Attrmodel=Formattrbll.getbyid (ID); Sb. AppendFormat ("<tr><th>{0}:</th>", Attrmodel.title); //gets the HTML form of the specified typeSb. AppendFormat ("<td>{0}</td></tr>",NewFlowhelper ().            GetInput (Attrmodel.attrtype, Attrmodel.name, no));            Sbjs.append (ATTRMODEL.CHECKJS); returnsb.        ToString (); }

Fill in this method with the following code

<divclass="easyui-draggable"data-option="Ondrag:ondrag"> <tableclass="inputtable"> <tr> &LT;TDclass="InputTitle"> Name </td> <tdclass="inputcontent"><inputclass="input"Type="text"/></td> </tr> </table> </div>

Last generated code:

 Private stringGethtml (stringIdstringNorefStringBuilder Sbjs) {StringBuilder SB=NewStringBuilder (); Flow_formattrmodel Attrmodel=Formattrbll.getbyid (ID); Sb. AppendFormat ("<div class= ' easyui-draggable ' data-option= ' Ondrag:ondrag ' ><table class= ' inputtable ' ><tr> <TD class= ' inputtitle ' >{0}</td>", Attrmodel.title); //gets the HTML form of the specified typeSb. AppendFormat ("<td class= ' inputcontent ' >{0}</td></tr></table></div>",NewFlowhelper ().            GetInput (Attrmodel.attrtype, Attrmodel.name, no));            Sbjs.append (ATTRMODEL.CHECKJS); returnsb.        ToString (); }

Run effect (a bit long, thanks for watching GIF)

How to save? we're going to save it to the HTML field in the Flow_form table. Use later to determine if this field has null and is not a null priority out

How to take the saved value:$ ("#setFormLayout"). HTML ()

Save the Code:

$("#btnSave"). Click (function () {$.ajax ({URL:"@Url. Action ("Savelayout")", type:"Post", data: {html: $ ("#setFormLayout"). HTML (), FormId:"@ (Viewbag.formid)"}, DataType:"JSON", Success:function (data) {if(Data.type = =1) {window.parent.frameReturnByMes (data.message); Window.parent.frameReturnByReload (true); Window.parent.frameReturnByClose ()}Else{window.parent.frameReturnByMes (data.message);    }            }        }); });

Finally merge into my application and approval.

The end! we have to acknowledge the power of Easyui.

Build a backend management system for ASP. Mvc5+ef6+easyui 1.4.3+unity4.x Injection (55)-Workflow design-form layout