Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I did this with help of Backbone (for file uploader) where i insert template whenever user click #addButton View:</p> <pre><code>@using Telerik.Web.Mvc.UI @{ ViewBag.Title = "FileUpload"; Layout = "~/Areas/Administration/Views/Shared/_AdminLayout.cshtml"; } &lt;div id="fileViewContainer" class="span12"&gt; &lt;h2&gt;File upload&lt;/h2&gt; @foreach(var fol in (List&lt;string&gt;)ViewBag.Folders){ &lt;span style="cursor: pointer;" class="uploadPath"&gt;@fol&lt;/span&gt;&lt;br/&gt; } @using (Html.BeginForm("FileUpload", "CentralAdmin", new { id = "FileUpload" }, FormMethod.Post, new { enctype = "multipart/form-data" })) { &lt;label for="file1"&gt;Path:&lt;/label&gt; &lt;input type="text" style="width:400px;" name="destinacionPath" id="destinacionPath"/&gt;&lt;br /&gt; &lt;div id="fileUploadContainer"&gt; &lt;input type="button" class="addButton" id="addUpload" value="Add file"/&gt; &lt;input type="button" class="removeButton" id="removeUpload" value="Remove file"/&gt; &lt;/div&gt; &lt;input type="submit" value="Upload" /&gt; } &lt;/div&gt; &lt;script type="text/template" id="uploadTMP"&gt; &lt;p class="uploadp"&gt;&lt;label for="file1"&gt;Filename:&lt;/label&gt; &lt;input type="file" name="files" id="files"/&gt;&lt;/p&gt; &lt;/script&gt; @{ Html.Telerik().ScriptRegistrar().Scripts(c =&gt; c.Add("FileUploadInit.js")); } </code></pre> <p>FileUploadInit.js</p> <pre><code>$(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") }); } }); </code></pre> <p>In Controller you keep your code</p> <p>I Hope this will help.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload