jQuery拖放-使用foreach创建的多个放置区域

时间:2018-12-19 16:40:55

标签: jquery asp.net-mvc razor

我正在尝试通过在Web应用程序中进行拖放操作来上传文件-但是,我已经通过foreach创建了多个放置区域...

            @foreach (var addin in Model.Addins)
            {
                <div class="manageContainer" data-id="@addin.AddinId.ToString()">
                    <div class="row" style="margin-top: 16px;">
                        <div class="col-xs-12 col-sm-3">
                            <h5>@addin.AddinName</h5>
                        </div>
                        <div class="col-xs-12 col-sm-7">
                        </div>
                        <div class="col-xs-12 col-sm-2" style="text-align: right;">
                            <label type="label" class="switch">
                                <input type="checkbox" class="subscribe-button" id="subscribeAddin" value="@addin.IsSubscribed" @(addin.IsSubscribed ? "checked" : "") />
                                <span class="slider round"></span>
                            </label>
                        </div>
                        <div class="col-xs-12 col-sm-7 configuration">
                            <br />
                            <a class="saveAnalyticsButton config-button" nohref=nohref onclick="Download(this)" data-id="@addin.AddinName">Download Configuration</a>
                            <div class="col-xs-12 col-sm-7 dropArea" id="dropArea">
                                Drop your configuration here
                            </div>
                        </div>                                
                    </div>
                    <br />
                </div>
                <br />
            }

我可以成功地将文件发送到我的控制器-但不能包含我需要的所有数据!我需要获取要上传其配置文件的插件的ID(作为数据ID存储在“ manageContainer”中),并将其与文件一起发送给控制器。

这是我当前尝试获取此ID的方式,虽然我肯定可以使用,但不是...

$(function () {  
    $('.dropArea').filedrop({
        url: "/Manage/UploadConfig",
        allowedfiletypes: ['text/xml'],
        allowedfileextensions: ['.xml'],
        paramname: 'config',
        data: {
            addinId: function () {
                var id = $(this).closest('.manageContainer').attr("data-id");
                return id;
            }
        },
        maxfiles: 1,
        maxfilesize: 5, // in MB
        dragOver: function () {
            $(this).addClass('active-drop');
        },
        dragLeave: function () {
            $(this).removeClass('active-drop');
        },
        drop: function () {
            $("#loading").show();
            $(this).removeClass('active-drop');
        },
        afterAll: function (e) {
            $(this).html('config uploaded successfully');
        },
        uploadFinished: function (i, file, response, time) {
            $("#loading").hide();
        }
    });
});

我整个上午一直在工作,现在全神贯注。任何帮助将不胜感激!

0 个答案:

没有答案