javascript - 为什么我的 Javascript 函数在加载时运行

Question

我的“创建” View 上有此代码。

<div class="col-lg-6">
        <!--Ingredients-->
        @Html.LabelFor(model => model.Ingredients, htmlAttributes: new { @class = "control-label col-md-2" })<br />
        <textarea class="form-control" id="ingredients" rows="20" onsubmit="PopulateIngredients()"></textarea>
    </div>


    <script>
        function PopulateIngredients()
        {
            var ingredientArray = document.getElementById('ingredients').val().split('/n');
            if (ingredientArray.length !=0)
            {
                for (i = 0; i < ingredientArray.length; i++)
                {
                    @(Model.Ingredients).Add(ingredientArray[i]);
                }

            }

        }
    </script>

加载页面时，我在脚本中收到错误消息“对象引用未设置到对象的实例”。在这一行；

    @(Model.Ingredients).Add(ingredientArray[i]);

存在两个问题。一是我应该看到 model.Ingredients IEnumerable 对象。二是他的脚本在单击提交按钮之前不应运行。

我做错了什么？我必须使用文本区域进行输入，因此我必须将其拆分并将其添加到成分列表中，然后再将其发送回 Controller ，在 Controller 中将其作为成分对象列表进行处理。为了简洁起见，我没有包括类(class)。

Answer 1

@(Model.Ingredients).Add(ingredientArray[i]);

是一个服务器端脚本，将在准备 View 时执行。所以当你加载页面时就会执行这一行。这就是为什么您会收到 null reference 错误，因为 Model.Ingredients 尚未初始化。