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

Question

我是编程新手，我正在尝试制作一个 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 来制作弹出窗口。但我不知道如何应用它。有人可以告诉我怎么做吗？

非常感谢您的宝贵时间。

Answer 1

1. • 为您的 UploadPage 创建一个 PartialView
2. • 搜索并安装Magnific-Popup 包
3. • 创建一个函数以在 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

4. • 在 Controller 类中调用局部视图

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

5. • 在 Html 中调用函数

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