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

时间:2015-03-08 11:44:01

标签: jquery asp.net-mvc asp.net-mvc-4

我正在尝试使用steven anderson的BeginCollectionItem来添加一个文本框控件。我从他的博客 here开始了这个例子。

然而,当我点击添加按钮时,我的控件被添加到一个新的新窗口。此外,我的表单绑定到强类型模型,我的提交按钮工作在棒上。但是因为我从他的教程中添加了控件,我的提交按钮没有提交给我的控制器。以下是我的观点。

 <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());
}

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

1 个答案:

答案 0 :(得分:2)

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

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