如何在 ASP .NET Core MVC Web 应用程序中制作 .cshtml pop window

Question

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

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

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

下面是 .cshtml 文件，单击上面的 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>

我了解到前端 jQuery 可用于使弹出窗口 window 出现。但我不知道如何应用它。有人可以告诉我怎么做吗？

非常感谢您的宝贵时间。

Answer 1

- 为您的 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

- 在Controller中class调用局部View

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

在Html调用函数

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

如何在 ASP .NET Core MVC Web 应用程序中制作 .cshtml pop window

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

popup

popupwindow

razor