Jquery 使用BeginCollectionItem asp.net mvc添加动态文本框--Steven Anderson

我试图使用steven anderson的BeginCollectionItem动态添加一个TextBox控件。我从他博客上的例子开始

但是，当我单击“添加”按钮时，我的控件将添加到一个新的新窗口中。此外，我的表单绑定到强类型模型，我的submit按钮在stick上工作。但是由于我从他的教程中添加了控件，我的提交按钮没有提交到我的控制器。以下是我的观点

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>     
<script src="@Url.Content("~/Content/js/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
    $("#addItem").click(function () {
        $.ajax({
            url: this.href,
            cache: false,
            success: function (html) { $("#new-recipeingredients").append(html); }
        });
        return false;
    });
</script>
@using (Html.BeginForm("SaveJob", "Employer", FormMethod.Post, new { @class = "form", @style = " border-top: none; " }))
{
...

  <fieldset>
     <legend>Job Requirement</legend>
       <div class="new-recipeingredients">
        @foreach(var item in Model.JobRequirement)
        {
           @Html.EditorFor(m => item)
        }
      </div>
    <div style="padding: 10px 0px 10px 0px">

     @Html.ActionLink("Add another...", "GetNewRecipeIngredient", null, new { id = "addItem" }) 
     </div>

 </fieldset>


}

当我单击AddOther时，它调用GetNewRecipeInCredit控制器并在新窗口上添加一个新的文本框。我期待它就在我的链接顶部添加另一个。我怀疑我的JQuery代码，我无法理解清楚。任何帮助都将不胜感激

您的脚本

$（“#addItem”）。单击（function（）{

位于视图中元素前面，带有

id=“addItem”

（脚本从未运行，因此会执行默认链接）。您需要将其定位在页面底部（立即在关闭

标记之前），或者将其包装在

文档中。ready（）

---

在我的视图中，有一个样式页。我是将其添加到我的样式页中吗？还是仅添加到我的视图页的末尾？我的视图没有正文标记。它在布局页正文中呈现。你说的是样式页是什么意思？我想你指的是布局页？如果你不理解这一点或没有

@RenderSection（“脚本”，必填项：false）

在您的布局中，您不知道如何正确生成视图，因此目前，只需将脚本包装在

document.ready（）

-请参阅编辑以回答。感谢您的回答。您的回答对我有效。此外，我还必须更改

$（“#新收件人”）。附加（html）

到

$（“.new recipeingredients”）。附加（html）；

带点。但是我的提交并没有调用控件。它将鼠标焦点放在页面上的日期textboxt控件上，而不提交。如果要向DOM动态添加具有验证属性的新项，则每次都需要重新解析验证（请参阅）如果只有一个表单，则

$（“表单”）如果你有多个表单，给它们一个
id
属性，例如
@使用（Html.BeginForm（..，new{id=“myform”}）
然后使用
$（'#myform'）…
触发对特定表单的验证。
public ViewResult GetNewRecipeIngredient()
{
 return View("~/Views/Shared/EditorTemplates/JobRequirement.cshtml", new JobRequirement());
}

$( document ).ready(function() {
  $("#addItem").click(function () {
    ....
  });
});