CODEWITHSUNDEEP
javascriptc#jqueryasp.netasp.net-mvc
MVCNovice
MVCNovice

Reputation: 33

Dynamically adding controls to a form in ASP.NET MVC5

OK, I've looked around and while I've found a few spots that offer some useful suggestions, none are quite right as I can tell. I'm making a book database site on ASP.NET MVC 5. For the edit site to edit individual books, my form contains a list of textboxes containing the names of all the book's authors. I want to be able to add or remove these dynamically, so that with a click of a button a new empty box will be added or the current box will be removed. I tried using jQuery, writing a pair of functions as follows:

    function addAuthor() {
        var div = $('<div class="form-group author-input"></div>');
        var cnt = $('<label for="Author" class="control-label col-md-2">Author</label>');
        div.append(cnt);
        cnt = $('<div class="col-md-10"></div>');
        cnt.append('<input type="text" name="authorList" />');
        div.append(cnt);
        div.append('<button class="glyphicon-plus-sign" onclick="addAuthor"></button>');
        div.append('<button class="glyphicon-minus-sign" onclick="removeAuthor"></button>');
        $(this).parent().after(div);
    }

    function removeAuthor() {
        if ($('#AuthorSet > div').length > 1)
            $('#AuthorSet').remove($(this).parent());
        else
            alert("Must have at least one author");
    }

The part of the view being modified looks like this:

    <div id="AuthorSet">
        @foreach (Bookshelf.Models.Author auth in Model.Authors.OrderBy(a=>a.LastName)
                                                               .ThenBy(a=>a.FirstMidName))
        {
            <div class="form-group author-input">
                @Html.Label("Author", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBox("authorList", auth.FullName)
                </div>
                <button class="btn btn-default glyphicon-plus-sign text-center" onclick="addAuthor">+</button>
                <button class="btn btn-default glyphicon-minus-sign text-center" onclick="removeAuthor">-</button>
            </div>
        }
    </div>

EDIT: I accidentally posted the wrong version a few minutes ago; I had a version without an onclick fuction but instead used a class to set it in jQuery, and I accidentally posted that version earlier. This has been corrected. However, this is not working at all. Any time I click on the buttons it sends me to the post method as if I'd clicked the "submit" button at the end of the form. Is there any way I can make this dynamic list of textboxes using just MVC 5 and jQuery? Is there a way to do it with AJAX?

The previous comment to add a preventDefault command to the functions works for a single addition, but if I try to add more than one new author to the list it still submits instead of just calling the function. I'm sorry if there are a lot of problems with my code as someone said, I'm still new and learning.

Upvotes: 2

Views: 1756

Answers (1)

StriplingWarrior
StriplingWarrior

Reputation: 156459

By default, buttons will cause a form submit. You need to prevent the default behavior in your click handler like so:

function addAuthor(e) {
    e.preventDefault();
    ...
}

Upvotes: 3

Related Questions