Поместите содержимое формы в список для MVC

Question

У меня есть страница, содержащая одну основную форму и несколько меньших повторяющихся форм. Я пытаюсь опубликовать их обе, используя одну кнопку с JQuery, и обрабатывать их в следующем порядке: сначала основная форма, а затем меньшие формы. Однако, когда я пытаюсь получить доступ к меньшим формам, я получаю данные только из последней. Я думал, что лучший способ сделать это - поместить меньшие формы в список, передать его моему обработчику, а затем выполнить foreach l oop по списку. Как мне поместить информацию формы в список, прежде чем мой обработчик ее использует? Вот моя модель:

public class SubmitModel
    { 
        [BindProperty]
        public Timelineinfo Timelineinfo { get; set; } //main form
        [BindProperty]
        public Media Medias { get; set; }//small form       
    }

Мой контроллер:

        [HttpPost]
        [Route("/Submit/Submit")]
        [ValidateAntiForgeryToken] //Main form handler
        public async Task<IActionResult> Submit(SubmitModel model)
        {           
            if (ModelState.IsValid)
            {
                //Removed for brevity, but
                //Fill out some more values in main form then submit main form to Database,
            }           
            return View("Pages/Submit.cshtml", model);
        }

      
        [Route("/Submit/MediaAdd")]
        [ValidateAntiForgeryToken] //Add media form handler
        public async Task<IActionResult> MediaAdd(SubmitModel model)
        {
            if (ModelState.IsValid)
            {
               //Removed for brevity, but
               //Fill out some more values in small form then submit small form to Database
            }            
            return View("Pages/Submit.cshtml", model);
        }

И усеченная версия моей маленькой формы (основная форма похожа, но с Submit вместо MediaAdd :

@using (Html.BeginForm("MediaAdd", "Timeline", FormMethod.Post))
{  
    @Html.AntiForgeryToken()
    <div class="container">
        <div class="form-row">
            <label asp-for="Medias.Blurb" class="control-label">Blurb<span class="text-danger ml-1">*</span> <span class="text-muted ml-1">Explain what is in the media</span></label>
            <input asp-for="Medias.Blurb" class="form-control" />
            <span asp-validation-for="Medias.Blurb" class="text-danger"></span>
        </div>
        <div class="form-row">
            <div class="ml-3 col-4">
                <label class="form-check-label">Is there any blood or gore in the video?<span class="text-danger ml-1">*</span></label>
                <div class="form-check m-2 d-inline">
                    <input type="radio" asp-for="Medias.Gore" class="form-check-input" value="0">
                    <label class="form-check-label">No</label>
                </div>
                <div class="form-check m-2 d-inline">
                    <input type="radio" asp-for="Medias.Gore" class="form-check-input" value="1" />
                    <label class="form-check-label">Yes</label>
                    <span asp-validation-for="Medias.Gore" class="text-danger"></span>
                </div>
            </div>
        </div>
    </div>
}

Наконец, как я сейчас отправляю свои формы:

$('#submitButton').click(function () {
  $('form').submit();
});

Answer 1

Я сделал пример на основе ваших требований, вы можете сослаться на него:

Модель:

public class SubmitModel
{
    [BindProperty]
    public Timelineinfo Timelineinfo { get; set; } 
    [BindProperty]
    public List<Media> Medias { get; set; }
}

public class Timelineinfo
{
    public int TimeId { get; set; }
    public string Description { get; set; }
}

public class Media
{
    public string Blurb { get; set; }
    public string Gore { get; set; }
}

Просмотр основной формы (индекс) :

@model SubmitModel

<button id="AddMedia" type="button" class="btn btn-primary">Add Media</button>

@using (Html.BeginForm("MediaAdd", "Timeline", FormMethod.Post))
{
    <div class="container">
        <div class="form-row">
            <label asp-for="Timelineinfo.TimeId" class="control-label">TimeId</label>
            <input asp-for="Timelineinfo.TimeId" class="form-control" />
        </div>
        <div class="form-row">
            <label asp-for="Timelineinfo.Description" class="control-label">Description</label>
            <input asp-for="Timelineinfo.Description" class="form-control" />
        </div>
    </div>

    <div id="subformsArea">

    </div>

    <div>
        <input type="submit" value="submit" class="btn btn-primary" />
    </div>
}

@section scripts{ 
<script>
    var count = 0;
    $("#AddMedia").on('click', function () {
        $.ajax({
            url: '/Timeline/Media',
            method: 'get',
            data: {data : count},
            success: function (result) {
                $("#subformsArea").append(result);
                count++;
            }
        })

    })
</script>

}

Представление подчиненной формы (частичное представление):

@model SubmitModel

@{ 
    int i = ViewBag.Count;
}

<div class="container">
    <div class="form-row">
        <label asp-for="Medias[i].Blurb" class="control-label">Blurb<span class="text-danger ml-1">*</span> <span class="text-muted ml-1">Explain what is in the media</span></label>
        <input asp-for="Medias[i].Blurb" class="form-control" />
        <span asp-validation-for="Medias[i].Blurb" class="text-danger"></span>
    </div>
    <div class="form-row">
        <div class="ml-3 col-4">
            <label class="form-check-label">Is there any blood or gore in the video?<span class="text-danger ml-1">*</span></label>
            <br />
            <div class="form-check m-2 d-inline">
                <input type="radio" asp-for="Medias[i].Gore" class="form-check-input" value="0">
                <label class="form-check-label">No</label>
            </div>
            <div class="form-check m-2 d-inline">
                <input type="radio" asp-for="Medias[i].Gore" class="form-check-input" value="1" />
                <label class="form-check-label">Yes</label>
                <span asp-validation-for="Medias[i].Gore" class="text-danger"></span>
            </div>
        </div>
    </div>
</div>

Контроллер:

public class TimelineController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    [Route("/Submit/MediaAdd")]
    [ValidateAntiForgeryToken] //Add media form handler
    public IActionResult MediaAdd(SubmitModel model)
    {
        if (ModelState.IsValid)
        {
            //Removed for brevity, but
            //Fill out some more values in small form then submit small form to Database
        }
        return View("Pages/Submit.cshtml", model);
    }

    public IActionResult Media(int data)
    {
        ViewBag.Count = data;
        return PartialView();
    }
}

Результат :

введите описание изображения здесь

Answer 2

Вот как бы я это сделал. Чем проще, тем лучше:

<form action='myAction' method='postOrGet'>
//subform 1
<input name='inputA' subform='s1'.../>
//subform 2
<input name='inputX' subform='s2'.../>
...
<button type='submit'>submit</button>
</form>

Затем вы можете легко разделить отправленные данные на основе атрибута «subform» (s1, s2. Et c)