在 asp .NET MVC 中提交表单之前动态地将项目添加到列表中

Question

我有一个用户应该填写的表格。我希望用户在提交表单之前添加所有者列表。例如，用户输入第一个所有者详细信息并单击添加另一个所有者按钮，然后将提示用户输入其他所有者详细信息等。当用户添加所有所有者时，他可以提交表单。请有任何想法我该怎么做。

我的观点：

@using (Html.BeginForm(Html.BeginForm("SubminWebSiteLicense", "Licenses", FormMethod.Post, new { enctype = "multipart/form-data" })))
{
    <div class="row">
        <div class="col-md-6">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.WebsiteLink, "WebsiteLink ", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.WebsiteLink, new { @class = "form-control " })
                @Html.ValidationMessageFor(model => model.WebsiteLink, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="col-md-6">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.ApplicationLink, "ApplicationLink", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.ApplicationLink, new { @class = "form-control " })
                @Html.ValidationMessageFor(model => model.ApplicationLink, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <br />
    <h3>OwnersInfo</h3>

    <div class="row">
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.First_Name, "First_Name", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.First_Name, new { @class = "form-control ", @id = "First_Name" })
                @Html.ValidationMessageFor(model => model.First_Name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.Second_Name, "Second_Name", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.Second_Name, new { @class = "form-control ", @id = "Second_Name" })
                @Html.ValidationMessageFor(model => model.Second_Name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.Third_Name, "Third_Name", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.Third_Name, new { @class = "form-control ", @id = "Third_Name" })
                @Html.ValidationMessageFor(model => model.Third_Name, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.Last_Name, "Last_Name", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.Last_Name, new { @class = "form-control ", @id = "Last_Name" })
                @Html.ValidationMessageFor(model => model.Last_Name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.OwnerNid, "OwnerNid", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.OwnerNid, new { @class = "form-control ", @id = "OwnerNid" })
                @Html.ValidationMessageFor(model => model.OwnerNid, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.OwnerMobile, "OwnerMobile", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.OwnerMobile, new { @class = "form-control ", @id = "OwnerMobile" })
                @Html.ValidationMessageFor(model => model.OwnerMobile, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.OwneEmail, "OwneEmail", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.OwneEmail, new { @class = "form-control ", @id = "OwneEmail" })
                @Html.ValidationMessageFor(model => model.OwneEmail, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-md-4">
            <br />  <br />
            <input type="button" value=" add another owner " class="main-submit" id="AddOwner" name="AddOwner" />
        </div>
    </div>

    <div class="main-form-submit">
        <input type="submit" value="submit" class="main-submit" id="submit" name="submit" />
    </div>
}

我的主要模特：

public class WebsiteLicenseViewModel
{
    public string WebsiteName { get; set; }

    public string WebsiteLink { get; set; }

    public string ApplicationLink { get; set; }

    public string CrNumber { get; set; }

    public string OwnerNid { get; set; }

    public string OwnerMobile { get; set; }

    public string OwneEmail { get; set; }

    public string First_Name { get; set; }

    public string Second_Name { get; set; }

    public string Third_Name { get; set; }

    public string Last_Name { get; set; }

    public string AttachmentUrl { get; set; }

    public List<OwnersViewModel> OwnersList { get; set; }
}

我的 OwnersViewModel：

public class OwnersViewModel
{
    public string OwnerNid { get; set; }

    public string OwnerMobile { get; set; }

    public string OwneEmail { get; set; }

    public string First_Name { get; set; }

    public string Second_Name { get; set; }

    public string Third_Name { get; set; }

    public string Last_Name { get; set; }

    public List<OwnersViewModel> OwnersList { get; set; }
}

Answer 1

首先，这只是对您的问题的一个想法： 为了解决这个问题，我建议你创建一个按钮，当你点击按钮时你会做出反应。如果单击该按钮，您将读出表单数据并将这些数据添加到列表中。

Answer 2

要实现你提到的你必须做的事情

1. 在您的视图中创建一个按钮以添加所有者。像 + 号或“添加所有者”
2. 当用户单击此按钮时，会显示允许您添加所有者的 UI。我假设您不想在此阶段将所有者存储在服务器上以将所有者对象推送到 javascript 中的数组中。
3. 更新您的 UI 以显示此列表中的所有所有者。您可能有错误添加的所有者的删除按钮或编辑按钮等
4. 在客户端完成此操作后，您可以看到表单现在包含您的字段和一组所有者列表
5. 如果您想提交带有所有者列表的表单，只需将它们与其他字段一起放入 json 数据对象中并将其发送到服务器
6. 您在控制器上的方法会将列表项映射到正确的字段名称，对于数组项，您可以看到它出现在您的方法中。
7. 然后您可以在控制器中保存所有所有者或进行验证等

要调试它，您应该能够看到发送到服务器的发布请求带有可以在控制台中测试的对象数组。一旦实现这一点，您只剩下服务器使用它的问题，因此请先让您的客户端代码发送此数组。

当他们必须应用多个过滤器时，这种技术在网格中很常见，因此他们将前端 UI 中的所有过滤器构建为数组，一旦将这些过滤器提交到服务器，控制器就可以决定对它们执行任何需要并返回基于数据的关于那个。

试一试，告诉我们您觉得困难的地方。

Answer 3

您可以使用 JqueryRepeater 库。只需在容器中添加与所有者相关的输入，然后将 JqueryRepeater 绑定到容器。当您单击添加按钮时，它将复制所有者输入，当您单击提交按钮时，它将向操作提交所有者列表。只需记住为您的输入提供与模型类相同的名称。