Я сейчас создаю и использую 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);
}
Вот метод Invoke из ViewComponent:
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. Он находится внутри другой формы, потому что мне нужно отправить основную форму и все ViewComponents сразу:
<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>
Мой вопрос в том, как разделить эти идентичные формы и иметь возможность отправлять их и сохранять каждую из них этих форм в массив объектов, которые я затем могу сохранить в базе данных.
Я открыт для всех идей и при необходимости изменю весь код.
Спасибо!