在post .netCore Razor页面上使用数据绑定模型
在post .netCore Razor页面上使用数据绑定模型
提问于 2019-12-14 00:17:57
我目前正在努力在post事件上绑定数据。
我使用EF内核将数据加载到对象，该对象用于加载和显示数据列表。
<div class="container">
<form method="post">
@if (Model.HeadersHasData)
{
// unnessary codes
@foreach (var item in Model.DisplayDataHeaders)
{
<div class="container mb-2">
<div class="row border-dark border-top">
<div class="col-sm-1">@Html.DisplayFor(c => item.ServiceAbbr)</div>
<div class="col-sm-4">@Html.DisplayFor(c => item.ServiceName)</div>
<div class="col-sm-3">@Html.DisplayFor(c => item.Qty) Hours/IPs/Locations</div>
<div class="col-sm-2">@Html.DisplayFor(c => item.Description) Duration</div>
</div>
@if (Model.DetailsHasData)
{
@foreach (var details in Model.DisplayDataDetails)
{
@if (details.ServiceId == item.ServicesId)
{
<div class="row">
<input type="hidden"
name="DisplayDataDetails.Index"
value="@details.TaskAssignedId" />
<input type="hidden"
name="DisplayDataDetails[@details.TaskAssignedId].TaskAssignedId"
value="@details.TaskAssignedId" />
<div class="col-sm-1">
<input type="checkbox"
name="DisplayDataDetails[@details.TaskAssignedId].TaskComplete"
value="@details.TaskComplete"
checked=@details.TaskComplete
disabled="@details.AccessGranted" />
</div>
<div class="col-sm-2">@details.TaskName</div>
<div class="col-sm-1">@details.TaskStartDate.ToShortDateString()</div>
<div class="col-sm-1">@details.TaskEndDate.ToShortDateString()</div>
<div class="col-sm-2">@details.TechLead</div>
<div class="col-sm-2">@details.Tech2</div>
<div class="col-sm">@details.Tech3</div>
</div>
}
}
}
</div>
}
}
<button type="submit">Test</button>
</form>
</div>这将正确显示数据和所有内容。
我现在正在处理当用户更改复选框(最终会尝试计算复选框的更改事件)当前使用时的交互。
我已经应用了bindProperty，但是每次通过DisplayDataDetails对象进行调试时，我都会得到一个计数为13的对象，这是预期的正确行数，但是所有的行都为空。
我对我错过的东西感到非常困惑，因为我在https://www.learnrazorpages.com/razor-pages/forms/checkboxes和https://www.learnrazorpages.com/razor-pages/model-binding上读到的所有东西
说明这应该是一个非常直接的操作。
[BindProperty]
public List<Detail> DisplayDataDetails { get; set; }
public async Task OnPostAsync(int? saleId)
{
var test = DisplayDataDetails;
//await LoadDataAsync(saleId);
var pause= "pause";
}任何助手或建议都将不胜感激。
更新1
我只想添加和更新，创建了一个单独的测试项目，并且能够遍历https://www.learnrazorpages.com/razor-pages/model-binding中的绑定复杂集合示例。我修改了视图以匹配我的用例，并且能够在使用数据绑定的post返回时使用复选框值来获取数据。
这是.cs的作品
namespace RazorPages
{
public class ModeContactTestModel : PageModel
{
[BindProperty]
public List<Contact> Contacts { get; set; } = new List<Contact>();
public string stubFirstName { get; private set; }
public string stubLastName { get; private set; }
public void OnGet()
{
LoadTestData();
}
private void LoadTestData()
{
//Contacts =
stubFirstName = "john";
stubLastName = "Doe";
for (var i = 0; i < 5; i++)
{
Contacts.Add(new Contact
{
ContactId = i,
FirstName = stubFirstName,
LastName = stubLastName,
Email = stubFirstName + "." + stubLastName + i + "Test@email.com",
Enabled = (i % 2 == 0) ? true : false
});
}
}
public void OnPost()
{
// process the contacts
}
}
public class Contact
{
public int ContactId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
public bool Enabled { get; set; }
}
}.cshtml
@page
@model RazorPages.ModeContactTestModel
@{
ViewData["Title"] = "ModelContactTest";
}
<h1>ModelContactTest</h1>
<form method="post">
<table class="table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Enabled</th>
</tr>
@foreach (var contact in Model.Contacts)
{
<tr>
<td>
<input type="hidden" name="Contacts.Index" value="@contact.ContactId" />
<input type="hidden" name="Contacts[@contact.ContactId].ContactId" value="@contact.ContactId" />
@*@contact.ContactId*@
</td>
<td><input name="Contacts[@contact.ContactId].FirstName" value="@contact.FirstName" /></td>
<td><input name="Contacts[@contact.ContactId].LastName" value="@contact.LastName" /></td>
<td><input name="Contacts[@contact.ContactId].Email" value="@contact.Email" /></td>
<td>
<input type="checkbox"
name="Contacts[@contact.ContactId].Enabled"
value="true"
checked="@contact.Enabled"/></td>
</tr>
}
</table>
<button>Update</button>
</form>我创建了一个新的演示razorPage来开始重写我从苹果开始的页面，以便在我的工作项目中应用……数据绑定似乎仍然不起作用
这并不会造成任何影响，因为我看不出有什么不同。
.cs
namespace Project.Web.Razor
{
public class ################: PageModel
{
[BindProperty]
public List<Detail> Details { get; set; }// = new List<Detail>(); //
public void OnGet()
{
LoadData();
}
private void LoadData()
{
Details = new List<Detail>();
for (var i = 0; i < 5; i++)
{
Details.Add(new Detail
{
AssignedId = i,
Name = "Dev Testing Task " + i,
Complete = (i % 2 == 0) ? true : false,
StartDate = Convert.ToDateTime("01/01/2019"),
EndDate = Convert.ToDateTime("01/01/2019"),
Lead = "John Doe",
//SaleId = i+1,
//ServiceId = i + 2,
AccessGranted = (i % 2 == 0) ? true : false,
});
}
}
public void OnPost()
{
// process the TaskDetails
}
}
public class Detail
{
public int AssignedId { get; internal set; }
public string Name { get; internal set; }
public bool Complete { get; internal set; }
public DateTime StartDate { get; internal set; }
public DateTime EndDate { get; internal set; }
public string Lead { get; internal set; }
public bool AccessGranted { get; internal set; }
}
}.cshtml
@page
@model ##########################
@{
ViewData["Title"] = "#####################";
}
<h1>EngagementingDetails</h1>
<form method="post">
<table class="table">
@foreach (var Detail in Model.Details)
{
<tr class="row">
<td>
<input type="hidden" name="Details.Index" value="@Detail.AssignedId" />
<input type="hidden" name="Details[@Detail.AssignedId].AssignedId" value="@Detail.AssignedId" />
</td>
<td class="col">
<input type="checkbox" name="Details[@Detail.AssignedId].Complete" value="true" checked="@Detail.Complete" disabled="@Detail.AccessGranted" />
</td>
<td class="col">
<input type="hidden" name="Details[@Detail.AssignedId].Name" value="@Detail.Name" />
@Detail.Name
</td>
<td class="col">
<input type="hidden"
name="Details[@Detail.AssignedId].StartDate"
value="@Detail.StartDate" />
@Detail.StartDate.ToShortDateString()
</td>
<td class="col">
<input type="hidden"
name="Details[@Detail.AssignedId].EndDate"
value="@Detail.EndDate" />
@Detail.EndDate.ToShortDateString()
</td>
<td class="col">
<input type="hidden"
name="Details[@Detail.AssignedId].TechLead"
value="@Detail.TechLead" />
@Detail.TechLead
</td>
</tr>
}
</table>
<button>Update</button>
</form>这真的让我很困惑，为什么我可以让它在一个项目中工作，但当单击更新和调试时，我得到的OnPost事件返回一个计数为5的列表，但在测试合同项目中，我正在工作的项目中的每个项都为空，它返回的列表计数为5，每个对象中的数据都是预期的。不知道我在做什么不同于这两者。
更新2
关于上一条评论，我做了以下修改以进行测试
.CSHTML
<form method="post">
<table class="table">
<tr class="row">
<th></th>
<th class="col">Complete</th>
<th class="col">Name</th>
@*<th class="col">StartDate</th>
<th class="col">EndDate</th>
<th class="col">Lead</th>*@
</tr>
@foreach (var detail in Model.Details)
{
<tr class="form-group row">
<td >
<input type="hidden"
name="Details.Index"
value="@detail.AssignedId" />
<input type="hidden"
name="Details[@detail.AssignedId].AssignedId"
value="@detail.AssignedId" />
</td>
<td class="col">
<input class="form-check-input"
type="checkbox"
name="Details[@detail.AssignedId].Complete"
value="true"
checked="@detail.Complete"
/>
</td>
<td class="col">
<input class="form-control form-control-sm"
name="Details[@detail.AssignedId].Name"
value="@detail.Name" readonly />
</td>
</tr>
}
</table>
<button>Update</button>
</form>.cs
[BindProperty]
public List<Detail> Details { get; set; } = new List<Detail>(); //
public void OnGet()
{
LoadData();
}
private void LoadData()
{
//Details = new List<Detail>();
for (var i = 0; i < 5; i++)
{
Details.Add(new Detail
{
AssignedId = i,
Name = "Dev Testing Task " + i,
Complete = (i % 2 == 0) ? true : false,
//StartDate = Convert.ToDateTime("01/01/2019").AddDays(i + 1).AddMonths((i)+1),
//EndDate = Convert.ToDateTime("01/01/2019").AddDays((i + 1) + 15).AddMonths((i) + 1),
//Lead = "John Doe",
//SaleId = i+1,
//ServiceId = i + 2,
//AccessGranted = (i % 2 == 0) ? false : true,
});
}
}
public void OnPost()
{
// process the TaskDetails
if(Details is null)
{
LoadData();
}else if( Details[0] == null)
{
Details = new List<Detail>();
LoadData();
}
else
{
Details = new List<Detail>();
LoadData();
}
}
}
public class Detail
{
public int AssignedId { get; internal set; }
public string Name { get; internal set; }
public bool Complete { get; internal set; }
//public DateTime StartDate { get; internal set; }
//public DateTime EndDate { get; internal set; }
//public string Lead { get; internal set; }
//public bool AccessGranted { get; internal set; }
}在调试期间，我仍然返回计数为5的onPost列表详细信息，但其中的每一项都为空。即。Details = null、Details1 = null等
刚刚运行了fiddler，它似乎正在发送对象
现在我想知道是不是bindproperty无法获取post事件上的数据。
回答 1
Stack Overflow用户
发布于 2019-12-18 05:35:37
我让它起作用了
我最终以合同测试为模板，完全从头开始重写它。在每次重大更改后测试绑定。我向我的对象添加了一个IndexId列，这样我就可以显式地设置列表索引，我认为这是我之前遇到的主要问题。我相信我的问题与我的两个foreach循环有关，我需要在没有定义严格索引的情况下生成视图，这会导致绑定失败……至少我认为这是我的问题。
Fineal CSHTML
<form method="post">
@foreach (var row in Model.DetailsHeaders)
{
<table class="table table-sm">
<thead>
<tr>
<th colspan="2" scope="colgroup">@Html.DisplayFor(c => row.ServiceAbbr)</th>
<th colspan="2" scope="colgroup">@Html.DisplayFor(c => row.ServiceName)</th>
<th colspan="2" scope="colgroup">@Html.DisplayFor(c => row.Qty) Hours/IPs/Locations</th>
<th colspan="2" scope="colgroup">@Html.DisplayFor(c => row.Description) Duration</th>
</tr>
</thead>
<tbody>
@foreach (var detail in Model.Details)
{
if (detail.ServiceId == row.ServicesId)
{
<tr>
<td scope="row">
<input type="hidden"
name="Details.IndexId"
value="@detail.IndexId" />
<input type="hidden"
name="Details[@detail.IndexId].IndexId"
value="@detail.IndexId" />
<input type="hidden"
name="Details[@detail.IndexId].AssignedId"
value="@detail.AssignedId" />
@*@Html.DisplayFor(r => detail.AssignedId)*@
</td>
<td>
<input type="checkbox"
name="Details[@detail.IndexId].Complete"
value="true"
checked="@detail.Complete"
disabled="@detail.EditAccess" />
</td>
<td>
<input type="hidden"
name="Details[@detail.IndexId].Name"
value="@detail.Name"
readonly />
@Html.DisplayFor(r => detail.Name)
</td>
<td>
<input type="hidden"
name="Details[@detail.IndexId].StartDate"
value="@detail.StartDate"
readonly />
@Html.DisplayFor(r => detail.StartDate)
</td>
<td>
<input type="hidden"
name="Details[@detail.IndexId].EndDate"
value="@detail.EndDate"
readonly />
@Html.DisplayFor(r => detail.EndDate)
</td>
<td>
<input type="hidden"
name="Details[@detail.IndexId].LeadTech"
value="@detail.LeadTech"
readonly />
@Html.DisplayFor(r => detail.LeadTech)
</td>
<td>
<input type="hidden"
name="Details[@detail.IndexId].Tech2"
value="@detail.Tech2"
readonly />
@Html.DisplayFor(r => detail.Tech2)
</td>
<td>
<input type="hidden"
name="Details[@detail.IndexId].Tech3"
value="@detail.Tech3"
readonly />
@Html.DisplayFor(r => detail.Tech3)
</td>
</tr>
}
}
</tbody>
</table>
}
<button>Update</button>
</form>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59326265
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号