為什么我的Javascript函數在加載時運行

Question

我的“創建”視圖上有此代碼。

<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對象。 二是在單擊提交按鈕之前，他的腳本不應該運行。

我究竟做錯了什么？ 我必須使用文本區域進行輸入，因此必須將其拆分並將其添加到成分列表，然后再將其發布回控制器，在此將其作為成分對象列表進行處理。 我不包括簡潔的課程。

Answer 1

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

是服務器端腳本，將在准備視圖時執行。 因此，此行將在您加載頁面時執行。 這就是為什么出現null reference錯誤的原因，因為尚未初始化Model.Ingredients 。

Answer 2

看起來像@Model == null。 您必須將模型實例傳遞給視圖：

return View(model);

而且，您不能將JavaScript客戶端代碼與服務器端Razor代碼混合在一起（以您的方式進行）。 它不會工作。

這可能會有所幫助： 混合使用Razor和Javascript代碼或混合使用JavaScript和Razor語法