Asp.net core mvc добавить элемент в существующую модель в представлении

Веб-приложение ASP.NET Core 2 MVC.

У меня есть страница, которая наследуется от модели и показывает данные, которые необходимо изменить. Эта модель имеет List<>, который визуализируется с использованием foreach.

Вот моя модель

public class ParticipantModel
    {
        public List<ParticipantSpecificFieldsModel>? ParticipantSpecificFieldsModel { get; set; }
    }

public class ParticipantSpecificFieldsModel
{
      public string? FieldName { get; set; }
     public string? FieldValue { get; set; }
}

На странице у меня есть это

 @foreach (var participantSpecifiFields in Model.ParticipantModel)
        {
            <div style = "float:left; width:80%;">
                <div class = "col-2" style = "float:left;">
                    <span style = "font-weight:bold;">@participantSpecifiFields.FieldName</span>
                </div>
                <div class = "col-2" style = "float:left;">
                    <span>@participantSpecifiFields.FieldValue</span>
                </div>
            </div>
        }

Мне нужно отправить форму, и я думал использовать

<form action = "@Url.Action("Update", "Client")" id = "formUpdate" enctype = "multipart/form-data" method = "post">

У меня проблема в том, что, кроме обновленных существующих элементов, я могу добавить новый.

я пробовал с

<div class = "col">
            @Html.EditorFor(model => model.ParticipantSpecificFieldsModel![X].FieldName, new { htmlAttributes = new { @class = "form-control" } })
        </div>
        <div class = "col">
            @Html.EditorFor(model => model.ParticipantSpecificFieldsModel![X].FieldValue, new { htmlAttributes = new { @class = "form-control" } })
        </div>

Где X — последний индекс +1. Но не работает.

Есть ли способ добавить элементы в существующую модель? и отправить его контроллеру, когда я отправлю?

Спасибо

У вас не может быть «EditorFor» для чего-то, чего не существует. Вам либо нужно обновить модель на стороне контроллера (добавив один), либо создать поля ввода вручную с помощью индекса... (например: <input name = "ParticipantSpecificFieldsModel[x]..."). В общем, когда вы привязывая поля формы к списку модели, вы должны выполнить итерацию со стандартным циклом for и использовать Model.ParticipantSpecificFieldsModel[for-loop-index]... в своих htmlHelpers. Затем вы обновите модель, чтобы добавить пустой элемент через контроллер, если нажата кнопка «добавить элемент».

— 14.04.2023 22:51

Я предполагаю, что у вас есть модель представления здесь... вам, вероятно, следует включить это в свой вопрос. (не мешало бы добавить весь контроллер и cshtml, так как люди могут дать более конкретный ответ...)

— 14.04.2023 23:01

asp.net-mvc list asp.net-core view

14.04.2023 16:22

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как сказал г-н Пкалкинс, вы можете использовать EditorFor(xxx) для того, чтобы что-то не существовало. Итак, здесь, я думаю, вы можете установить кнопку. Когда пользователь нажимает кнопку, используйте JavaScript для создания элемента input, чтобы пользователь мог ввести значение FieldName и FieldValue . Вот простая демонстрация. Надеюсь, это поможет вам.

Контроллер

      //For testing, I just hard code here.
        ParticipantModel model = new ParticipantModel()
        {
            ParticipantSpecificFieldsModel = new List<ParticipantSpecificFieldsModel>()
            {
                new ParticipantSpecificFieldsModel()
                {
                    FieldName  = "AAA",
                    FieldValue = "aaaaa"
                },
                new ParticipantSpecificFieldsModel()
                {
                    FieldName  = "BBB",
                    FieldValue = "bbbbb"
                },
                new ParticipantSpecificFieldsModel()
                {
                    FieldName  = "CCC",
                    FieldValue = "ccccc"
                },
                new ParticipantSpecificFieldsModel()
                {
                    FieldName  = "DDD",
                    FieldValue = "ddddd"
                }
            }
        };


        public IActionResult Hello()
        {
            return View(model);
        }

Вид

@model ParticipantModel

<form method = "post">
    <div data = "@Model.ParticipantSpecificFieldsModel.Count()" id = "count"></div>
    @for (var i = 0;i<Model.ParticipantSpecificFieldsModel.Count();i++)
    {
        <div style = "float:left; width:80%;">
            <div class = "col-2" style = "float:left;">
                <span style = "font-weight:bold;">@Model.ParticipantSpecificFieldsModel[i].FieldName</span>
                <input type = "hidden" name = "ParticipantSpecificFieldsModel[@i].FieldName" value = "@Model.ParticipantSpecificFieldsModel[i].FieldName" />
            </div>
            <div class = "col-2" style = "float:left;">
                <span>@Model.ParticipantSpecificFieldsModel[i].FieldValue</span>
                <input type = "hidden" name = "ParticipantSpecificFieldsModel[@i].FieldValue" value = "@Model.ParticipantSpecificFieldsModel[i].FieldValue" />
            </div>
        </div>
    }
    <br />
    <div id = "new-fields-container"></div>
    <br />
    <button id = "add-field" type = "button">Add Field</button>
    <br />
    <button type = "submit">Submit</button>
</form>

@section Scripts{
    <script>
        $('#add-field').click(function () {

            var newIndex = document.getElementById("count").getAttribute('data')
            var newHtml = '<div class = "col">' +
                '<input type = "text" name = "ParticipantSpecificFieldsModel[' + newIndex + '].FieldName" class = "form-control" />' +
                '</div>' +
                '<div class = "col">' +
                '<input type = "text" name = "ParticipantSpecificFieldsModel[' + newIndex + '].FieldValue" class = "form-control" />' +
                '</div>';
            $('#new-fields-container').append(newHtml);
            
        });
    </script>
}

Демо

Привет @Diego, может ли этот ответ решить твою проблему?

— 18.04.2023 03:10

17.04.2023 05:01