Razor 如何在ASP.NET核心MVC web应用程序中创建.cshtml弹出窗口

我是一个编程新手&我正在尝试制作一个ASP.NET核心mvcweb应用程序。在那里，我必须上传一个用户配置文件图像。要做到这一点，我应该像在Facebook上一样创建一个弹出窗口。（例如，当用户单击相机图标而不是转到另一个页面时，必须出现一个上传图像的弹出窗口。）

下面是

Profile.cshtml

页面中的一行，该行重定向到应显示为弹出窗口的

UploadUserImage.cshtml

页面。（该文件非常大，这就是为什么我想只发布这一行）

为上传页面创建一个PartialView




搜索和安装软件包




创建一个函数来调用Html中的弹出窗口




函数ShowPopup（idUserProfile）{
$.ajax({
键入：“POST”，
url:“@url.Action（“方法”、“控制器”）”，
数据：{idUserProfile}，
成功：功能（响应）{
$.magnificPopup.open({
项目：{
src：响应
},
键入：“内联”，
莫代尔：是的，
closeOnBgClick:false，
焦点：“#btnDismiss”
});
},
错误：函数（xhr、ajaxOptions、thrownError）{
}
});
}
你的意思是，我应该安装名为Magnific.Popup的NuGet软件包？是的，或者在Magnific Popup网站上下载这些软件包，然后在脚本文件夹中导入到你的应用程序中。是的，我知道了，谢谢。很抱歉，你的答案不起作用。我按照步骤走，但似乎什么也没发生。在控制台中，它给出了错误：我已将错误图像附加到问题。你能帮我解决这个问题吗？谢谢。请尝试导入Ajax不引人注目的库，并确保已在HTML中导入库
 <a asp-action="UploadUserImage" asp-controller="UserImages"><i class="fas fa-camera camera-icon-profile"></i></a>

@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>