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

编程问答 2022-04-30

问题描述

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

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

enter image description here

解决方法

    • 为您的 UploadPage 创建 PartialView
    • 创建一个函数来调用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>
popuppopupwindowpopupwindowrazorrazorrazor