Post
Ask Question
sangeetha k

sangeetha k

  • NA
  • 207
  • 49.2k

search functionaliity in mvc , its fetching but not binding

Apr 23 2018 5:32 AM
#dal
  1. public List<tblEmployee> SearchRecord(string searchBy, string txtSearch)  
  2. {  
  3. try  
  4. {  
  5. EmployeeEntity emp = new EmployeeEntity();  
  6. using (AdventureWorksEntities empDbentity = new AdventureWorksEntities())  
  7. {  
  8. if (searchBy =="Empid")  
  9. {  
  10. var a = int.Parse(txtSearch);  
  11. return empDbentity.tblEmployees.Where(x => x.Empid == a || txtSearch == null).ToList();  
  12. }  
  13. else{  
  14. //var search = Convert.ToInt32(txtSearch);  
  15. return empDbentity.tblEmployees.Where(x => x.Empname.StartsWith(txtSearch) || txtSearch == null).ToList();  
  16. }  
  17. }  
  18. }  
  19. catch (Exception ex)  
  20. {  
  21. Log.WriteError("BorrowerImageGridView.EmployeeDataAcess.searchRecord()", ex);  
  22. throw new Exception(TUtil.GetMethodExceptionContext(searchBy, txtSearch), ex);  
  23. }  
#controller
  1. [HttpGet]  
  2. public ActionResult SearchRecord(string searchBy, string txtSearch)  
  3. {  
  4. List<tblEmployee> emp = empservice.SearchRecord(searchBy, txtSearch);  
  5. return View("EmployeeDetails", emp);  
  6. }  
# my view
  1. @using PagedList;  
  2. @using PagedList.Mvc;  
  3. @model IPagedList<EmployeeEntityLayer.EmployeeEntity>  
  4. @{  
  5. Layout = null;  
  6. ViewBag.Title = "EmployeeDetails";  
  7. }  
  8. <!DOCTYPE html>  
  9. <html>  
  10. <head>  
  11. <meta name="viewport" content="width=device-width" />  
  12. <title>EmployeeForm</title>  
  13. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  15. <script src="http://code.jquery.com/jquery-3.3.1..min.js"></script>  
  16. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  17. <script src="~/Scripts/jquery-3.3.1.js"></script>  
  18. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>  
  19. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />  
  20. <style>  
  21. .Delete {  
  22. color: green;  
  23. }  
  24. .table td {  
  25. width: 25%;  
  26. }  
  27. .edit {  
  28. color: blue;  
  29. }  
  30. </style>  
  31. </head>  
  32. <body>  
  33. <div class="panel panel-info margin">  
  34. <div class="panel-heading"><b>Registered Employess</b></div>  
  35. <div class="panel-body">  
  36. <div >  
  37. <div class="input-group">  
  38. <b>Search By:</b>  
  39. @Html.RadioButton("SearchBy", "Empname") <text>Empname</text>  
  40. @Html.RadioButton("SearchBy", "Empid") <text>Empid</text>  
  41. @Html.TextBox("txtSearch", "", new { @id = "txtSearch", @class = "form-control", style = " margin-bottom: 25px ;align-content:center; font-family:Arial, FontAwesome", placeholder = "Search" })  
  42. @*<input type="text" classEmpl="form-control" id="txtSearch" placeholder="Search for...">*@  
  43. <span class="input-group-btn">  
  44. <button id="btnSearch"class="btn btn-secondary" style="margin-bottom:4px;"type="submit"><i class="glyphicon glyphicon-search"></i></button>  
  45. </span>  
  46. </div>  
  47. @*<input id="txtSearch" style=" margin-bottom: 25px ;font-family:Arial, FontAwesome" type="text" placeholder=" ? Search " name=" search">  
  48. <button type="button" class="btn btn-info" style=" margin-bottom: 25px">  
  49. <span class=" glyphicon glyphicon-search">  
  50. </span> Search  
  51. </button>*@  
  52. </div>  
  53. @*<div class="input-group">  
  54. <input style=" margin-bottom: 25px" type="text" class="form-control" placeholder="Search" />  
  55. <div class="input-group-btn">  
  56. <i class="glyphicon glyphicon-search"></i>  
  57. </div>  
  58. </div>*@  
  59. @using (@Html.BeginForm("MultiDeleteemployee", "Employee", FormMethod.Post))  
  60. {  
  61. <div class="col-sm-12 container">  
  62. <div>  
  63. <table id="EmpTable" class="table table-striped table-responsive table-bordered" style="width:100%">  
  64. <thead>  
  65. <tr>  
  66. <td></td>  
  67. <th>EmpLoyee ID</th>  
  68. <th>Employee Name</th>  
  69. <th>Designation</th>  
  70. <th>Employee Image</th>  
  71. <th>Salary</th>  
  72. <th>Email</th>  
  73. <th>Department</th>  
  74. <th></th>  
  75. </tr>  
  76. </thead>  
  77. <tbody id="myTableBody">  
  78. @foreach (var item in Model)  
  79. {  
  80. <tr>  
  81. <td>@Html.CheckBox("chkDelteBox", new { @id = "chkDeleteBox", data_id = "@item.Empid" })</td>  
  82. <td scope="row"> @Html.DisplayFor(model => item.Empid)</td>  
  83. <td> @Html.DisplayFor(model => item.Empname)</td>  
  84. <td> @Html.DisplayFor(model => item.Designation)</td>  
  85. @*<td>  
  86. <img src="@Url.Content(@item.Empimage)" alt />  
  87. </td>*@  
  88. <td>  
  89. @{  
  90. var base64 = Convert.ToBase64String(item.ImageData);  
  91. var imagesrc = string.Format("data:image/jpeg;base64,{0}", base64);  
  92. <img src='@imagesrc' style="max-width:100px;max-height:100px;" />  
  93. }  
  94. </td>  
  95. <td>@Html.DisplayFor(model => item.Salary, new { @class = "edit" })</td>  
  96. <td> @Html.DisplayFor(model => item.Email)</td>  
  97. <td>@Html.DisplayFor(model => item.Department)</td>  
  98. <td>  
  99. <a href="#" data-id="@item.Empid" id="btnDelete" class="Delete" role="button">  
  100. <span class="glyphicon glyphicon-trash"></span>  
  101. </a>  
  102. </td>  
  103. <td>  
  104. <a href="#" data-id="@item.Empid" id="btnEdit" class="edit" role="button" data-toggle="modal" data-target="#EditModals">  
  105. <span class="glyphicon glyphicon-edit"></span>  
  106. </a>  
  107. </td>  
  108. </tr>  
  109. }  
  110. </tbody>  
  111. </table>  
  112. @Html.PagedListPager(Model, page => Url.Action("EmployeeDetails", new { page }))  
  113. <input type="submit" id="btnback" value=" GetBack" class="btn btn-default" />  
  114. <input type="button" id="btnMultiDelete" value=" DeleteRecords" class="btn btn-default" />  
  115. </div>  
  116. </div>  
  117. }  
  118. </div>  
  119. </div>@using (Html.BeginForm("UpdateEmployee", "Employee", FormMethod.Post, new { enctype = "multipart/form-data", @class = "form-horizontal", role = "form" }))  
  120. {  
  121. <div class="modal fade" id="EditModals" role="dialog">  
  122. <div class="modal-dialog" style="padding-right: 16px; margin-right: 200px; margin-right: 74px; left: 148px; margin-left: 127px; padding-left: 11px; ">  
  123. <div class="modal-content">  
  124. <div class="modal-header">  
  125. <button class="close" aria-hidden="true" type="button" data-dismiss="modal">X</button>  
  126. <h4 class="modal-title">Edit Employee Details</h4>  
  127. </div>  
  128. <div class="modal-body">  
  129. <div style="text-align:center">  
  130. <span id="errmsg" style="color:red;"></span>  
  131. </div>  
  132. <div class="form-group">  
  133. <div class="col-sm-12">  
  134. EmpLoyee ID:@Html.TextBox("txtEmpId", "", new { @id = "txtEmpId", @readonly = "readonly", @class = "form-control", style = "align-content:center" })  
  135. </div>  
  136. </div>  
  137. <div class="form-group">  
  138. <div class="col-sm-12">  
  139. Employee Name: @Html.TextBox("txtEmpName", "", new { @id = "txtEmpName", @class = "form-control", style = "align-content:center" })  
  140. </div>  
  141. </div>  
  142. <div class="form-group">  
  143. <div class="col-sm-12">  
  144. Designation: @Html.TextBox("txtDesignation", "", new { @id = "txtDesignation", @class = "form-control", style = "align-content:center" })  
  145. </div>  
  146. </div>  
  147. <div class="form-group">  
  148. <div class="col-sm-12">  
  149. <div>  
  150. <img id="user_img"  
  151. height="100"  
  152. width="90"  
  153. style="border:solid" align="center" />  
  154. </div>  
  155. Employee Image: @Html.TextBox("txtEmpimage", " ", new { type = "file", @id = "txtEmpimage", @class = "form-control", @onchange = "show(this)" })  
  156. </div>  
  157. </div>  
  158. <div class="form-group">  
  159. <div class="col-sm-12">  
  160. Salary: @Html.TextBox("txtSalary", " ", new { @id = "txtSalary", @class = "form-control" })  
  161. </div>  
  162. </div>  
  163. <div class="form-group">  
  164. <div class="col-sm-12">  
  165. Email: @Html.TextBox("txtEmail", " ", new { @id = "txtEmail", @class = "form-control" })  
  166. </div>  
  167. </div>  
  168. <div class="form-group">  
  169. <div class="col-sm-12">  
  170. Department: @Html.TextBox("txtDepartment", " ", new { @id = "txtDepartment", @class = "form-control" })  
  171. </div>  
  172. </div>  
  173. </div>  
  174. <div class="modal-footer">  
  175. <div class="form-group">  
  176. <button type="submit" id="btnUpdate" class="btn btn-success" data-toggle="modal" data-target="#myModal">UPDATE</button>  
  177. <button type="button" id="btnCancel" class="btn btn-danger" data-dismiss="modal">Cancel</button>  
  178. </div>  
  179. </div>  
  180. </div>  
  181. </div>  
  182. </div>  
  183. }  
  184. <div class="modal fade" id="myModal" role="dialog">  
  185. <div class="modal-dialog">  
  186. <!-- Modal content-->  
  187. <div class="modal-content">  
  188. <div class="modal-header">  
  189. <button type="button" class="close" data-dismiss="modal">×</button>  
  190. </div>  
  191. <div class="modal-body">  
  192. <p>Updation Successfull..</p>  
  193. </div>  
  194. <div class="modal-footer">  
  195. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
  196. <button type="submit" id="btnOk" class="btn btn-success">ok</button>  
  197. </div>  
  198. </div>  
  199. </div>  
  200. </div>  
  201. @section scripts{  
  202. <script src="https://www.appelsiini.net/download/jquery.jeditable.js"></script>  
  203. <script>  
  204. $(document.ready(function () {  
  205. $("#EmpTable").on('click', '.Delete', (function () {  
  206. var empID = $(this).attr('data-id');  
  207. var oldValue = '';  
  208. $('.edit').editable('/Employee/UpdateOrEditEmployee?id=' + empID, {  
  209. cssclass: 'jeditForm',  
  210. tooltip: 'Click to edit me....',  
  211. width: 'none',  
  212. height: 'none',  
  213. onsubmit: function (settings, original) {  
  214. oldValue = original.revert;  
  215. },  
  216. submitdata: function () {  
  217. return {  
  218. id: $(this).data('Empid'),  
  219. PropertyName: $(this).data('propertyname')  
  220. }  
  221. },  
  222. callback: function (value, settings) {  
  223. var jsonData = $.parseJSON(value);  
  224. if (jsonData.status) {  
  225. $(this).text(jsonData.value);  
  226. }  
  227. else {  
  228. $(this).text(oldValue);  
  229. }  
  230. }  
  231. })  
  232. }))  
  233. }))  
  234. </script>  
  235. }  
  236. <script>  
  237. //showing the image uploaded from the file uploader  
  238. function show(input) {  
  239. if (input.files && input.files[0]) {  
  240. var filerdr = new FileReader();  
  241. filerdr.onload = FileReader();  
  242. filerdr.onload = function (e) {  
  243. $('#user_img').attr('src', e.target.result);  
  244. }  
  245. filerdr.readAsDataURL(input.files[0]);  
  246. }  
  247. }  
  248. $(document).ready(function () {  
  249. // deleteing a record using the icon click.  
  250. $("#EmpTable").on('click', '.Delete', (function () {  
  251. var empID = $(this).attr('data-id');  
  252. window.location.href = "/Employee/DeleteEmployee?empid=" + empID;  
  253. }));  
  254. //deleting multiple records  
  255. //$("#btnMultiDelete").click(function () {  
  256. // debugger;  
  257. // var item ;  
  258. // var empID = $(this).attr('data-id');  
  259. // window.location.href = "/Employee/MultiDeleteemployee?empid=" + empID;  
  260. //});  
  261. btnDelete  
  262. $("#btnUpdate").click(function () {  
  263. window.location.href = "/Employee/UpdateEmployee";  
  264. });  
  265. //$("#btnSearch").click(function () {  
  266. // var selectedvalue = $('input= searchBy]:checked', '#myform').val();  
  267. // var typedvalue = $("#txtSearch").val();  
  268. // window.location.href = "/Employee/SearchRecord?searchBy=" + selectedvalue & " txtSearch=" + typedvalue;  
  269. //});  
  270. $("#btnback").click(function () {  
  271. window.location.href = '@Url.Action("Employee", "Employee")';  
  272. });  
  273. $(document).on('click', '#btnMultiDelete', function () {  
  274. debugger;  
  275. var empid = $('#chkDeleteBox').attr('data-id');  
  276. $.ajax({  
  277. type: 'POST',  
  278. url: '@Url.Action("MultiDeleteemployee", "Employee")',  
  279. data: "{Empid:'" + empid + "'}",  
  280. contentType: "application/json;charset=utf-8",  
  281. datatype: "json",  
  282. sucess: function (data) {  
  283. alert(data);  
  284. },  
  285. error: function (data) {  
  286. alert('error');  
  287. }  
  288. });  
  289. });  
  290. // ajax call for editing a record.  
  291. $(document).on('click', '#btnEdit', function () {  
  292. debugger;  
  293. var empID = $(this).attr('data-id');  
  294. $.ajax({  
  295. type: 'POST',  
  296. url: '@Url.Action("EditEmployee","Employee")',  
  297. data: "{Empid:'" + empID + "'}",  
  298. contentType: "application/json;charset=utf-8",  
  299. dataType: "json",  
  300. success: function (data) {  
  301. if (data == 0 || data == null) {  
  302. debugger;  
  303. data.length == 0;  
  304. //clear();  
  305. $('#txtEmpId').val();  
  306. $('#txtEmpName').val();  
  307. $('#txtDesignation').val();  
  308. $('#txtEmpimage').val();  
  309. $('#txtSalary').val();  
  310. $('#txtEmail').val();  
  311. $('#txtDepartment').val();  
  312. }  
  313. else if (data.length != 0 && data != 0) {  
  314. debugger;  
  315. var Empid = data[0].Empid;  
  316. var Name = data[0].Empname;  
  317. var Designation = data[0].Designation;  
  318. var Empimage = data[0].Empimage;  
  319. var Employeesalary = data[0].Salary;  
  320. var Department = data[0].Department;  
  321. var Emailid = data[0].Email;  
  322. if (Empid != null) {  
  323. $('#txtEmpId').val(Empid);  
  324. }  
  325. if (Name != null) {  
  326. $('#txtEmpName').val(Name);  
  327. }  
  328. if (Designation != null) {  
  329. $('#txtDesignation').val(Designation);  
  330. }  
  331. if (Empimage != null) {  
  332. $('#txtEmpimage').val(Empimage);  
  333. }  
  334. if (Employeesalary != null) {  
  335. $('#txtSalary').val(Employeesalary);  
  336. }  
  337. if (Department != null) {  
  338. $('#txtDepartment').val(Department);  
  339. }  
  340. if (Emailid != null) {  
  341. $('#txtEmail').val(Emailid)  
  342. }  
  343. }  
  344. //$('#EditModals').modal('show');  
  345. },  
  346. failure: function (data) {  
  347. alert("Failed");  
  348. },  
  349. error: function (data) {  
  350. alert("error");  
  351. }  
  352. });  
  353. });  
  354. ///Searching a Record In client Side  
  355. // var $rows = $("#myTableBody tr");  
  356. // $('#txtSearch').keyup(function () {  
  357. // var val = $.trim($(this).val()).replace(/ +/g, '').toLowerCase();  
  358. // $rows.show().filter(function () {  
  359. // var text = $(this).text().replace(/\s+/g, '').toLowerCase();  
  360. // return !~text.indexOf(val);  
  361. // }).hide();  
  362. // });  
  363. //});  
  364. $(document).on('click', '#btnSearch', function () {  
  365. debugger;  
  366. var selectedItem = $("input[name=SearchBy]:checked").val();  
  367. $.ajax({  
  368. url: '/Employee/SearchRecord',  
  369. data: { searchBy: selectedItem,txtSearch: $('#txtSearch').val() },  
  370. type: "get",  
  371. sucess: function (response) {  
  372. }  
  373. });  
  374.  this is my ajax call that is used to redirect to that controller method when clicked the search  button    
  375. });  
  376. });</script>  
  377. </body>  
  378. </html>  
someone kindly help me it is fetching me the data but its not changing the view .

Answers (6)