Build a Complete App with ASP.Net, C#, SQL Lite – Part 7

This is part 7 of our complete application with ASP.Net, C# and SQL Lite. In this part, we would be working with images.

• First we would add some images to the home page.
• Then we add some image thumbnails to the tables

We would cover the following in this tutorial:

1. Adding the Home Images
2. Adding Patient Thumbnail Images
3. Add a Modal Popup
4. Pass Clicked Image to the Modal

 

1. Adding the Home Images

Step 1 – First move the two home page images (HomePix.jpg and AppointmentPix.jpg). Move them into the wwwroot/assets/img directory.

Step 2 – In the index page page, replicate the row that contains the charts.

Step 3 – Remove the canvas sections. So we’ll have the card-body section left. Here, we’ll place the images

Step 5 – You can now place the images using the markup shown below:

<div class="card-body">
    <img width="100%" src="~/assets/img/HomePix.jpg" />
</div>

 

2. Adding the Patients Thumbnails

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.

Step 1 – 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.

Step 2 – Open the Patients index view.

Step 3 – First adjust the code to display the Country Name instead of the CountryId.

Step 4 – Add one more column header to the before the first column of the table

Step 5 – Add one more column to the body section like so:

<td>
    <img width="40" height="40" src="/assets/img/user.jpg"/>
</td>

You can now launch the application and test the code

 

3. Add a Popup Modal

We want to be able to click on the image and have it displayed in a modal popup.

Step 1 – Go to the Bootstrap website and copy a modal template

Step 2 – 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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Test the modal and make sure it works. Once you’re sure the modal works, you can delete the column.

Step 3 – 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). The anchor tag has an id attribute of “photoButton”.

Step 4 – 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 attribute of empty string “”.  See below:

<div class="modal-body">
    <img id="patientPhoto" src="" width="95%" height="95%" />
</div>

 

Step 5 – Download JQuery from here and add it to js folder in the wwwroot.

Step 6 – In your index.cshtml patient list file add the following line:

<script src="~/js/jquery-3.6.0.min.js"></script>
<script>
    $('.table #photoButton').on('click', function (event) {
        event.preventDefault();
        var href = $(this).attr('href');
        $('#photoModal #patientPhoto').attr('src', href);
        $('#photoModal').modal('show');
    });
</script>

 

At this point, launch the application and test it to make sure it works.

 

4. Pass Selected Photo to Modal

First, we have to display the photos based on the particular records that is showing. There are a number of ways to do this, but we’ll do it the easy way.

First, we would name the images same as the PatientId. So we have images: 1.jpg, 2.jpg, 3.jpg and so on.

Then for each record, we would append the directory path to the filename like so:

<tbody>
    @foreach (var item in Model)
    {
        var image = "/assets/img/patients/" + item.PatientId + ".jpg";

        <tr>
            <td>
                <a id="photoButton" href="@image">
                    <img width="40" height="40" src="@image" />
                </a>
            </td>
...
...

 

So  when you click on the link, the javascript code executes. This script takes the href attribute of the anchor tag (which is the same as the src attribute of the img tag) and uses it to set the src attribute of the patientPhoto in the modal.

So now, if you get everything right, launch the application and test it out!

If you have challenges, please watch the video, leave me a comment or connect with me.