我目前正在ASP.NET Core MVC中构建和应用程序,遇到了无法解决的问题。
我有一张用于某种东西的表格,该表格应包含多个相同的字段,这些字段是动态添加的(1-10)。我已经设法通过创建一个包含这些表单字段的ViewComponent来做到这一点,并且如果用户选择添加这些字段的另一段,我会进行Ajax调用以将视图组件调用到选项卡中。
function CallViewComponent(num_tabs) {
var data = { id: num_tabs };
$.ajax({
type: 'POST',
url: '/Create/CreateActivityForm',
cache: false,
data: data
}).done(function (result) {
var container = "#activity-" + num_tabs;
$(container).html(result);
});
}
出现问题是因为该视图组件中的每个字段与其他字段共享一个名称,因此每次我调用另一个视图组件时,所有相同字段之间都会共享单选按钮。
这是ViewComponent的代码段:
@model CreateActivityViewModel
<div class="activity-tab">
<div class="form-group">
<label asp-for="La.OrdinalNumber">Redni broj aktivnosti</label><br />
<select asp-for="La.OrdinalNumber" class="ordinals" style="width:50%">
@foreach (var on in Model.OrdinalNumbers)
{
<option value="@on.Value">@on.Text</option>
}
</select>
</div>
<div class="form-group">
<label asp-for="La.Latype">Tip aktivnosti</label><br />
<select asp-for="La.Latype" class="activity-type" style="width:50%">
@foreach (var lt in Model.LaTypes)
{
<option value="@lt">@lt.LatypeName</option>
}
</select>
</div>
<div class="form-group">
<label asp-for="La.Laname">Naziv aktivnosti</label>
<input asp-for="La.Laname" type="text" name="La.Laname" placeholder="Unesite naziv aktivnosti" class="f1-activity-name form-control" id="f1-activity-name">
</div>
这是我的控制器,它返回ViewComponent:
[HttpPost]
public IActionResult CreateActivityForm(int id)
{
return ViewComponent("ActivityTab", id);
}
这是ViewComponent中的Invoke方法:
public IViewComponentResult Invoke(int id)
{
var latypes = _laTypeRepository.GetAllLaType.ToList();
var ordinals = new List<SelectListItem>();
var laperformances = _laPerformanceRepository.GetAllLaPerformance.ToList();
var teachingAids = _teachingAidRepository.GetAllTeachingAid.ToList();
var strategyMethods = _strategyMethodRepository.GetAllStrategyMethod.ToList();
var laCollaboration = _laCollaborationRepository.GetAllLaCollaboration.ToList();
for (int i = 1; i <= 100; i++)
{
ordinals.Add(new SelectListItem($"{ i }. aktivnost", i.ToString()));
}
return View( new CreateActivityViewModel
{
FormId = id,
LaTypes = latypes,
OrdinalNumbers = ordinals,
LaPerformances = laperformances,
StrategyMethods = strategyMethods,
Lacollaborations = laCollaboration,
TeachingAids = teachingAids,
TeachingAidUser = new List<TeachingAid>(),
TeachingAidStudent = new List<TeachingAid>()
});
}
最后,这是ViewComponent被调用的地方。它在另一个表单中,因为我需要一次提交主表单和所有ViewComponent:
<fieldset>
<h4>Aktivnosti</h4>
<!-- Activity Tabs -->
<div id='activity-tabs'>
<!-- Activity Links -->
<ol id="#activity-links">
<li><a href='#activity-1'>#1</a></li>
<li id="add-activity"><button type="button" id='add-activity'><i class="fa fa-plus"></i></button></li>
</ol>
<!-- Activity Content -->
<div id='activity-1'>
<h3>Aktivnost #1</h3>
@await Component.InvokeAsync("ActivityTab")
</div>
</div>
<!-- Navigation Buttons -->
<div class="f1-buttons">
<button type="button" class="btn btn-previous">Prethodna</button>
<button type="submit" class="btn btn-submit">Kreiraj scenarij</button>
</div>
</fieldset>
我的问题是我如何分离这些相同的表单,并能够提交它们,并将其中的每个表单存储到对象数组中,然后将其存储到数据库中。
我愿意接受所有想法,如有必要,将更改整个代码。
谢谢!
答案 0 :(得分:0)
如果有对象数组,则需要使用FOR循环而不是FOR-EACH来渲染组件。我喜欢将通用代码推送到共享视图中,但是您可以直接在视图中进行编码。您将需要设置asp-for属性,以便将值绑定到模型
@for (int index = 0; index < Model.Resources.Count; index++)
{
<partial name="_ResourceHidden" for="@Model.Resources[index]" />
直接渲染
@for (int index = 0; index < Model.Resources.Count; index++)
{
<tr>
<td>
@Model.Resources[index].ResourceName
</td>