Dropzone JS在更新面板回发后无法正常工作

Question

我正在尝试使用Dropzone JS向usercontrol添加上传功能，usercontrol显示带有两个选项卡的模式弹出窗口，Dropzone JS位于第二个选项卡中。有一些updatepanels，当父updatepanels做回发时，Dropzone JS不起作用。

这是usercontrol：

<asp:Panel runat="server" ID="mpto_MainPanel" Class="modal fade" Style="display: none;">
<asp:Panel runat="server" ID="Panel9">
    <asp:UpdatePanel runat="server" class="modal-dialog" ID="SecondaryUP" UpdateMode="Conditional" ChildrenAsTriggers="false" >
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="mpto_btn_conferma" EventName="click"/>
        </Triggers>
        <ContentTemplate>

            <div class="modal-content" style="width: 600px;">
                <asp:Panel runat="server" class="modal-header">
                    <asp:UpdatePanel runat="server">
                        <ContentTemplate>
                            <h4 class="modal-title"><%= pTitolo %></h4>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </asp:Panel>

                <div class="modal-body" style="height: 700px;">

                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#Tab_Mail" aria-controls="Tab_Mail" role="tab" data-toggle="tab">Email</a></li>
                        <li role="presentation"><a href="#Tab_Allegati" aria-controls="Tab_Allegati" role="tab" data-toggle="tab">Allegati</a></li>
                    </ul>


                    <!-- Tab panes -->
                    <div class="tab-content">
                        <%-- TAB PRINCIPALE --%>
                        <div role="tabpanel" class="tab-pane active" id="Tab_Mail" style="height: 344px;">

                            <div class="mpto_RigaForm" style="height: 140px; margin-top: 10px;">
                                <div style="height: 100px; width: 100px; float: left;">
                                    <asp:Image runat="server" ID="mpto_popup_icon" Style="height: 100px; width: 100px;" />
                                </div>
                                <div style="height: 150px; width: 440px; float: left; margin-left: 20px; display: table-cell; vertical-align: middle;">
                                    <div class="mpto_RigaForm">
                                        <div class="mpto_LabelFormSx_1">
                                            A
                                        </div>
                                        <div style="width: 400px; display: inline-block; float: left;">
                                            <asp:DropDownList ID="DropDownCampoTo" runat="server" class="form-control" Style="max-width: 900px; width: 400px;"></asp:DropDownList>
                                        </div>
                                    </div>
                                    <div class="mpto_RigaForm" style="height: 35px;">
                                        <div class="mpto_LabelFormSx_1">
                                            C.C.
                                        </div>
                                        <div style="width: 400px; display: inline-block; float: left;">
                                            <asp:TextBox runat="server" type="text" class="form-control" ID="TXT_DESTINATARIO_CC_1" placeholder="Destinatario in copia" Style="max-width: 900px; width: 400px;"></asp:TextBox>
                                        </div>
                                    </div>
                                    <div class="mpto_RigaForm" style="height: 35px;">
                                        <div class="mpto_LabelFormSx_1">
                                            C.C.
                                        </div>
                                        <div style="width: 400px; display: inline-block; float: left;">
                                            <asp:TextBox runat="server" type="text" class="form-control" ID="TXT_DESTINATARIO_CC_2" placeholder="Destinatario in copia" Style="max-width: 900px; width: 400px;"></asp:TextBox>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mpto_RigaForm" style="height: 34px;">
                                <div class="mpto_LabelFormSx_2">
                                    Oggetto
                                </div>
                                <div style="width: 480px; display: inline-block; float: left;">
                                    <asp:TextBox runat="server" type="text" class="form-control" ID="TXT_OGGETTO" placeholder="Oggetto (Obbligatorio)" Style="max-width: 900px; width: 480px;"></asp:TextBox>
                                </div>
                            </div>
                            <div class="mpto_RigaForm" style="height: 150px;">
                                <div class="mpto_LabelFormSx_2">
                                    Corpo
                                </div>
                                <div style="width: 480px; display: inline-block; float: left;">
                                    <asp:TextBox runat="server" type="text" class="form-control" ID="TXT_CORPO" TextMode="MultiLine" placeholder="Corpo della mail (Obbligatorio)" Style="max-width: 900px; max-height: 900px; width: 480px; height: 150px;"></asp:TextBox>
                                </div>
                            </div>
                        </div>
                        <%-- TAB ALLEGATI --%>
                        <div role="tabpanel" class="tab-pane" id="Tab_Allegati" style="height: 344px;">
                            <div class="mpto_RigaForm" style="height: 120px; margin-top: 10px;">
                                <div style="height: 100px; width: 100px; float: left;">
                                    <asp:Image runat="server" ID="mpto_popup_icon2" Style="height: 100px; width: 100px;" />
                                </div>
                                <div style="height: 100px; width: 440px; float: left; margin-left: 20px; display: table-cell; vertical-align: middle;">
                                    <div class="mpto_RigaForm">
                                        <br />
                                        <br />
                                        Qui è possibile aggiungere eventuali allegati alla mail.<br />
                                        <strong>Ti ricordo che l'offerta viene allegata automaticamente!</strong>
                                    </div>
                                </div>
                            </div>


                            <div class="mpto_RigaForm" style="height: 45px;">
                                <div class="mpto_LabelFormSx_2">
                                    Allegati
                                </div>
                                <div style="width: 450px; display: inline-block; float: left; height: 300px;">
                                    <asp:UpdatePanel UpdateMode="Conditional" ChildrenAsTriggers="true"  runat="server" ID="UpdatePanel1" style="width: 450px; display: inline-block; float: left; height: 300px;">
                                        <ContentTemplate>
                                            <div id="my-awesome-dropzone" class="dropzone">
                                                <div class="fallback">
                                                    <input name="file" type="file" multiple="multiple" runat="server" />
                                                    <input name="btnUpload" type="submit" /><br />
                                                    <br />
                                                    <asp:Label ID="lblFallbackMessage" runat="server" />
                                                </div>
                                            </div>

                                            <div style="height: 40px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px;">
                                                <br />
                                                Elenco files appena caricati:


                                            </div>

                                            <div id="foo" style="height: 270px; overflow-y: auto; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5em">
                                            </div>

                                            <asp:Button ID="Button2" runat="server"  Text="Button" />

                                        </ContentTemplate>
                                        <Triggers>
                                            <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
                                        </Triggers>
                                    </asp:UpdatePanel>
                                </div>
                            </div>

                            <div class="mpto_RigaForm" style="height: 150px;">
                                <asp:TextBox runat="server" ID="TXT_ELENCO_FILES" Style="display: non;"></asp:TextBox>
                                <input id="Button1" type="button" value="Cancella lista Allegati" class="btn btn-default" style="margin-top: 10px; margin-left: 80px;" onclick="CancellaLista();" />
                            </div>


                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <asp:Label runat="server" ID="mpto_LabelMsg" Text="" Width="300px" Style="text-align: left;"></asp:Label>
                    <asp:Button runat="server" ID="mpto_btn_conferma" type="button" Text="Conferma" CssClass="btn btn-success" />
                    <asp:Button runat="server" ID="mpto_btn_annulla" type="button" Text="Annulla" CssClass="btn btn-default" />
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

