MVC4 POST提交触发空引用错误及表格行索引实现问题

问题1：POST时hdrdtl.TBHDR空引用错误修复 #

错误原因：表单提交时MVC模型绑定失败，导致hdrdtl.TBHDR属性为null，遍历null集合触发空引用异常。
修复步骤：

1. 给模型类添加构造函数，默认初始化集合属性，避免绑定失败时直接为null：

namespace Mvc_CSS.Models
{
    public class HeaderDetailModels
    {
        // 新增构造函数初始化集合
        public HeaderDetailModels()
        {
            TBHDR = new List<TB_RST_SVCHDR>();
            TBDTL = new List<TB_RST_SVCDTL>();
        }
        public virtual List<TB_RST_SVCHDR> TBHDR { get; set; }
        public virtual List<TB_RST_SVCDTL> TBDTL { get; set; }
    }
}

2. POST动作中遍历集合前增加非空判断，兜底避免异常：

// 原foreach代码前增加判断
if (hdrdtl.TBHDR != null && hdrdtl.TBHDR.Any())
{
    foreach (var p in hdrdtl.TBHDR)
    {
        p.STATUS = "N";
        p.CRT_DATE = DateTime.Now;
        p.APPROVER3 = "saul.gomez@lge.com";
        cd.TB_RST_SVCHDR.Add(p);
    }
}

问题2：表格行加索引支持多行提交实现 #

实现原理：MVC绑定集合类型属性时，要求表单输入框的name属性符合集合名[索引].属性名的格式，才能正确映射到List<T>的对应元素。你当前用foreach生成的输入框name格式不符合绑定要求，需要改为带索引的for循环渲染。
修复后的视图代码如下：

@model Mvc_CSS.Models.HeaderDetailModels

@using (Html.BeginForm("Index","Home", FormMethod.Post, new { id = "fdata" }))
{ 
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <table>
        <!-- 表头提到循环外，避免重复生成 -->
        <thead>
            <th>Date & Time Requested</th>
            <th>Purpose</th>
            <th>Extension</th>
            <th></th>
            <th></th>
        </thead>
        <tbody>
            @if (Model != null && Model.TBHDR.Count > 0)
            {
                // 改用for循环，通过索引访问集合元素
                for (int i = 0; i < Model.TBHDR.Count; i++)
                {
                    <tr>
                        <td>@Html.TextBoxFor(mod => mod.TBHDR[i].REQUEST_DATE)</td>
                        <td>@Html.TextBoxFor(mod => mod.TBHDR[i].PURPOSE)</td>
                        <td>@Html.TextBoxFor(mod => mod.TBHDR[i].EXT)</td>
                    </tr>
                }
            }
        </tbody>
    </table>
    <center><input type="submit" value="Submit Request" id="semail"/></center>
}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

如果需要支持动态新增行，新增行的输入框name属性需要按照索引顺序递增生成，比如新增第2行的输入框name为TBHDR[1].REQUEST_DATE，保证索引连续无中断即可正常绑定。 #

内容的提问来源于stack exchange，提问作者BlackSD