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

Question

I am trying to add a textboxes control dymically using steven anderson's BeginCollectionItem. I follwed the example from his blog here for a start.

However, when i click the add button, my control is added to a new fresh window. Moreover , my form is bind to strongly typed model and my submit button works on stick. But since i added the control from his tutorial, my submit button is not submitting to my controller. Below is my view.

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


}

and my controller

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

When i click the addanother, it calls the GetNewRecipeIngredient controller and add a new textbox on a fresh window. I was expecting it right on top of my link add another. I am suspecting my JQuery code and i am not able to understand clear. Any help would appreciated.

score 2 · Accepted Answer · 2015-03-08T12:27:35.933

2

Your script $("#addItem").click(function () { is located in the view before the element with id="addItem" (the script never runs so the default link is executed). You need to either locate it at the bottom of the page (immediatedly before the closing <body> tag, or wrap it in document.ready()

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

edited Mar 08 '15 at 12:27

answered Mar 08 '15 at 11:57

in my view that has a style page. Do i add it in my style page ? or just at the end of my view page ? My view has no body tag . Its rendered in a layout page body. – Nuru Salihu Mar 08 '15 at 12:16
What do you mean _style page_? I assume you mean a layout page? If your not understanding this or do not have `@RenderSection("scripts", required: false)` in your layout, your do not understand how to generate a view properly, so for the moment, just wrap the script in `document.ready()` - see edit to answer. – Mar 08 '15 at 12:24
thanks for the response. Your answer works for me. Also I had to change `$("#new-recipeingredients").append(html);` to `$(".new-recipeingredients").append(html);` with the dot. But my Submit is not calling the controler. It put the mouse focus on a date textboxt control on the page and without submitting. – Nuru Salihu Mar 08 '15 at 16:16
I found out why my submit wasn't going also. It turns out I violate the model validation rules by leaving a required field unfilled. I am going through alot bcos its my first . Thank you . – Nuru Salihu Mar 08 '15 at 16:52
1

If you are dynamically adding new items to the DOM which have validation attributes, you need to re-parse the validation each time (refer [this answer](http://stackoverflow.com/questions/26542509/validate-dynamically-added-fields/26542591#26542591)) – Mar 09 '15 at 00:52
Oh thats great sir. So `$('form').data('validator', null); $.validator.unobtrusive.parse($('form'));` . Do i need to replace form parameter with my form name ? or how do i call it ? I am very fresh just learning the JQuery . Some of the term not even sure what they are call and is having trouble searching good tuts or implementing them most of the time. Also from the method, what happened if i have more than one form in my page ? does it trigger on each form ? – Nuru Salihu Mar 09 '15 at 08:33
1

If you only have one form, then `$('form')...` is fine. If you have multiple forms, give them an `id` attribute - e.g. `@using (Html.BeginForm(...., new { id= "myform" })` and then use `$('#myform')...` to trigger validation for that particular form. – Mar 09 '15 at 08:44
Thank you sir. Its very clear and thanks to u have learnt alot. After following the steven anderson tut. He gave example for a delete button. That is you can add and delete button. My delete button is not working. I am thinking may be my Jquery code has fault. I will update my delete code sir. Pls where do i go wrong. ? – Nuru Salihu Mar 09 '15 at 09:05
You will need to ask a new question and include the relevant code for the delete button and the controller your posting back to. – Mar 09 '15 at 09:08

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

1 Answers1