将表单内容放入 MVC 列表

Question

我的页面包含一个主表单和多个较小的重复表单。我正在尝试使用带有 JQuery 的一个按钮来发布它们，并按以下顺序处理它们：首先是主表单，然后是较小的表单。但是，当我尝试访问较小的表单时，我只从最后一个表单中获取数据。我在想最好的方法是将较小的表单放入列表中，将其传递给我的处理程序，然后在列表中执行 foreach 循环。在我的处理程序使用它之前，我如何将表单信息放入列表中？ 这是我的模型：

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>

然后您可以根据“子表单”属性（s1，s2.等）轻松分离提交的数据