我有一個包含一些屬性和串列的類 QuestionnaireDetailsViewModel。
該串列可以包含從 0 到多個專案。我將 QuestionnaireDetailsViewModel 類發送到我的視圖，以便在表單中顯示它。對于串列部分，我使用 foreach 來渲染它，它作業得很好。
問題是，所有這些屬性都是輸入，當我提交表單時，當它到達控制器時，我的串列總是空的。
我還注意到，在呼叫的有效負載中，它只將串列中的第一項發送到控制器，但我相信這是因為每個項都具有相同的名稱。
我不明白如何使表單的每個輸入匹配串列屬性名稱，因為它們需要有一個唯一的名稱。是否有可能實作這一點，或者我應該使用 JS 回圈分別保存每個串列項？
你能啟發我嗎？
QuestionnaireDetailsViewModel 類
public class QuestionnaireDetailsViewModel
{
public string Id { get; set; }
public string Name { get; set; }
public List<VenueViewModel> VenueItems { get; set; }
}
場地視圖模型類
public class VenueViewModel
{
public string Id { get; set; }
public string Id_Que { get; set; }
public string VenueName { get; set; }
public string Checkbox_Other { get; set; }
public string IsEventHaveSustainableApproach { get; set; }
}
看法
<form method="post" enctype="multipart/form-data" class="form-content-column" id="formFull">
<div class="input-box">
<label class="numbered" for="Name">Name<span class="span-mandatory">*</span></label>
<input asp-for="Name" class="input-mandatory" type="text" id="Name" required />
<span asp-validation-for="Name"></span>
<input asp-for="Id" type="hidden" id="Id" required />
</div>
<div class="accordion" id="accordionExample">
@foreach (var obj in Model.VenueItems)
{
<div class="accordion-item">
<h2 class="accordion-header" id="[email protected]">
<button class="accordion-button accordion-button-custom" type="button" data-bs-toggle="collapse" data-bs-target="#[email protected]" aria-expanded="true" aria-controls="[email protected]" style="margin-top: 0px">
@obj.VenueName
</button>
</h2>
<div id="[email protected]" class="accordion-collapse collapse show" aria-labelledby="[email protected]" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="input-box no-border">
<label class="numbered">Did the venue have a sustainable approach?<span class="span-mandatory">*</span></label>
<div class="flex flex-column">
<div class="single-radio">
<input asp-for="@obj.IsEventHaveSustainableApproach" class="input-mandatory radio_Tab1_IsEventHaveSustainableApproach" type="radio" value="1" id="[email protected]" />
<label for="[email protected]">Yes</label>
</div>
<div class="single-radio">
<input asp-for="@obj.IsEventHaveSustainableApproach" class="input-mandatory radio_Tab1_IsEventHaveSustainableApproach" type="radio" value="0" id="[email protected]" />
<label for="[email protected]">No</label>
</div>
</div>
</div>
<div class="input-box">
<label for="Tab1_Checkbox_EventVenue_Other">Other? Please explain</label>
<input asp-for="@obj.Checkbox_Other" type="text" id="Tab1_Checkbox_EventVenue_Other" />
</div>
</div>
</div>
</div>
}
</div>
</form>
發送表單的js方法
async function saveForm() {
let formData = new FormData(document.forms[0]);
await fetch('/Reports/Save', {
method: 'post',
body: formData
})
.then((response) => {
toastr.success('Saved successfully');
preventLeaving = false;
return true;
})
.catch((error) => {
toastr.error('An error occured');
return false;
});
}
控制器收到帶有屬性名稱填充但串列項為空的表單
public async Task<IActionResult> SaveAsync(QuestionnaireDetailsViewModel questionnaireViewModel)
{
}
uj5u.com熱心網友回復：
我還注意到，在呼叫的有效負載中，它只將串列中的第一項發送到控制器，但我相信這是因為每個項都具有相同的名稱
是的，是同名造成的。name="[index].PropertyName"對于您的嵌套串列模型，它通過or系結屬性name="VenueItems[index].PropertyName"。
更改您的前端代碼，如下所示：
@model QuestionnaireDetailsViewModel
<form method="post" enctype="multipart/form-data" class="form-content-column" id="formFull">
<div class="input-box">
<label class="numbered" for="Name">Name<span class="span-mandatory">*</span></label>
<input asp-for="Name" class="input-mandatory" type="text" id="Name" required />
<span asp-validation-for="Name"></span>
<input asp-for="Id" type="hidden" id="Id" required />
</div>
<div class="accordion" id="accordionExample">
@{
int i = 0; //add index here........
}
@foreach (var obj in Model.VenueItems)
{
<div class="accordion-item">
<h2 class="accordion-header" id="[email protected]">
<button class="accordion-button accordion-button-custom" type="button" data-bs-toggle="collapse" data-bs-target="#[email protected]" aria-expanded="true" aria-controls="[email protected]" style="margin-top: 0px">
@obj.VenueName
</button>
</h2>
<div id="[email protected]" class="accordion-collapse collapse show" aria-labelledby="[email protected]" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="input-box no-border">
<label class="numbered">Did the venue have a sustainable approach?<span class="span-mandatory">*</span></label>
<div class="flex flex-column">
<div class="single-radio">
@*add name attribute*@
<input name="VenueItems[@i].IsEventHaveSustainableApproach" asp-for="@obj.IsEventHaveSustainableApproach" class="input-mandatory radio_Tab1_IsEventHaveSustainableApproach" type="radio" value="1" id="[email protected]" />
<label for="[email protected]">Yes</label>
</div>
<div class="single-radio">
<input name="VenueItems[@i].IsEventHaveSustainableApproach" asp-for="@obj.IsEventHaveSustainableApproach" class="input-mandatory radio_Tab1_IsEventHaveSustainableApproach" type="radio" value="0" id="[email protected]" />
<label for="[email protected]">No</label>
</div>
</div>
</div>
<div class="input-box">
<label for="Tab1_Checkbox_EventVenue_Other">Other? Please explain</label>
@*add name attribute*@
<input asp-for="@obj.Checkbox_Other" name="VenueItems[@i].Checkbox_Other" type="text" id="Tab1_Checkbox_EventVenue_Other" />
</div>
</div>
</div>
</div>
i ; //add this.........
}
</div>
</form>
<button type="button" onclick="saveForm()">Post</button>
@section Scripts
{
<script>
async function saveForm() {
let formData = new FormData(document.forms[0]);
await fetch('/Reports/Save', {
method: 'post',
body: formData
})
.then((response) => {
toastr.success('Saved successfully');
preventLeaving = false;
return true;
})
.catch((error) => {
toastr.error('An error occured');
return false;
});
}
</script>
}
結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/483851.html
標籤：C＃ asp.net-mvc asp.net 核心