Question

我正在尝试创建一个可以填充动态行的表，我也试图在模型为null时填充单个默认原始

模型属性

public class UsrViewModel
{
    public IEnumerable<User> SysUser { get; set; }
}

Public class User
{            
     public int ID {get; set:}
     public string user {get; set:}
     .. 
}

控制器方法

    [HttpGet]
    public ActionResult Users()
    {
        try
        {

            IList<Users> listofusers = ..

            var model = new UsrViewModel
            {
                SysUser = listofsensors
            };

            return View(model);
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Users(IEnumerable<UsrViewModel> model)
    {
        try
        {
            ...

            return View();
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

查看页面

@model ProjectName.ViewModels.UsrViewModel
    @{
    }
    <div class="content-page">

        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        @using (Html.BeginCollectionItem("Users", "Sample", FormMethod.Post))
                        {
                                    <table class="table table-striped table-bordered" id="SysUser ">
                                        <tr>
                                           ...
                                        </tr>

                                        @if (Model != null)
                                        {
                                        for (int i = 0; i < Model.SysUser.Count; i++)
                                            {
                                            <tr>
                                                <td>
                                                    [i]
                                                </td>
                                                <td>
                                                @Html.TextBoxFor(m => m.UsrViewModel[i].user , new { @type = "text", @class = "", @placeholder = "user Name", @required = "" })
                                                @Html.ValidationMessageFor(m => m.UsrViewModel[i].user, "", new { @class = "text-danger" })
                                               </td>
                                                ....

                                            </tr>
                                            }
                                        }

                                    </table>

                                </div>
                                <div class="col-sm-offset-1 col-sm-11">
                                    <button type="submit" class="btn btn-purple waves-effect waves-light btn-wd-130">Save</button>
                                    <button type="submit" class="btn btn-default waves-effect waves-light btn-wd-130">Clear</button>
                                </div>                 
                        }
                    </div>
                    <!-- end row -->

                </div> 
            </div>

        </div>
    </div>

但是当model为null时，这不会填充单个默认行，并且无法动态添加新行。我应该在这里改变什么？。

Answer 1

您以错误的方式使用BeginCollectionItem()方法。它需要应用于单个对象。其目的是修改html以添加集合索引器（基于Guid）并为索引器添加隐藏输入，这允许您为集合中的对象生成html并允许您动态添加（和删除项目到集合。

首先创建一个为用户生成表格行的部分视图（例如）_User.cshtml

@model User
<tr>
    @using (Html.BeginCollectionItem("SysUser")) // the parameter is the name of your collection property
    {
        <td>
            @Html.HiddenFor(m => m.ID)
            @Html.TextBoxFor(m => m.user)
            @Html.ValidationMessageFor(m => m.user)
        <td>
        <td>
            .... // form controls for other properties of user
        </td>
    }
</tr>

然后在主视图中，使用Partial()为集合中的每个User生成html

@model UsrViewModel
@using (Html.BeginForm())
{
    <table>
        <thead>....</thead>
        <tbody id="users">
            @foreach (var user in Model.SysUser)
            {
                @Html.Partial("_User", user)
            }
        </tbody>
    </table>
    <input type="submit" value="save" />
}

使用BeginCollectionItem()的唯一原因是能够在视图中动态添加和/或删除集合中的项目，因此假设您有一个“添加”按钮，您将处理其{{1}调用服务器方法的事件，该方法返回新.click()的部分视图并将其附加到表中，例如

User

当你的控制器方法是

时

<button id="add" type="button">Add New User</button>

var url = '@Url.Action("NewUser")';
var users = $('#users');
$('#add').click(function () {
    $.get(url, function (html) {
        users.append(html);
    });
});

您可能还在每行中包含一个“删除”按钮，以便您可以处理其click事件以调用从数据库中删除用户的服务器方法，并在ajax成功回调中，从表中删除该行

当模型为空时，带有默认行的动态表行

1 个答案: