个人中心
gpt4 book ai didi

javascript - 如何将动态 HTML 表中输入的项目添加到模型绑定(bind)列表

转载 作者：行者123 更新时间：2023-11-28 16:46:27 25 4
gpt4 key购买 nike

我正在使用 .NET CORE MVC 制作一些表单，以便用户将人员添加到系统(手动过程)。我得到的表单之一是一个简单的多添加用户表单，允许用户在表单上输入姓名并单击“提交”，然后将其序列化并转换为 PDF 文档以保存到本地计算机。

我想在制作这个时考虑到动态 HTML 表，所以我有以下设置。这里的目的是允许表最初以单个空的、可编辑的行开始，并能够根据需要添加行，同时将每行绑定(bind)到模型上的对象列表。

用户类别

    [Serializable]
    public class User
    {
        [Display(Name = "M.I.")]
        public string MiddleInitial { get; set; }

        [Display(Name = "Suffix")]
        public string NameSuffix { get; set; }

        [Required(AllowEmptyStrings = false)]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required(AllowEmptyStrings = false)]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }
    }

MultiAddUser 类

[Serializable]
public class MultiAddUser
{
    [Required]
    [Display(Name = "Start Date")]
    public DateTime StartDate { get; set; }
    public List<User> Users { get; set; }

    public MultiAddUser()
    {
        Users = new List<User>();
    }
}

我的 View 具有以下代码，用于显示基本表格，其中单元格中包含输入，并且能够动态添加单元格。 

@using Contract
@model MultiAddUser

@section Scripts{

    <script>
        function addRow() {
            var table = document.getElementById("MultiAddUserTable");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
            cell1.innerHTML = '<input type="text" />';
            var cell2 = row.insertCell(1);
            cell2.innerHTML = '<input type="text" />';
            var cell3 = row.insertCell(2);
            cell3.innerHTML = '<input type="text" />';
            var cell4 = row.insertCell(3);
            cell4.innerHTML = '<input type="text" />';
        }
    </script>
}

<style>
    input {
        width: 100%;
    }
</style>

<body>
    <h2 class="formtitle">ADD MULTIPLE USERS</h2>
    <form method="post" asp-action="AddMultipleUsers" id="addMultiUsers">
        <div class="form-group">
            <div class="form-row">
                <div class="form-group col-sm-2">
                    <label asp-for="StartDate"></label>
                    <input type="date" asp-for="StartDate" class="form-control" />
                    <span asp-validation-for="StartDate" class="text-danger"></span>
                </div>
            </div>

            <table id="AddMultipleUsersTable">
                <tr>
                    <th>First Name</th>
                    <th>Middle Initial</th>
                    <th>Last Name</th>
                    <th>Suffix</th>
                </tr>
                <tr>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                </tr>
            </table>

            <button type="button" onclick="addRow()">Add</button>

            <hr />

            <div class="form-row">
                <div id="submitbutton">
                    <input id="submit" class="btn btn-primary btn-lg" style="background-color: #4CAF50; color:white;" type="submit" />
            </div>
    </form>

</body>

现在通常使用 ASP.NET Core MVC，您在输入标记帮助器中只会有类似 asp-for="@Model.Property[IndexIfNeeded]" 的内容，但由于列表开始为空并且是由于不受数据库的约束，我很难拼凑出在提交整个表单后如何将每个新行作为新项目添加到模型的列表中。

我可能过于复杂化了，因为数据永远不需要输入数据库，但它确实需要序列化并转换为 PDF 文档，并在过程结束时打印，以便了解替代方法如果能做到这一点，我们将不胜感激。

总之，如何将动态添加到此表的行/列绑定(bind)到我的模型对象，同时维护每个必需属性的验证规则？

最佳答案

由于您的数据没有与数据库关联，因此我建议您创建公共(public)变量来存储添加的和新添加的数据。

并且 View 中的'td'标签不支持'asp-for'属性，因此可以在'td'中添加输入框来添加新数据。

public class HomeController : Controller
{
    public static MultiAddUser multiAddUser = new MultiAddUser { };
    public static List<User> users = new List<User> { };
    public IActionResult Index()
    {
        ViewBag.UserList = multiAddUser.Users;
        return View();
    }
   public IActionResult Add(User user)
    {
        if (!ModelState.IsValid)
        {
            ViewBag.UserList = multiAddUser.Users;
            return View("Index");
        }
        users.Add(user);
        multiAddUser.Users = users;
        return RedirectToAction("Index");
    }

}

