码迷,mamicode.com
首页 > Web开发 > 详细

MVC JQuery Table Ajax 的一些扩展和应用

时间:2014-09-24 16:08:37      阅读:340      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   os   java   ar   

bubuko.com,布布扣
  1 ///Home page 
  2 public ActionResult MaintainSuperUserAdmin()
  3         {                        
  4             return View();
  5         }
  6 
  7         /// <summary>
  8         /// return Json Data for Jquery  Table
  9         /// </summary>
 10         /// <param name="parm"></param>
 11         /// <returns></returns>
 12         public JsonResult PageList(DataTablesParam parm)
 13         {
 14             int iDisplayStart = Convert.ToInt32(Request.Params["iDisplayStart"]);
 15             //data size
 16             int iDisplayLength = Convert.ToInt32(Request.Params["iDisplayLength"]);
 17             //data total            
 18             int totalCount = 0;
 19             IEnumerable<UserProfileRoleSchemeView> user = db.P_V_USER_PROFILE_ROLE_SCHEME_S_BY_APPID_ROLEID(appid, Sid).ToList();
 20             totalCount = user.OrderBy(m=>m.LAST_ACTIVITY_TIME).ToList().Count();
 21 
 22             user = user.Skip(iDisplayStart).Take(iDisplayLength).ToList();
 23 
 24             return Json(new
 25             {
 26                 sEcho = parm.sEcho,
 27                 iTotalRecords = totalCount,
 28                 iTotalDisplayRecords = totalCount,
 29                 aaData = user
 30             }, JsonRequestBehavior.AllowGet);
 31         }
 32 
 33 ///add Ajax Post
 34  [HttpPost]
 35         public JsonResult Add(string SchemeId, string RoleId)
 36         {
 37             bool result=false;
 38             List<RoleScheme> admin = (List<RoleScheme>)Session["RoleScheme"];           
 39             RoleScheme rs = new RoleScheme();            
 40             //rs.SchemeId = Convert.ToInt32(Request["SchemeId"]);
 41             //rs.RoleId = Request["RoleId"];            
 42             rs.SchemeId =Convert.ToInt32(SchemeId);
 43             rs.RoleId = RoleId;             
 44             var role = cUser.Roles.Where(m => m.ROLE_ID == rs.RoleId).FirstOrDefault();
 45             rs.RoleName = role.ROLE_NAME;
 46             var Scheme = db.Schemes.Where(m => m.SCHEME_ID == rs.SchemeId).FirstOrDefault();
 47             rs.SchemeName = Scheme.SCHEME_NAME;
 48             foreach (var model in admin)
 49             {
 50                 if (model.RoleId == rs.RoleId & model.SchemeId == rs.SchemeId)
 51                     result = true;
 52             }
 53             if (result)
 54             {
 55                 return Json("No", JsonRequestBehavior.AllowGet);
 56             }
 57             else
 58             {
 59                 admin.Add(rs);
 60                 Session["RoleScheme"] = admin;
 61                 return Json("OK", JsonRequestBehavior.AllowGet);
 62             }
 63         }
 64 //Delete Ajax Post
 65         [HttpPost]
 66         public JsonResult Delete(string SchemeIdAndRoleId)
 67         {
 68             int SchemeId;
 69             string RoleId = "";
 70             SchemeIdAndRoleId = SchemeIdAndRoleId.Remove(SchemeIdAndRoleId.Length - 1);
 71             var list = SchemeIdAndRoleId.Split(,).ToList();
 72             List<RoleScheme> admin = (List<RoleScheme>)Session["RoleScheme"];
 73             if (list.Count > 1)
 74             {               
 75                 for (int i = 0; i < list.Count; i++)
 76                 {
 77                     RoleId = list[i].Split(&)[0].ToString();
 78                     SchemeId = Convert.ToInt32(list[i].Split(&)[1].ToString());
 79                     RoleScheme roleAndS = admin.Where(m => m.RoleId == RoleId & m.SchemeId == SchemeId).FirstOrDefault();
 80                     admin.Remove(roleAndS);
 81                 }
 82                 Session["RoleScheme"] = admin;
 83                 return Json("OK", JsonRequestBehavior.AllowGet);
 84             }
 85             else
 86             {
 87                 RoleId = SchemeIdAndRoleId.Split(&)[0].ToString();
 88                 SchemeId = Convert.ToInt32(SchemeIdAndRoleId.Split(&)[1].ToString());
 89                 RoleScheme roleAndS = admin.Where(m => m.RoleId == RoleId & m.SchemeId == SchemeId).FirstOrDefault();
 90                 admin.Remove(roleAndS);
 91                 Session["RoleScheme"] = admin;
 92                 return Json("OK", JsonRequestBehavior.AllowGet);
 93             }            
 94         }
 95 
 96         public JsonResult Get()
 97         {
 98             RoleScheme rsIndex = new RoleScheme();           
 99             rsIndex.SchemeName ="Sample(GST)";
100             rsIndex.RoleName = "Sample(SUPERUSER)";
101             if (Session["RoleScheme"] == null)
102             {
103                 List<RoleScheme> users = new List<RoleScheme>();
104                 users.Add(rsIndex);
105 
106                 Session["RoleScheme"] = users;
107             }            
108             Dictionary<string, List<RoleScheme>> result = new Dictionary<string, List<RoleScheme>>();
109             result["aaData"] = (List<RoleScheme>)Session["RoleScheme"];          
110             return Json(result, JsonRequestBehavior.AllowGet);
111         }
Controller


