1.1. Ignite Grid Display Data
The Ignite UI provides HTML5 and CSS3-based controls that need to be added to the assembly reference INFRAGISTICS.WEB.MVC, the corresponding CSS and JS, which require the jquery UI, Bootstrap, and Modernizr.
1.1.1. modifying bundleconfig
Ignite required CSS and JS reference, unified in the Bundleconfig configuration.
Jquery-ui Bundles. ADD (New Scriptbundle ("~/bundles/jqueryui"). Include ( "~/scripts/jquery-ui-{version}.js" )); <!--Ignite UI Required Combined CSS Files---- Bundles. ADD (New Stylebundle ("~/igniteui/css"). Include ( "~/igniteui/css/themes/infragistics/infragistics.theme.css", "~/igniteui/css/structure/infragistics.css" )); <!--Ignite UI Required Combined JavaScript Files--- Bundles. ADD (New Scriptbundle ("~/igniteui/js"). Include ( "~/igniteui/js/infragistics.core.js", "~/igniteui/js/infragistics.dv.js", "~/igniteui/js/infragistics.loader.js", "~/igniteui/js/infragistics.lob.js" )); |
1.1.2. Modifying cshtml
To improve efficiency, the CSS should be loaded first, after loading JS, so JS added to the bottom of the file.
@Styles. Render ("~/igniteui/css") Omit page code ... @Scripts. Render ("~/bundles/jqueryui") @Scripts. Render ("~/igniteui/js") |
1.1.3. Action Add attribute
Action adds an attribute griddatasourceaction, the return type is IQueryable,
[Griddatasourceaction] Public Async task<actionresult> Create (string roleid) { if (string. Isnullorwhitespace (Roleid)) { return new Httpstatuscoderesult (httpstatuscode.badrequest); } var roles = _rolemanager.roles.tolist (); Viewbag.roleid = new SelectList (roles, "ID", "Description", Roleid); Take role Permission ID var rolepermissions = await _rolemanager.getrolepermissionsasync (Roleid); Set the difference between full and role permissions var allpermission = _db. Permissions.tolist (); var permissions = allpermission.except (rolepermissions); Create ViewModel var permissionviews = new list<permissionviewmodel> (); var map = mapper.createmap<applicationpermission, permissionviewmodel> (); Permissions. each (t = { var view = mapper.map<permissionviewmodel> (t); Permissionviews.add (view); }); Sort Permissionviews.sort (New Permissionviewmodelcomparer ()); Return View (Permissionviews.asqueryable ()); } |
1.1.4. Modifying a view
The Ignite UI provides two ways for JS and HTML Helper,model to be declared as IQueryable, and the sample code is the latter.
@using INFRAGISTICS.WEB.MVC @Styles. Render ("~/igniteui/css") @model iqueryable<aspnetidentity2permission.mvc.models.permissionviewmodel> <div class= "Form-group" > <div class= "Col-md-10" > @ (Html.infragistics () . Grid (Model) . ID ("Grid") . Height ("500px") . Width ("100%") . AutoGenerateColumns (False) . Autogeneratelayouts (False) . Rendercheckboxes (True) . PrimaryKey ("Id") . Columns (column = { Column. for (x = x.id). Hidden (TRUE); Column. for (x = x.action). HeaderText ("Action name"); Column. for (x = X.controller). HeaderText ("controller name"); Column. for (x = x.description). HeaderText ("function description"); }) . Features (feature = { Feature. Selection (). Mode (Selectionmode.row). Multipleselection (TRUE); Feature. Rowselectors (). Enablerownumbering (True). Enablecheckboxes (TRUE); Feature. sorting (); Feature. Paging (). PageSize (10) . Firstpagelabeltext ("first page") . Lastpagelabeltext ("last Page") . Nextpagelabeltext ("next page") . Pagesizedropdownlabel ("Number of records per page") . Prevpagelabeltext ("previous page"); }) //. Datasourceurl (Url.action ("GetPermissions")) . DataBind () . Render () ) </div> </div> |
1.1.5. Running effect
1.2. jquery Interacting with action
Take the Iggrid selected data item, and post it to the action after encapsulation.
1.2.1. jquery Operational Data
jquery uses $ ("#Grid") to take the dom,$ ("#RoleID") with the ID named Grid. val () takes the value of the DOM element with the ID value Roleid, $.post (URL, data, callback) initiates the AJAX request submission data, The callback method handles callback data.
<script> function Getrowsinfo () { var selectedrows = $ ("#Grid"). Iggridselection ("Selectedrows"), data = [], cellval; if (Selectedrows.length = = 0) { Alert ("Please select Record"); return false; } Take Roleid var Roleid = $ ("#RoleID"). Val (); Take token var token = $ ("input[name= ' __requestverificationtoken ')"). Val (); Fetching column data Gridcolumns = $ ("#Grid"). Iggrid ("option", "columns"); for (j = 0; J < Selectedrows.length; J + +) { var row = Selectedrows[j]; var rowdata = {}; Take cell for (i = 0; i < gridcolumns.length; i++) { Cellval = $ ("#Grid"). Iggrid ("Getcellvalue", Row.id, Gridcolumns[i].key); Rowdata[gridcolumns[i].key] = Cellval; } DATA[J] = RowData; } Submit Service-Side Save $.post ("/rolepermissions/create", { "__requestverificationtoken": Token, "Roleid": Roleid, "Data": Data }, function (Result) { if (result. Success) { Jump to Index window.location = "/rolepermissions/index?roleid=" + Roleid; } else { Refreshes the current Location.reload (); } }); } </script> |
1.2.2. Action Handling
MVC will automatically complete the model binding on the post data.
[HttpPost] [Validateantiforgerytoken] Public Async task<actionresult> Create (string roleid, ienumerable<permissionviewmodel> data) |
The action uses Jsonresult to return JSON-formatted data to the client, and the code is shown in/rolepermissions/create.
Method 1, encapsulated in the Jsonresult class, is in JSON format and is used directly by the client var response = new dictionary<string, bool> (); Response. ADD ("Success", true); return new Jsonresult {Data = response}; |
You can also return a JSON string, which is parsed by the client itself, and the code is shown in/permissionsadmin/create.
Method 2, using Newtonsoft.json to serialize the result object The format is a JSON string, which the client needs to parse, that is, deserialization var result = Jsonconvert.serializeobject (New {Success = true}); return new Jsonresult {Data = result}; |
1.2.3. Client parsing JSON
At this point the client gets the JSON data, which can be used directly.
function (Result) { if (result. Success) { Jump to Index window.location = "/rolepermissions/index?roleid=" + Roleid; } else { Refreshes the current Location.reload (); } } |
If the return format of the action is a JSON string, it needs to be converted to a JSON object.
function (JSONSTR) { The data is a JSON string that needs to be parsed var result = eval ("(" + Jsonstr + ")"); if (result. Success) { Jump to Index window.location = "/permissionsadmin/index"; } else { Refreshes the current Location.reload (); } } |
1.3. Cross-site attacks
ASP. NET MVC implements defense by validating tokens before and after the form is filled in, and adding @html.antiforgerytoken () to the view generates a hidden INPUT element named __requestverificationtoken. The service side uses the feature Validateantiforgerytoken to validate the token, which is typically submitted with the form without additional processing.
View
@Html. AntiForgeryToken (); |
Action
[Description ("New role, submit")] [HttpPost] [Validateantiforgerytoken] Public async task<actionresult> Create (Roleviewmodel Roleviewmodel) |
JS can also be processed by itself.
JS Take token
Take token var token = $ ("input[name= ' __requestverificationtoken ')"). Val (); |
jquery sends tokens
Submit Service-Side Save $.post ("/rolepermissions/create", { "__requestverificationtoken": Token, "Roleid": Roleid, "Data": Data }, |
ASP. NET Identity Role-rights Management 10