索引.cshtml:

@model WebApplication_core.Models.User
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Index</h1>
<form asp-controller="Home" asp-action="Add">
    <table id="MultiAddUserTable" class="table">
        <tr>
            <th>First Name</th>
            <th>Middle Initial</th>
            <th>Last Name</th>
            <th>Suffix</th>
        </tr>
        @foreach (var item in (IEnumerable<WebApplication_core.Models.User>)ViewBag.UserList)
        {
            <tr>
                <td>@item.FirstName</td>
                <td>@item.MiddleInitial</td>
                <td>@item.LastName</td>
                <td>@item.NameSuffix</td>
            </tr>
        }
        <tr> 
           <td contenteditable="true">
                <input id="Text1" type="text" asp-for="@Model.FirstName" />
                <br /><span asp-validation-for="@Model.FirstName" class="text-danger"></span>
            </td>

            <td contenteditable="true">
                <input id="Text2" type="text" asp-for="@Model.MiddleInitial" />
                <br /><span asp-validation-for="@Model.MiddleInitial" class="text-danger"></span>
            </td>

            <td contenteditable="true">
                <input id="Text3" type="text" asp-for="@Model.LastName" />
                <br /> <span asp-validation-for="@Model.LastName" class="text-danger"></span>
            </td>

            <td contenteditable="true">
                <input id="Text4" type="text" asp-for="@Model.NameSuffix" />
                <br /> <span asp-validation-for="@Model.NameSuffix class="text-danger"></span>
            </td>

        </tr>
    </table>
    <input id="Button1" type="submit" value="Add" />
</form>

这是结果:

enter image description here

更新(2020/3/5):

public class HomeController: Controller
{
    public static List<User> users = new List<User> { new User { } };
    public static MultiAddUser multiAddUser = new MultiAddUser
    {
        Users = users
    };
    public IActionResult Index()
    {
        ViewBag.UserList = multiAddUser.Users;
        return View();
    }

    public IActionResult Add(List<User> userLists)
    {
        if (!ModelState.IsValid)
        {
            ViewBag.UserList = multiAddUser.Users;
            return View("Index");
        }
        users = userLists;
        users.Add(new User { });
        multiAddUser.Users = users;
        return RedirectToAction("Index");
    }
}

索引.cshtml:

@model IList<WebApplication_core.Models.User>
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var Model = (IList<WebApplication_core.Models.User>)ViewBag.UserList;
}

<h1>Index</h1>
<form asp-controller="Home" asp-action="Add">
    <table id="MultiAddUserTable" class="table">
        <tr>
            <th>First Name</th>
            <th>Middle Initial</th>
            <th>Last Name</th>
            <th>Suffix</th>
        </tr>
        @for (int i = 0; i < Model.Count(); i++)
        {
            <tr>
                <td>
                    <input id="Text1" type="text" asp-for="@Model[i].FirstName" />
                    <br /><span asp-validation-for="@Model[i].FirstName" class="text-danger"></span>
                </td>
                <td>
                    <input id="Text2" type="text" asp-for="@Model[i].MiddleInitial" />
                    <br /><span asp-validation-for="@Model[i].MiddleInitial" class="text-danger"></span>
                </td>
                <td>
                    <input id="Text3" type="text" asp-for="@Model[i].LastName" />
                    <br /> <span asp-validation-for="@Model[i].LastName" class="text-danger"></span>
                </td>
                <td>
                    <input id="Text4" type="text" asp-for="@Model[i].NameSuffix" />
                    <br /> <span asp-validation-for="@Model[i].NameSuffix" class="text-danger"></span>
                </td>
            </tr>
        } 

    </table>
    <input id="Button1" type="submit" value="Add" />
</form>

这是新结果:

enter image description here

关于javascript - 如何将动态 HTML 表中输入的项目添加到模型绑定(bind)列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60497876/

25 4 0
文章推荐： javascript - 谷歌地图与谷歌 MDL 标签问题
文章推荐： python - 从python Django的角度来看，机器人与爬虫不同吗
文章推荐： 使用模拟的 Python 单元测试功能
文章推荐： javascript - 单击后隐藏菜单(淡出)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com