Model为自定义的, 该项目为MVC DataBaseFirst   数据源是一个多个表组成的view。

bubuko.com,布布扣
 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using CPFB.AWP.GPP.Models;
 6 using System.ComponentModel.DataAnnotations;
 7 using CPFB.AWP.Common.Models;
 8 using System.Web.Mvc;
 9 
10 namespace CPFB.AWP.GPP.Web.Admin.Mvc.Models
11 {
12     public class MaintainUserAdminModel
13     {
14         
15     }
16     public class UserAdmin
17     {
18         [Required]        
19         public int USERS_IN_ROLES_ID { get; set; }
20         [Required]
21         public string USER_ID { get; set; }
22         [Required]
23         public string ADID { get; set; }
24         [Required(ErrorMessage="Pls Input a Value")]
25         public string NAME { get; set; }
26         [Required]
27         public string NRIC { get; set; }
28         [Required]
29         public string Email { get; set; }
30         [Required]
31         public string ContractNumber { get; set; }
32        
33         [Required(ErrorMessage="Not Null")]
34         public string AgencyId { get; set; }
35         [Required]
36         public string Designation { get; set; }
37        
38         [Required(ErrorMessage="Not Null")]        
39         public int SchemeId { get; set; }
40 
41         [Required(ErrorMessage = "Not Null")]   
42         public string RoleId { get; set; }
43         [Required]
44         public bool IsVip { get; set; }
45         [Required]
46         public bool IsDelete { get; set; }
47         [Required]
48         public bool IsPostQA { get; set; }
49         [Required]
50         public int VERSIONNO { get; set; }
51         [Required]
52         public string TRANSACTIONID { get; set; }
53         [Required]
54         public string CREATEBY { get; set; }
55         [Required]
56         public DateTime CREATETIME { get; set; }       
57     }
58     public class RoleScheme
59     {        
60         public int SchemeId { get; set; }
61         public string RoleId { get; set; }
62         public string SchemeName { get; set; }
63         public string RoleName { get; set; }
64     }
65 }
Model

 关于Jquery  Table  还是需要多查询一些属性。
View 中由于一些需求更改,,注释了许多东西,注释的也是可以完成的一些基本功能