<uc1:MyPopup runat="server" ID="MyPopup" />

这是打开/关闭模式和设置Dropzone JS的javascript代码：

<script type="text/javascript">
function openModal_popup_trasmettiofferta() {
    $('#<%= mpto_MainPanel.ClientID%>').modal({
        keyboard: true,
        show: true,
        backdrop: 'static'
    })
};

function closeModal_popup_trasmettiofferta() {
    $('#<%= mpto_MainPanel.ClientID%>').modal('hide');
    $('.modal-backdrop').remove();
};


$('#<%= mpto_MainPanel.ClientID%>').on('shown.bs.modal', function () {
    $('#<%= DropDownCampoTo.ClientID%>').focus();
});



function AggiungiFileAllaLista(filename) {
    var ActTest = document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value;

    if (ActTest != "") {
        document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value = ActTest + ';' + filename;
    }
    else {
        document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value = ActTest + filename;
    }

    // clear file
    var fileInputElement = sender.get_inputFile();
    fileInputElement.value = "";

}


function CancellaLista() {
    document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value = "";
}




var divok = "<div style='display:block; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size:14px; color:green;'>"
var divnok = "<div style='display:block; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size:14px; color:red;'>"
var closediv = "</div>"

test();

//$(document).ready(function () {
function test() {

    Dropzone.options.myAwesomeDropzone = {
        maxFilesize: 20,
        maxFiles: 1,
        url: "../Controlli/PopupTrasmettiOfferta/Handler.ashx?path=StoredFiles/Temp",
        addRemoveLinks: true,
        dictResponseError: 'Server not Configured',
        dictFileTooBig: "Il file che stai cercando di caricare è di {{filesize}}MB mentre la dimensione massima accettabile è {{maxFilesize}}MB",

        createImageThumbnails: false,
        acceptedFiles: "",
        init: function () {

            var self = this;
            // config
            self.options.addRemoveLinks = true;
            self.options.dictRemoveFile = "Cancella";

            //New file added
            self.on("addedfile", function (file) {
                //console.log('new file added ', file);
            });
            // Send file starts
            self.on("sending", function (file) {
                console.log('upload started', file);
                $('.meter').show();
            });

            // File upload Progress
            self.on("totaluploadprogress", function (progress) {
                //console.log("progress ", progress);
                $('.roller').width(progress + '%');
            });

            self.on("queuecomplete", function (progress) {
                $('.meter').delay(999).slideUp(999);
            });

            // On removing file
            self.on("removedfile", function (file) {
                //console.log(file);
            });

            // On success 
            self.on("success", function (file) {
                setTimeout(function () {
                    self.removeAllFiles();
                    AggiungiFileAllaLista(file.name);
                    var a = document.getElementById('foo').innerHTML;
                    document.getElementById('foo').innerHTML = a + divok + ' - ' + file.name + closediv;
                }, 500);
            });

            // On error
            self.on("error", function (file, response) {
                setTimeout(function () {
                    //self.removeAllFiles();
                    //var a = document.getElementById('foo').innerHTML;
                    //document.getElementById('foo').innerHTML = a + divnok + ' - ' + file.name + '</br> (' + response + ')' + closediv;
                }, 500);
            });


        }
    }
    //)

};

