Dies öffnet dieses Formular in einem modalen Format:

Hier können Sie vorhandene Werte bearbeiten, löschen oder neue hinzufügen:

Es kann also am Ende beliebig viele Werte haben!
Das CSHTML für dies:
Code: Select all
@using (Html.BeginForm("EditDropDown", "Incidents", FormMethod.Post, new { onsubmit = "validateCustomTolerances()", id = "modal-form" }))
{
@foreach (var opt in Model.IncRptOptions)
{
@if (opt.Type == "Action")
{
[/i]
}
}
Add Option
@*------ Hidden form content (required by controller action) ------*@
[i]
@*------ Form buttons ------*@
Save
Cancel
}
Code: Select all
// Deletes the existing option next to the 'bin' button user clicks it.
document.querySelectorAll('.delete-existing').forEach(item => {
item.addEventListener('click', event => {
let existingParent = item.parentElement;
existingParent.remove();
});
});
// Event listeners for the 'add option' button
let addOption = document.querySelector('#add-option');
// Creates the form input element for an additional option when button clicked
addOption.addEventListener('click', function () {
let parent = document.querySelector('#additional-options-here');
let html = `
[/i]
`;
let template = document.createElement('div');
template.setAttribute('class', 'IncRpt-opt-modalDisp')
template.innerHTML = html;
let finalHTML = template;
finalHTML.querySelector('.delete-added').addEventListener('click', deleteAddedElement);
parent.appendChild(finalHTML);
});
// Deletes the added option elements when user clicks on the 'bin' icons
function deleteAddedElement() {
let parent = this.parentElement;
parent.remove();
}
Mit Flask habe ich request.form.getList("Input-name-value") verwendet. Was ist die ASP.NET-äquivalente Möglichkeit, dies zu tun?
Mobile version