如何在 ASP .NET Core MVC Web 应用程序中制作 .cshtml 弹出窗口

如何解决如何在 ASP .NET Core MVC Web 应用程序中制作 .cshtml 弹出窗口

我是编程新手，我正在尝试制作 ASP .NET Core MVC Web 应用程序。在那里我必须上传用户个人资料图片。为此，我应该制作一个像 Facebook 一样的弹出窗口。（例如，当用户点击相机图标而不是转到另一个页面时，必须出现一个上传图像的弹出窗口。）

以下是 Profile.cshtml 页面中重定向到 UploadUserImage.cshtml 页面的行，该页面应显示为弹出窗口。（那个文件很大，所以我想只发布这一行）

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

以下是 .cshtml 文件，点击上面的链接后必须显示为弹出窗口。

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>

我知道前端可以使用 jQuery 来显示弹出窗口。但我不知道如何应用它。请问有人可以告诉我怎么做吗？

非常感谢您抽出宝贵时间。

解决方法

- 为您的 UploadPage 创建 PartialView
- 搜索并安装 Magnific-Popup 软件包
- 创建一个函数来调用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>

也许你不使用 idUserProfile

- 在控制器类中调用局部视图

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

在Html中调用函数

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