这是我用来调用show和hide modal并配置他的控件的vb代码：

        DropDownCampoTo.SelectedValue = "Non Specificato"
        mpto_LabelMsg.ForeColor = Drawing.Color.Red
        mpto_LabelMsg.Text = ""
        TXT_DESTINATARIO_CC_1.Text = String.Empty
        TXT_DESTINATARIO_CC_2.Text = String.Empty
        TXT_OGGETTO.Text = String.Empty
        TXT_CORPO.Text = String.Empty

        TXT_ELENCO_FILES.Text = String.Empty
        ' ScriptManager.RegisterStartupScript(Page, Page.GetType(), "RefreshFileList", "AggiornaListaFile();", True)

        pTitolo = "Invia offerta via Email"
        mpto_btn_conferma.Text = "Invia Email"
        mpto_popup_icon.ImageUrl = ResolveUrl("../../imgs/email-icon.png")
        mpto_popup_icon2.ImageUrl = ResolveUrl("../../imgs/clip_icon.png")



        DropDownCampoTo.Items.Clear()
        DropDownCampoTo.Items.Add(New ListItem With {.Text = "Non specificato", .Value = "Non Specificato"})

        Using mydb As New Model_Offerte.DB_Offerte
            Dim result As New List(Of Model_Offerte.OttieniDatiOfferta_Result)

            result = mydb.OttieniDatiOfferta(pIdOfferta).ToList

            Using mydb2 As New DB_Agenda
                Dim result2 As New List(Of OttieniElencoPersonaggiAzienda_Result)
                result2 = mydb2.OttieniElencoPersonaggiAzienda(result.Item(0).ID_AZIENDA).ToList

                Dim Tool As New RegexUtilities
                For Each el In result2
                    If Tool.IsValidEmail(el.EMAIL) Then DropDownCampoTo.Items.Add(New ListItem With {.Text = el.NOME & " " & el.COGNOME & " (" & el.EMAIL & ")", .Value = el.EMAIL})
                    If Tool.IsValidEmail(el.EMAIL2) Then DropDownCampoTo.Items.Add(New ListItem With {.Text = el.NOME & " " & el.COGNOME & " (" & el.EMAIL2 & ")", .Value = el.EMAIL2})
                Next
            End Using
        End Using

        SecondaryUP.Update()

        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "LaunchTasmettiOffertaPopup", "openModal_popup_trasmettiofferta();", True)

如果我评论SecondaryUP.Update()并尝试显示模态弹出窗口，Dropzone JS可以正常工作，直到回发SecondaryUP更新面板（例如mpto_btn_conferma）。如果我取消注释SecondaryUP.Update（）Dropzone JS不起作用。 你可以帮帮我吗？

这是注释的结果（Dropzone js可以工作，但其余的模态弹出窗口没有更新（例如图片丢失）： dropzone js works

这是没有评论的结果（Dropzone js不起作用，但模态的其余部分正确更新（图像存在） dropzone js doesn't works