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

Question

我正在尝试使用 steven anderson 的 BeginCollectionItem 动态添加文本框控件。我从他的博客 here 中的示例开始。

但是，当我单击添加按钮时，我的控件被添加到一个新的 window。此外，我的表单绑定到强类型模型并且我的提交按钮可以正常工作。但是由于我从他的教程中添加了控件，所以我的提交按钮没有提交到我的控制器。以下是我的看法。

 <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>


}

和我的控制器

public ViewResult GetNewRecipeIngredient()
{
 return View("~/Views/Shared/EditorTemplates/JobRequirement.cshtml", new JobRequirement());
}

当我点击添加另一个时，它会调用 GetNewRecipeIngredient 控制器并在新 window 上添加一个新的文本框。我期待它就在我的 link 之上添加另一个。我怀疑我的 JQuery 代码，我无法理解清楚。任何帮助将不胜感激。

Answer 1

您的脚本 $("#addItem").click(function () { 位于带有 id="addItem" 的元素之前的视图中（脚本从不运行，因此执行默认的 link）。您需要将其定位在页面底部（紧接在结束 <body> 标记之前，或者将其包装在 document.ready()

中

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

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

Adding Dynamic textboxes using BeginCollectionItem asp.net mvc --Steven Anderson

asp.net-mvc

jquery

asp.net-mvc-4