Post
Ask Question
sonal malhotra

sonal malhotra

  • NA
  • 410
  • 48.8k

upload image n Dispaly it using webgrid in mvc

Feb 19 2019 2:12 AM
hello everyone ,
 
i created profile image with name n location data. successfuly and it run in show image page but it shown error
 
how to do this code
 
show image in razor page
 
  1. @model IEnumerable<Webgridexample.Models.employee1>  
  2. @{  
  3. ViewBag.Title = "Show Images";  
  4. Layout = "~/Views/Shared/_Layout.cshtml";  
  5. }  
  6. <!DOCTYPE html>  
  7. <html>  
  8. <head>  
  9. <meta name="viewport" content="width=device-width" />  
  10. <title>Show Images</title>  
  11. @*  
  12. <link href="~/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />*@  
  13. @*<script src="~/Scripts/jquery-1.9.1.js"></script>*@  
  14. <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  
  15. <script src="~/Scripts/jquery-1.10.2.js"></script>  
  16. <script src="~/Scripts/bootstrap.min.js"></script>  
  17. <script src="~/Scripts/bootstrap.js"></script>  
  18. @*<script src="~/bootstrap-3.3.6-dist/js/bootstrap.js"></script>*@  
  19. @*<script src="~/Scripts/bootstrap.js"></script>*@  
  20. <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />  
  21. @*<script src="~/Scripts/jquery-1.8.2.js"></script>*@  
  22. <script src="~/Scripts/jquery-ui-1.8.24.js"></script>  
  23. <script type="text/javascript">  
  24. function ZoomImage(image) {  
  25. debugger;  
  26. document.getElementById("main").src = image;  
  27. $("#popupdiv").dialog({  
  28. width: 600,  
  29. height: 600,  
  30. modal: true,  
  31. buttons: {  
  32. Close: function () {  
  33. $(this).dialog('close');  
  34. }  
  35. }  
  36. });  
  37. }  
  38. </script>  
  39. </head>  
  40. <body>  
  41. <div style="margin-left: 50px; margin-right: 50px; margin-top: 50px;">  
  42. @{  
  43. var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);  
  44. grid.Pager(WebGridPagerModes.All);  
  45. }  
  46. @grid.GetHtml(  
  47. htmlAttributes: new { id = "gridMapping" },  
  48. tableStyle: "table table-bordered",  
  49. headerStyle: "info",  
  50. footerStyle: "info",  
  51. alternatingRowStyle: "webgrid-alternating-row",  
  52. selectedRowStyle: "webgrid-selected-row",  
  53. rowStyle: "gridrow",  
  54. columns: grid.Columns  
  55. (  
  56. grid.Column("imagename", "imagename", null, style: "imagename"),  
  57. grid.Column(header: "Images", format:  
  58. @<text>  
  59. <img id="imagebtn"  
  60. onclick="ZoomImage('data:image/jpg;base64,@(Convert.ToBase64String(item.image))')"  
  61. src="data:image/jpg;base64,@(Convert.ToBase64String(item.image))"  
  62. width="70px"  
  63. height="70px"  
  64. alt="@item.imagename" />  
  65. </text>, style: "Imagepix"),  
  66. grid.Column("ename","E name"),  
  67. grid.Column("designation", "Designation"),  
  68. grid.Column("location", "location"),  
  69. grid.Column("salary1", "salary1"))  
  70. )  
  71. </div>  
  72. <div id="popupdiv" style="display: none">  
  73. <img id="main" src="images/main.jpg">  
  74. </div>  
  75. </body>  
  76. </html>  
Server Error in '/' Application.
The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[<>f__AnonymousType6`6[System.String,System.Byte[],System.String,System.String,System.String,System.String]]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[Webgridexample.Models.employee1]'.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.InvalidOperationException: The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[<>f__AnonymousType6`6[System.String,System.Byte[],System.String,System.String,System.String,System.String]]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[Webgridexample.Models.employee1]'.
Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Answers (1)