模型不会从剃刀页面中的 _Layout.cshtml 页面中的 _Footer.cshtml 部分视图绑定
Posted
技术标签:
【中文标题】模型不会从剃刀页面中的 _Layout.cshtml 页面中的 _Footer.cshtml 部分视图绑定【英文标题】：Model does not bind from _Footer.cshtml partial view in _Layout.cshtml page in razor pages 【发布时间】：2022-01-10 01:15:40 【问题描述】：我想在我的网页页脚实现一个时事通讯订阅功能。
widged 订阅必须在所有页面上可见。出于这个原因，我将它作为部分视图集成到我的 _Layout 中。
_Layout.cshtml 文件是：
<body id="top-header">
<!-- preloader start -->
<div class="preloader">
<div class="spin"></div>
</div>
<!-- preloader end -->
<!-- Header Start -->
@await Html.PartialAsync("_Header")
<!-- Header Close -->
@RenderBody()
<!-- Footer Start -->
<partial name="_Footer" model="new SubscribeNewsletterPageModel()" />
<!-- Footer Close -->
<!-- Page Scroll to Top -->
<a class="scroll-to-top js-scroll-trigger" href="#top-header">
<i class="fa fa-angle-up"></i>
</a>
<!-- Page Scroll to Top -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
<!-- Main Script -->
<script src="~/js/script.min.js"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
我创建了一个 SubscribeNewsletterPageModel.cs 类，其中包含我想用来发布订阅者电子邮件地址的模型：
public class SubscribeNewsletterPageModel : PageModel
[BindProperty]
public Newsletter newsletter get; set;
public async Task<IActionResult> OnPostSubscribeNewsletter()
TempData["returnurl"] = Request.Headers["Referer"].ToString();
var apiKey = "xxxxx";
string bearer = "Bearer " + apiKey;
string newsletterForJSON = newsletter.EMail;
// queryParams added only for testing
// in production newsletterForJSON must be used
string queryParams = @"
'contacts': [
'email': 'firstname.lastname@gmail.com',
]
";
JObject queryParamsJSON = JObject.Parse(queryParams);
var client = new RestClient("https://api.sendgrid.com/v3/marketing/contacts");
var request = new RestRequest(Method.PUT);
request.AddHeader("content-type", "application/json");
request.AddHeader("authorization", bearer);
request.AddParameter("application/json", queryParamsJSON, ParameterType.RequestBody);
IRestResponse response = await client.ExecuteAsync(request);
var error = response.Content;
return Redirect(TempData["returnurl"].ToString());
在我的_Footer.cshtml，这是一个剃刀视图，我从我的模型开始：
@model SubscribeNewsletterPageModel
然后我有我的表格：
<form asp-page-handler="SubscribeNewsletter" method="post">
<div class="position-relative">
<input asp-for="@Model.newsletter.EMail" class="form-control border-0 text-white newsletter-form" id="newsletter" name="newsletter" placeholder="Geben Sie Ihre E-Mail ein">
<button type="submit" class="btn btn-primary btn-subscribe">Register</button>
</div>
</form>
对于我从 SubscribeNewsletterPageModel 继承的 Index Razor 页面
public class IndexModel : SubscribeNewsletterPageModel
如果我开始调试 (F5) 并在我的 OnPostSubscribeNewsletter 方法中设置断点，我看到我的绑定属性为 EMPTY！
有什么想法吗？
【问题讨论】：
【参考方案1】：如果我开始调试 (F5) 并在我的 OnPostSubscribeNewsletter 方法，我看到我的绑定属性是 空！
你的意思是Email没有绑定成功？
在您的 _Footer.cshtml 中，您可以尝试将 name="newsletter" 更改为 name="newsletter.Email"强> 修改下面的代码
<input asp-for="@Model.newsletter.EMail" class="form-control border-0 text-white newsletter-form" id="newsletter" name="newsletter" placeholder="Geben Sie Ihre E-Mail ein">
进入
<input asp-for="@Model.newsletter.EMail" class="form-control border-0 text-white newsletter-form" id="newsletter" name="newsletter.Email" placeholder="Geben Sie Ihre E-Mail ein">
结果：
【讨论】：
嗨，郭青，是的，你是对的。我也看到了，havig setasp-for="@Model.newsletter.EMail" 实际上没有必要指定name="newsletter.Email"。 Tag-Helper asp-for 已经负责绑定。在我的代码中，输入 name="newsletter" 会产生问题，并且与 Tag-Helper 存在某种冲突。非常感谢您的帮助。
您好 Code4Fun，很高兴我的回答对您有所帮助。感谢您分享准确的解决方案。以上是关于模型不会从剃刀页面中的 _Layout.cshtml 页面中的 _Footer.cshtml 部分视图绑定的主要内容，如果未能解决你的问题，请参考以下文章
如何从剃刀视图提交具有动态列表的模型中的列表？ ASP.NET 核心 3.1