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

本文关键字：默认 动态 模型 | 更新日期: 2023-09-27 18:18:08

我试图创建一个表，可以填充动态行，我也试图填充单一默认raw时，模型为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时，这不会填充单个默认行，并且不能动态添加新行。

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

您以错误的方式使用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()的唯一原因是能够动态地从视图中的集合中添加和/或删除项目，因此假设您有一个"添加"按钮，您将处理其.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);
    });
});

当你的控制器方法是

public PartialViewResult NewUser()
{
    return PartialView("_User, new User());
}

您还可以在每行中包含一个'Delete'按钮，这样您就可以处理它的单击事件来调用服务器方法，从数据库中删除用户，并在ajax成功回调中从表中删除行。

相关文章：