布局 ASP.NET Razor 页面中的模态
Posted
技术标签:
【中文标题】布局 ASP.NET Razor 页面中的模态【英文标题】：Modal in Layout ASP.NET Razor Pages 【发布时间】：2021-10-25 06:47:28 【问题描述】：我尝试做一个小项目。
它是在带有 Razor 页面的 C# ASP.NET 中创建的，我想要一个注册模式，但我不知道如何实现它。
我发现很多东西都是用MVC做的，不知道有没有解决办法。
我尝试通过 MVC 来做，但是布局没有控制器，我不知道如何返回部分视图。
这是布局中的代码，只是一小部分。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- .... -->
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<header class="headerStyle">
<a class="nav-link li-modal" id="myModal" href="/" onclick="CreateUser(event)">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-person-plus-fill" viewBox="0 0 16 16">
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
<path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z" />
</svg>
Sign Up
</a>
</header>
<div class="bodymain">
<div id="modalplace">
</div>
<main role="main">
@RenderBody()
</main>
<div class="push"></div>
</div>
<footer class="footer">
<div class="myfooter">
test test teste testes tes
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
这是javascript代码。
function CreateUser(e)
e.preventDefault();
var url = appSettings + "/AddEditUserModal";
$.ajax(
type: "GET",
url: url,
success: function (data)
$("#modalplace").html(data);
$("#addUser").modal('show');
)
模态框的 HTML 在这里。
@model Models.AddEditUserModalM
<div class="model fade" id="addUser" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="addUserLabel">Add user account</h4>
<button type="button" class="close" data-dismiss="modal">
<span> X </span>
</button>
</div>
<div class="modal-body">
<form action="Create">
<div class="form-group">
<div class="col-md-6">
<label for="inputFirstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="inputFirstName">
</div>
<div class="col-md-6">
<label for="inputLastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="inputLastName">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-save="modal">
Save
</button>
</div>
</div>
</div>
</div>
我还有另一个类是这个模态的控制器。它包含这个方法。
[HttpGet]
public IActionResult Create()
AddEditUserModalM usr = new();
return PartialView("AddEditUserModal", usr);
我想我需要一个布局控制器，或者我不知道如何在 div id="modalplace" 中返回模态的代码。
感谢您的帮助。
【问题讨论】：
【参考方案1】：首先，您需要确保将部分视图AddEditUserModal 放在正确的位置，例如Shared/AddEditUserModal.cshtml。
那你需要改变
<div class="model fade" id="addUser" role="dialog" aria-labelledby="myModalLabel">
到
<div class="modal fade" id="addUser" role="dialog" aria-labelledby="myModalLabel">
在您的局部视图中。这样代码才能工作。
在我的演示中，我在本地使用的是 bootstrap.bundle.min.js，它的版本是 4.3.1。
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
结果：
【讨论】：
那里要改变什么？一样的 检查你的代码<div class="model fade" id="addUser" role="dialog" aria-labelledby="myModalLabel">类IDmodel而不是modal。
现在我有一个javascript错误“未捕获的ReferenceError：appSettings未定义”，这是什么。我尝试将“appSetting”更改为“appSettings”，但没有结果。
您能否更新您的代码以分享您在 js 中使用 appSettings 的位置？
在描述中，在“This is the javascript code”之后。以上是关于布局 ASP.NET Razor 页面中的模态的主要内容，如果未能解决你的问题，请参考以下文章
Asp .NET Core 2.2 Razor 页面布局和局部