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

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

Create a PartialView to your UploadPage
Search and install Magnific-Popup packages
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
In the Controller class call the partial View
public ActionResult Upload()
{
return PartialView("_UploadPage");
}
In Html to call the Function
<button class="btn btn-primary" onclick="ShowPopup()">Show Upload</button>