This is part 7 of our complete application with ASP.Net, C# and SQL Lite. In this part, we would be working with images.<\/p>\n
We would cover the following in this tutorial:<\/p>\n
<\/p>\n
Step 1<\/strong> – First move the two home page images (HomePix.jpg and AppointmentPix.jpg). Move them into the wwwroot\/assets\/img directory<\/em>.<\/p>\n Step 2<\/strong> – In the index page page, replicate the row that contains the charts.<\/p>\n Step 3<\/strong> – Remove the canvas sections. So we’ll have the card-body section left. Here, we’ll place the images<\/p>\n Step 5<\/strong> – You can now place the images using the markup shown below:<\/p>\n <\/p>\n Now we would add the patient’s image thumbnails to the Patients tables. So when this thumbnails is clicked, a popup of an enlarged images is displayed.<\/p>\n Step 1<\/strong> – Create a folder called patients inside the wwwroot\/assets\/img directory. Place your pictures there. Rename the images to 1.jpg, 2.jpg… etc. Also add a generic image ( I call it user.jpg) in the \/img directory.<\/p>\n Step 2<\/strong> – Open the Patients index view.<\/p>\n Step 3<\/strong> – First adjust the code to display the Country Name instead of the CountryId.<\/p>\n Step 4<\/strong> – Add one more column header to the before the first column of the table<\/p>\n Step 5<\/strong> – Add one more column to the body section like so:<\/p>\n You can now launch the application and test the code<\/p>\n <\/p>\n We want to be able to click on the image and have it displayed in a modal popup.<\/p>\n Step 1<\/strong> – Go to the Bootstrap website and copy a modal template<\/p>\n Step 2<\/strong> – Add one more column to your table and a button to open the modal. You may have to add the CDN links to your _Layout.cshtml file<\/p>\n Test the modal and make sure it works. Once you’re sure the modal works, you can delete the column.<\/span><\/p>\n Step 3<\/strong> – Now, surround the <img> with an anchor tag <a> and set the href attribute to same as the src attribute of the <img> (\/assets\/img\/user.jpg)<\/em>. The anchor tag has an id attribute of “photoButton”.<\/p>\n Step 4<\/strong> – In the body of the modal form, add an <img> tag with id of “patientPhoto” and width and height attributes of 95%. Also add src<\/em> attribute of empty string “”.\u00a0 See below:<\/p>\n <\/p>\n<div<\/span> class=<\/span>\"card-body\"<\/span>><\/span>\r\n <img<\/span> width=<\/span>\"100%\"<\/span> src=<\/span>\"~\/assets\/img\/HomePix.jpg\"<\/span> \/><\/span>\r\n<\/div><\/span>\r\n<\/pre>\n2. Adding the Patients Thumbnails<\/strong><\/h5>\n
<td><\/span>\r\n <img<\/span> width=<\/span>\"40\"<\/span> height=<\/span>\"40\"<\/span> src=<\/span>\"\/assets\/img\/user.jpg\"<\/span>\/><\/span>\r\n<\/td><\/span>\r\n<\/pre>\n3. Add a Popup Modal<\/strong><\/h5>\n
<link<\/span> rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css\"<\/span>><\/span>\r\n<script <\/span>src=<\/span>\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"<\/span>><\/script><\/span>\r\n<script <\/span>src=<\/span>\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/js\/bootstrap.min.js\"<\/span>><\/script><\/span>\r\n<\/pre>\n<div<\/span> class=<\/span>\"modal-body\"<\/span>><\/span>\r\n <img<\/span> id=<\/span>\"patientPhoto\"<\/span> src=<\/span>\"\"<\/span> width=<\/span>\"95%\"<\/span> height=<\/span>\"95%\"<\/span> \/><\/span>\r\n<\/div><\/span>\r\n<\/pre>\n