Build a backend management system for ASP. Mvc4+ef5+easyui+unity2.x Injection (9)-mvc and Easyui Add and delete

In the eighth lecture, we have done how to pagination. This talk is mainly about adding and deleting and changing. The code of the six has been given, which contains additions and deletions, you can download the next look. This is mainly, the production of beautiful toolbars, although the Easyui DataGrid has come with the ability to set the toolbar, we still want to extract, for later permission control to do better preparation.

The front-end code has no logical result, this may be I write code since the most relaxed, but also the most tedious, because the art I am not a strong point, every adjustment is very difficult, and finally I transferred him to this:

Look past the applause. The style is already included in the additional code.

All you need to do is add the following HTML code to index.

<div class= "Mvctool" ><input id= "Txtquery" type= "text" class= "SearchText" ><a id= "BtnQuery" style= " Float:left; "class=" l-btn l-btn-plain "><span class=" L-btn-left "><span class=" L-btn-text icon-search " Style= "padding-left:20px;" > Query </span></span></a><div class= "datagrid-btn-separator" ></div><a id= " Btncreate "style=" float:left; "class=" l-btn l-btn-plain "><span class=" L-btn-left "><span class=" L-btn-text icon-add "style=" padding-left:20px; > Added </span></span></a><div class= "Datagrid-btn-separator" ></div><a id= " Btnedit "style=" float:left; "class=" l-btn l-btn-plain "><span class=" L-btn-left "><span class=" L-btn-text Icon-edit "style=" padding-left:20px; " > Edit </span></span></a><div class= "Datagrid-btn-separator" ></div><a id= " Btndetails "style=" float:left; "class=" l-btn l-btn-plain "><span class=" L-btn-left "><span class=" L-btn-texT icon-details "style=" padding-left:20px; " > Details </span></span></a><div class= "datagrid-btn-separator" ></div><a id= " Btndelete "style=" float:left; "class=" l-btn l-btn-plain "><span class=" L-btn-left "><span class=" L-btn-text icon-remove "style=" padding-left:20px; > Delete </span></span></a><div class= "Datagrid-btn-separator" ></div><a id= " Btnexport "style=" float:left; "class=" l-btn l-btn-plain "><span class=" L-btn-left "><span class=" L-btn-text icon-export "style=" padding-left:20px; > Export </span></span></a><a id= "Btnreload" style= "float:left;" class= "L-btn L-btn-plain" > <span class= "L-btn-left" ><span class= "L-btn-text icon-reload" style= "padding-left:20px;" > Refresh </span></span></a></div>

　　

A friend with ability to optimize the style again

OK, we use jquery to add events to the button. Add, delete, change, check, export and refresh delete it. Useless to

Add the following code to the index JS code

<script type= "Text/javascript" >//ifram returns function Framereturnbyclose () {$ ("#modalwindow"). Window (' CL    OSE ');        //iframe returns and refreshes function Framereturnbyreload (flag) {if (flag) $ ("#List"). DataGrid (' Load ');    else $ ("#List"). DataGrid (' reload ');    }//Output information function Framereturnbymes (MES) {$.messagebox5s (' hint ', MES); } $ (function () {$ ("#btnCreate"). Click (function () {$ ("#modalwindow"). HTML ("<iframe width=            ' 100% ' height= ' 98% ' scrolling= ' no ' frameborder= ' 0 ' src= '/syssample/create ' ></iframe> ');        $ ("#modalwindow"). Window ({title: ' New ', width:700, height:400, iconcls: ' Icon-add '}). Window (' open ');        });            $ ("#btnEdit"). Click (function () {var row = $ (' #List '). DataGrid (' getselected '); if (row! = NULL) {$ ("#modalwindow"). HTML ("<iframe width= ' 100% ' height= ' 99% ' frameborder= ' 0 ' src= '/syss Ample/edit?id= "+ row. Id + "& ieguid= "+ getguid () +" ></iframe> ");            $ ("#modalwindow"). Window ({title: ' Edit ', width:700, height:430, iconcls: ' Icon-edit '}). Window (' open ');        } else {$.messagebox5s (' hint ', ' Please select a record to manipulate ');}        });            $ ("#btnDetails"). Click (function () {var row = $ (' #List '). DataGrid (' getselected '); if (row! = NULL) {$ ("#modalwindow"). HTML ("<iframe width= ' 100% ' height= ' 98% ' scrolling= ' no ' frameborder= ' 0 ' src= '/syssample/details?id= ' + row.                Id + "&ieguid=" + getguid () + "></iframe>");            $ ("#modalwindow"). Window ({title: ' Verbose ', width:500, height:300, iconcls: ' Icon-details '}). Window (' open ');            } else {$.messagebox5s (' hint ', ' Please select a record to manipulate ');}        });            $ ("#btnQuery"). Click (function () {var querystr = $ ("#txtQuery"). Val ();            If the query condition is NULL, the default query is all if (querystr = = null) {querystr = "%";       } $ (' #List '). DataGrid ({         URL: '/syssample/getlist?querystr= ' + encodeURI (QUERYSTR)});        });            $ ("#btnDelete"). Click (function () {var row = $ (' #List '). DataGrid (' getselected ');                            if (row! = null) {$.messager.confirm (' hint ', ' OK Delete ', function (r) {if (R) { $.post ("/syssample/delete?id=" + row. Id, function (data) {if (Data.type = = 1) $ ("#List"). dat                                Agrid (' Load ');                            $.messagebox5s (' hint ', data.message);                        }, "JSON");            }                    });            } else {$.messagebox5s (' hint ', ' Please select a record to manipulate ');}    }); });</script>

　　

