Dynamically adding items into view and posting back to controller (ASP.NET MVC 4)

Question

I have a ASP.NET MVC 4 app with model, that contains and colection (IEnumerable or IList), i.e.:

class MyModel
{
  pu         


        

Answer 1

I did this with help of Backbone (for file uploader) where i insert template whenever user click #addButton View:

@using Telerik.Web.Mvc.UI
@{
    ViewBag.Title = "FileUpload";
    Layout = "~/Areas/Administration/Views/Shared/_AdminLayout.cshtml";
}

File upload
@foreach(var fol in (List)ViewBag.Folders){
        @fol

    }
    @using (Html.BeginForm("FileUpload", "CentralAdmin", new { id = "FileUpload" }, FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        Path:
        

        

            
            
        

        
    }


@{
    Html.Telerik().ScriptRegistrar().Scripts(c => c.Add("FileUploadInit.js"));
}

FileUploadInit.js

$(document).ready(function () {
    var appInit = new AppInit;
    Backbone.history.start();
});
window.FileUploadView = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, 'render', 'addUpload', 'removeUpload', 'selectPath');
        this.render();
    },
    render: function () {
        var tmp = _.template($("#uploadTMP").html(), {});
        $('#fileUploadContainer').prepend(tmp);
        return this;
    },
    events: {
        'click .addButton': 'addUpload',
        'click .removeButton': 'removeUpload',
        'click .uploadPath': 'selectPath'
    },
    addUpload: function (event) {
        this.render();
    },
    removeUpload: function (event) {
        $($('.uploadp')[0]).remove();
    },
    selectPath: function (event) {
        $('#destinacionPath').val($(event.target).html());
    }
});
var AppInit = Backbone.Router.extend({
    routes: {
        "": "defaultRoute"
    },
    defaultRoute: function (actions) {
        var fileView = new FileUploadView({ el: $("#fileViewContainer") });
    }
});

In Controller you keep your code

I Hope this will help.