bubuko.com,布布扣
  1 <div><h4>MaintainSuperUserAdmin</h4>
  2     <h5 style="color:red">@ViewBag.mes</h5>
  3     </div>
  4 @using (Html.BeginForm(new { id = "Grid-form", @role = "form", @class = "form-horizontal" }))
  5 {
  6     <table id="tab">
  7         <thead>
  8             <tr>
  9                 <th>Delete</th>                
 10                 <th>Scheme</th>
 11                 <th>NAME</th>
 12                 <th>Email</th>
 13                 <th>Contract Number</th>
 14                 <th>Agency</th>
 15                 <th>Designation</th>
 16                 <th>Scheme</th>
 17                 <th>IsDeleted</th>             
 18             </tr>
 19         </thead>
 20     </table>
 21     <div class="text-center">
 22         <input id="AddUserInfo" type="submit" value="Add User" name="btnaction" />
 23         <input id="DelUserInfo" type="submit" value="Delete" name="btnaction" />
 24     </div>
 25 }
 26 
 27 
 28 
 29 @section Scripts{
 30     <script type="text/javascript">
 31         var url = "";        
 32         $(document).ready(function () {
 33             var admin = $(#tab).dataTable({
 34                 "sScrollX": "100%",               
 35                 "sScrollXInner": "100%",
 36                 "bScrollCollapse": true,
 37                 "processing": true,
 38                 "serverSide": true,
 39                 bPaginate: true,
 40                 "sAjaxSource": "/UserProfileRoleSchemeViews/PageList",
 41                 iDisplayLength: 8,
 42                 "bLengthChange": false,
 43                 "bFilter": false,                
 44                 "aoColumnDefs": [                   
 45                       {
 46                           "render": function (data, type, full) {
 47                               if (full.IS_DELETED == true) {
 48                                   return full.USER_NAME;
 49                               }
 50                               else {
 51                                   return <a href="/UserProfileRoleSchemeViews/UpdateSuperUser + "?userid=" + full.USER_ID + "&roleid=" + full.ROLE_ID +
 52                                       "&SchemeId=" + full.SCHEME_ID + "> + full.USER_NAME + </a>;
 53                               }
 54                           },
 55                           "targets": 2
 56                       },                     
 57                       {
 58                           "render": function (data, type, full) {
 59                               if (full.IS_DELETED == true) {
 60                                   return <input type="checkbox" id="CheckUser" name="SelectedRoleId" value=" + full.IS_DELETED + "/>;
 61                               }
 62                               else {
 63                                   return <input type="checkbox" id="CheckUser" name="SelectedRoleId" value=" + full.USER_ID + & + full.USERS_IN_ROLES_ID + & + full.IS_DELETED + "/>;
 64                               }
 65                           },
 66                           "targets": 0
 67                       },
 68                       //{
 69                       //    "render": function (data, type, full) {
 70                       //        return ‘<input id="btnAdd" type="button" onclick="keleyidialog(‘ + full.USERS_IN_ROLES_ID + ‘);" value="AddRole"/>‘;
 71                       //    },
 72                       //    "targets": 9
 73                       //},
 74                       {
 75                           "render": function (data, type, full) {
 76                               if (full.IS_DELETED == true) {
 77                                   return "Yes";
 78                               }
 79                               else {
 80                                   return "No";
 81                               }
 82                           },
 83                           "targets": 8
 84                       },               
 85                 ],
 86                 aoColumns: [
 87                         { "mData": "USERS_IN_ROLES_ID" },                        
 88                         { "mData": "AD_ID" },
 89                         { "mData": "USER_NAME" },
 90                         { "mData": "EMAIL_ADDRESS" },
 91                         { "mData": "MOBILE_ALIAS" },
 92                         { "mData": "AGENCY_ID" },
 93                         { "mData": "DESIGNATION" },
 94                         { "mData": "SCHEME_NAME" },
 95                         {"mData":"IS_DELETED"},
 96                         //{ "mData": null },                       
 97                 ]
 98             });
 99             //$("#tab tbody").on(‘click‘, ‘button‘, function  Clic(){
100             //    var clickfull=$(this).parents("tr")[0].sectionRowIndex;
101             //    var data = $("#tab tbody tr")[clickRow].parentNode.children[clickRow].innerHTML;
102             //})
103             //var formOptions = {
104             //    success: function (responseText, statusText, xhr, $form) {
105 
106             //        if (responseText == "OK") {
107 
108             //            admin.ajax.reload();
109             //        }
110             //    },
111             //    dataType: "json"
112             //};
113             //$("#add-form").ajaxForm(formOptions);
114             //$("#AddRole").click(function () {
115             //    var oSettings = admin.fnSettings();
116             //    oSettings.sAjaxSource = "/UserProfileRoleSchemeViews/PageList";
117             //    alert(oSettings.sAjaxSource);
118             //    admin.fnClearTable(0);
119             //    admin.fnDraw();
120             //});
121         })
122 
123 
124         //var row = $(‘#dg‘).datagrid(‘getSelected‘);
125         //if (row) {
126         //    $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘, ‘Edit User‘);
127         //    $(‘#fm‘).form(‘load‘, row);
128         //    url = ‘update_user.php?id=‘ + row.id;
129         //}
130 
131 
132         //function keleyidialog(userinroleid) {
133         //    $("#table").dialog(
134         //        {
135         //            title: "Add Role And Scheme",
136         //            resizable: false,
137         //            height: 240,
138         //            width: 400,
139         //            modal: true,
140         //        }
141         //        );
142         //    document.getElementById(‘USERS_IN_ROLES_ID‘).value = userinroleid;            
143         //}
144 
145         
146         //function getDate()
147         //{
148         //    var result;
149         //    jQuery.ajax({
150         //        type: ‘POST‘,
151         //        async: false,
152         //        url: ‘../hand/UserDel.ashx?uid=‘ + depCodeVal + ‘‘,
153         //        data: ‘‘,
154         //        success: function (data) {
155         //            if (data.length > 0) {
156         //                result = data;
157         //            }
158         //        }
159         //    });
160         //}
161         //function hidden()
162         //{
163         //    $("#table").hide();
164         //}
165 
166     </script>
167 }
View
bubuko.com,布布扣
  1 <h2>AddSuperUser</h2>
  2 
  3 
  4 @using (Html.BeginForm())
  5 {
  6     @Html.AntiForgeryToken()
  7     <div class="row">
  8         <table class="table table-striped table-bordered table-hover" id="dataTables-example">
  9             <tr>
 10                 <td></td>
 11             </tr>
 12             <tr>
 13                 <td>
 14                     USER ID
 15                 </td>
 16                 <td>
 17                     @Html.TextBoxFor(model => model.ADID)
 18                     @Html.ValidationMessageFor(model => model.ADID)
 19                 </td>
 20             </tr>
 21             <tr>
 22                 <td>
 23                     NAME
 24                 </td>
 25                 <td>
 26                     @Html.TextBoxFor(model => model.NAME)
 27                     @Html.ValidationMessageFor(model => model.NAME)
 28                 </td>
 29             </tr>
 30             <tr>
 31                 <td>
 32                     Email
 33                 </td>
 34                 <td>
 35                     @Html.TextBoxFor(model => model.Email)
 36                 </td>
 37             </tr>
 38             <tr>
 39                 <td>
 40                     Contract Number
 41                 </td>
 42                 <td>
 43                     @Html.TextBoxFor(model => model.ContractNumber)
 44                 </td>
 45             </tr>
 46             <tr>
 47                 <td>
 48                     Agency
 49                 </td>
 50                 <td>
 51                     @*@Html.DropDownListFor(model => model.Schemalist, @ViewData["Schemalist"] as SelectList)*@
 52                     @Html.DropDownListFor(model=>model.AgencyId,(SelectList)ViewData[Constants.AdminMoudle.Agencylist], Constants.AdminMoudle.ListIndex)
 53                     @Html.ValidationMessageFor(model => model.AgencyId)
 54                 </td>
 55             </tr>
 56             <tr>
 57                 <td>
 58                     Designation
 59                 </td>
 60                 <td>
 61                     @Html.TextBoxFor(model => model.Designation)
 62                     @Html.ValidationMessageFor(model => model.Designation)
 63                 </td>
 64             </tr>
 65         </table>
 66     </div>
 67     <div class="row">
 68         <div>Access Rights</div> 
 69         <table class="table table-striped table-bordered table-hover" id="AccessRights">
 70             <thead>
 71                 <tr> 
 72                     <th>Delete</th>                 
 73                     <th>Schema</th>
 74                     <th>Role</th>
 75                 </tr>
 76             </thead>                    
 77         </table>    
 78         <div>
 79             <input id="AddAccess" type="button" value="Add" onclick="keleyidialog();"  name="action" />
 80             <input id="DelAccess" type="button" value="Delete"  name="action" onclick="Del();"/>
 81         </div>
 82     </div>
 83     <div class="text-center">
 84         <input id="AddUser" type="submit" value="Add User" name="action" />
 85         <input id="btnClear" type="button" value="Cancel" onclick="formReset();" name="action" />        
 86     </div>        
 87 }
 88 
 89 <div id="table" style="display:none">
 90     @using (Html.BeginForm("../UserProfileRoleSchemeViews/Add", "Add", FormMethod.Post, new { id = "add-form", @role = "form" }))
 91     {
 92         
 93         @Html.HiddenFor(model => model.USERS_IN_ROLES_ID)
 94         @Html.HiddenFor(model => model.USER_ID)       
 95         <table id="example" class="table table-striped table-bordered table-hover">
 96             
 97             <tr>
 98                 <td>Scheme</td>
 99                 <td>
100                     @Html.DropDownListFor(model => model.SchemeId, (SelectList)ViewData[Constants.AdminMoudle.Schemalist], Constants.AdminMoudle.ListIndex)
101                     @Html.ValidationMessageFor(model => model.SchemeId)
102                 </td>
103             </tr>
104             <tr>
105                 <td>Role</td>
106                 <td>                    
107                     @Html.DropDownListFor(model => model.RoleId, (SelectList)ViewData[Constants.AdminMoudle.Rolelist])
108                     @Html.ValidationMessageFor(model => model.RoleId)
109                 </td>
110             </tr>
111         </table>
112         <div class="text-center">
113             <input id="AddRole" type="submit" value="Add"  name="btnaction" />
114         </div>
115     }
116 </div>
117 <script type="text/javascript">
118 function formReset()
119 {
120     $("#ADID").val("");
121     $("#NAME").val("");
122     $("#Email").val("");
123     $("#ContractNumber").val("");
124     $("#Agencylist").val("");
125     $("#Designation").val("");
126     $("#Schemalist").val("");   
127 }
128 
129 </script>
130 
131 @section Scripts {
132 <script type="text/javascript">
133 
134     $(document).ready(function () {
135 
136         var adminGrid = $("#AccessRights").DataTable({
137             "sAjaxSource": "/UserProfileRoleSchemeViews/Get",
138             "sScrollX": "100%",
139             "sScrollXInner": "100%",
140             "bScrollCollapse": true,            
141             "aoColumnDefs": [
142                 {
143                     "render": function (data, type, full) {                        
144                         return <input type="checkbox" id="CheckRole" name="CheckSelect" value=" + full.RoleId + & + full.SchemeId + "/>;
145                     },
146                     "targets": 0
147                 },
148             ],
149             "aoColumns": [
150                     { "mData": null },
151                     { "mData": "SchemeName" },
152                     { "mData": "RoleName" }],
153         });        
154         var formOptions = {
155             success: function (responseText, statusText, xhr, $form) {
156 
157                 if (responseText == "OK") {
158                     adminGrid.ajax.reload();
159                 }
160             },           
161             dataType: "json"
162         };
163 
164         $("#add-form").ajaxForm(formOptions);              
165     });
166 
167     function keleyidialog() {
168         $(#SchemeId).val("");
169         $("#table").dialog(
170             {
171                 title: "Add Role And Scheme",
172                 resizable: false,
173                 height: 240,
174                 width: 400,
175                 modal: true,                
176             }
177             );     
178     }
179    
180 
181     function Del() {
182         //var SchemeIdAndRoleId = $(‘input:checkbox:checked‘).val();
183         //var s = $(‘input:checkbox:checked‘).val();
184         //alert(s);               
185         var SchemeIdAndRoleId = "";
186         $("[name=‘CheckSelect‘]:checked").each(function (index, element) {
187 
188             SchemeIdAndRoleId += $("[name=‘CheckSelect‘]:checked").val() + ",";
189 
190         });        
191         if (SchemeIdAndRoleId == "") {
192             alert("Pls Choose one or more to Delete");
193         }
194         else if (SchemeIdAndRoleId == "null&0,")
195         {
196             alert("The Sample Records not allow delete");
197             $("#AccessRights").DataTable().ajax.reload();
198         }
199         else {
200             $.ajax({
201                 type: POST,
202                 url: "/UserProfileRoleSchemeViews/Delete",
203                 dataType: "json",
204                 data: { SchemeIdAndRoleId: SchemeIdAndRoleId },
205                 success: function (responseText, statusText, xhr, $form) {
206 
207                     if (responseText == "OK") {
208                         $("#AccessRights").DataTable().ajax.reload();
209                     }                   
210                 },
211                 dataType: "json"
212             });
213         }
214     }
215 
216     $("#AddRole").click(
217         function () {            
218             $(#table).dialog(close);
219             var SchemeId = $(#SchemeId).val();
220             var RoleId = $(#RoleId).val();
221             $.ajax({
222                 type: POST,
223                 url: "/UserProfileRoleSchemeViews/Add",
224                 dataType: "json",
225                 data: {
226                     SchemeId: SchemeId,
227                     RoleId:RoleId
228                 },
229                 success: function (responseText, statusText, xhr, $form) {
230 
231                     if (responseText == "No") {
232                         alert("The records have Exist,Please do not add a duplicate");
233                         $("#AccessRights").DataTable().ajax.reload();
234                     }
235                     else if (responseText == "OK") {
236                         $("#AccessRights").DataTable().ajax.reload();
237                     }
238                 },
239                 dataType: "json"
240             });
241         });
242     </script>
243     @Scripts.Render("~/bundles/jqueryval")
244 }
Add View

 

MVC JQuery Table Ajax 的一些扩展和应用

标签:des   style   blog   http   color   io   os   java   ar   

原文地址:http://www.cnblogs.com/ganguoyu/p/3990574.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!