This is jquery bound events, don't know how jquery is used, go back and learn about selectors and events
OK code is very clear to tell us what to do and additions to do.

It uses the Easyui window.

So we add a layer to the top of the index to include the popup window, we put the added, modified view inside the IFRAME, and then append it to the window to pop

<div id= "Modalwindow" class= "Easyui-window" data-options= "Modal:true,closed:true,minimizable:false,shadow: False "></div>

<div class= "Mvctool", ..........

About $.messagebox5s is the result of my extended Easyui message control, which expands as follows

/** * Called in the IFRAME, in the parent window out of the prompt box (Herf Way without the parent window) */$.extend ({messagebox5s:function (title, msg) {$.messager.show ({ Title:title, Msg:msg, timeout:5000, ShowType: ' Slide ', style: {left: ", right:            5, Top: ", bottom:-document.body.scrolltop-document.documentelement.scrolltop+5    }        }); }}); $.extend ({messagebox10s:function (title, msg) {$.messager.show ({title:title, msg:msg, Heigh                T: ' Auto ', Width: ' Auto ', timeout:10000, ShowType: ' Slide ', style: {left: ', Right:5,            Top: ", bottom:-document.body.scrolltop-document.documentelement.scrolltop + 5    }        });    }}); $.extend ({show_alert:function (strtitle, STRMSG) {$.messager.alert (strtitle, STRMSG); }});/** * The panel recycles memory when it is closed, primarily for layout memory leaks when embedding Web pages with iframe */$.fn.panel.defaults.onbeforedestroy = function () {var frame = $ (' IfRame ', this);        try {//alert (' Destroy, clean up memory '); if (Frame.length > 0) {for (var i = 0; i < frame.length; i++) {frame[i].contentwindow.do                Cument.write (");            Frame[i].contentwindow.close ();            } frame.remove ();            if ($.browser.msie) {collectgarbage (); }}} catch (e) {}};jquery.easyui.plus.js

　　

Create jquery.easyui.plus.js into the scripts directory and introduce

Generates a unique guidfunction getguid () {var S4 = function () {return ((1 + math.random ()) * 0x10000) | 0). toString (+). SUBSTRING (1 );}; Return S4 () + S4 () + S4 () + "-" + S4 ();}

　　

Compile preview, click, add and edit, good, have effect

At this point we create an add, and edit action and view

Here's the code for Syssamplecontroller.

Using system.collections.generic;using system.linq;using system.web.mvc;using app.common;using App.IBLL;using App.models.sys;using microsoft.practices.unity;namespace app.admin.controllers{public class SysSampleController: Controller {///<summary>///Business layer injected///</summary> [Dependency] Public        ISYSSAMPLEBLL M_BLL {get; set;}        Public ActionResult Index () {return View ();  } public Jsonresult GetList (Gridpager Pager, string querystr) {list<syssamplemodel> List = M_bll.            GetList (ref pager);                        var json = new {total = pager.totalrows, rows = (from the R in list                            Select New Syssamplemodel () {Id = R.id,                            Name = r.name, age = r.age, Bir = R.bir, Photo = R.PHoto, Note = r.note, Createtime = R.createtime, }).            ToArray ()};        Return JSON (JSON, jsonrequestbehavior.allowget);        #region Creating public ActionResult Create () {return View (); } [HttpPost] public jsonresult Create (Syssamplemodel model) {if (M_BLL.                Create (model)) {return Json (1, jsonrequestbehavior.allowget);                } else {return Json (0, Jsonrequestbehavior.allowget); }} #endregion #region Modify public actionresult edit (string id) {Syssamp Lemodel entity = M_bll.            GetById (ID);        return View (entity); } [HttpPost] public jsonresult Edit (Syssamplemodel model) {if (M_BLL. Edit (model)) {                   Return Json (1, jsonrequestbehavior.allowget);                } else {return Json (0, Jsonrequestbehavior.allowget);            }} #endregion #region detailed public actionresult details (string id) { Syssamplemodel entity = M_bll.            GetById (ID);        return View (entity); #endregion #region Delete [httppost] public Jsonresult Delete (string id) {if (!string. Isnullorwhitespace (ID)) {if (M_BLL).                Delete (ID)) {return Json (1, jsonrequestbehavior.allowget); } else {return Json (0, Jsonrequestbehavior.allowget)                ;            }} else {return Json (0, Jsonrequestbehavior.allowget);          }} #endregion  }}syssamplecontroller 

Before creating a view, we create a template page that opens a shared creation under views

<! DOCTYPE html>
 Our future pop-up window will all use this template, this template page is mainly introduced data editing and validation 
 CREATE view 
 
@model app.models.sys.syssamplemodel@using App.common; @using App.Models.Sys; @using app.admin;@{viewbag.title = "Create";    Layout = "~/views/shared/_index_layoutedit.cshtml";                           }<script type= "Text/javascript" > $ (Function () {$ ("#btnSave"). Click (function () { $.ajax ({url: "/syssample/create", type: "Post", Data: $ ("#Cre                        Ateform "). Serialize (), DataType:" JSON ", success:function (data) {                            if (data = = 1) {window.parent.frameReturnByMes ("success");                            Window.parent.frameReturnByReload (TRUE); Window.parent.frameReturnByClose ()} else {Windo                        W.parent.framereturnbymes ("failure");        }                    }                });    });    }); </script><div class="Mvctool BGB" > <a id= "btnsave" style= "Float:left" class= "l-btn l-btn-plain" ><span class= "L-btn-left" > <span class= "L-btn-text icon-save" style= "padding-left:20px;" > Save </span></span></a></div> @using (Html.BeginForm ("Create", "syssample", NULL, FormMethod.Post, new {Id = "CreateForm"}) {@Html. ValidationSummary (True) <table class= "Fromedittable Settextwi dth300 "> <tbody> <tr> <td style=" width:100px; Text-align:right; " > @Html. labelfor (model = model. ID): </td> <td style= "width:310px" > @Html. Editorfor (Model =&G T Model. Id) </td> <td> @Html. validationmessagefor (model = model. Id) </td> </tr> <tr> <td style= "width:100px; Text-align:right; " > @Html. labelfor (model = model. Name): </td> <td> @Html. editorfor (model = model. Name) </td> <td> @Html. validationmessagefor (model = model . Name) </td> </tr> <tr> <td style= "width:100px; Text-align:right; " > @Html. labelfor (model = model. Age): </td> <td> @Html. editorfor (model = m Odel. Age) </td> <td> @Html. validationmessagefor (model = mo Del. Age) </td> </tr> <tr> <td style= "width:100px; Text-align:right; " > @Html. labelfor (model = model.  Bir): </td> <td> @Html. textboxfor (model = ModeL.bir) </td> <td> @Html. validationmessagefor (model = Model. Bir) </td> </tr> <tr> <td style= "width : 100px; Text-align:right; " > @Html. labelfor (model = model. Note): </td> <td> @Html. editorfor (model = Model. Note) </td> <td> @Html. validationmessagefor (model = m Odel. Note) </td> </tr> <tr> <td style= "width:100px; Text-align:right; " > @Html. labelfor (model = model. Createtime): </td> <td> @Html. Textboxfor (Mode L = model. Createtime) </td> <Td> @Html. validationmessagefor (model = model. Createtime) </td> </tr> <tr> <td style= "width:10 0px; Text-align:right; " > @Html. labelfor (model = model. Photo): </td> <td> @Html. textboxfor (model = model. Photo) </td> <td> @Html. Val Idationmessagefor (model = model). Photo) </td> </tr> </tbody> </table>}create
　　
The following is too simple, modify and detail yourself to do it. You know, it doesn't mean anything.

 
 

  
  
 
   
To give a hint, modify the creation of a copy, save the time to refer to the URL to modify
 
   
In detail, you can remove the save.
 
   
Query, add a QUERYSTR parameter to the controller's getlist, and in the BLL determine whether the querystr is empty. Write multiple where,o in LINQ without being empty
 
  
 
 
Build a backend management system for ASP. Mvc4+ef5+easyui+unity2.x Injection (9)-mvc and Easyui Add and delete