How to make a .cshtml pop window in ASP .NET Core MVC web application

Question

I am a newbie to programming & I am trying to make a ASP .NET Core MVC web application. There I have to upload a user profile image. To do this I should make a pop up window like in Facebook. (As an example, when user clicked on camera icon instead of going to another page, a pop window to upload image has to be appeared.)

Following is the line in the Profile.cshtml page that redirects to the UploadUserImage.cshtml page that should appear as a popup window. (that file is very large that is why I thought to publish only this line)

 <a asp-action="UploadUserImage" asp-controller="UserImages"><i class="fas fa-camera camera-icon-profile"></i></a>

And following is the .cshtml file that has to be appear as popup upon clicking the above link.

UploadUserImage.cshtml

@model IEnumerable<WebApp.Models.User>

@{
    Layout = "/Views/Shared/_Profile.cshtml";
    ViewData["Title"] = "Upload your photo";
}
<div class="container">

    <div class="row">
        @using (Html.BeginForm("UploadProfilePicture", "UserImageUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">Upload your picture</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <input type="file" name="file" />
                            <input type="submit" class="btn btn-primary form-control" value="Save Photo" />
                        </div>
                    </div>
                </div>
            </div>
          }
       </div>
     }
   </div>
</div>

I got to know that by a front end jQuery can be used to make the popup window appear. but I do not know how to apply it. Can please somebody let me know how to do it?

Thank you very much for your time.

Answer 1

1. • Create a PartialView to your UploadPage
2. • Search and install Magnific-Popup packages
3. • Create a Function to call the Popup Window in the Html

    <script>
        
          function ShowPopup(idUserProfile) {
                    $.ajax({
                            type: 'POST',
            
                            url: "@Url.Action("Method", "Controller")",
            
                            data: { idUserProfile },
            
                            success: function (response) {
            
            
                                $.magnificPopup.open({
            
                                    items: {
            
                                        src: response
            
                                    },
            
                                    type: 'inline',
            
                                    modal: true,
            
                                    closeOnBgClick: false,
            
                                    focus: '#btnDismiss'
            
                                });
                            },
            
                            error: function (xhr, ajaxOptions, thrownError) {
            
                            }
            
                    });
                }
                </script>

maybe you don´t use the idUserProfile

4. • In the Controller class call the partial View

public ActionResult Upload()
{
    return PartialView("_UploadPage");
}

5. • In Html to call the Function

                        <button class="btn btn-primary" onclick="ShowPopup()">Show Upload</button>