Question

我在模态中使用带有Ajax同步文件上传的bootstrap模式弹出窗口。当用户浏览文件时，C＃代码被触发。

唯一的问题是模态中有一个标签应该告诉用户上传是否正常以及为什么（来自c＃代码）和标签的值总是为空！

为什么？
我该如何解决这个问题？

谢谢！

bootstrap模态代码：

<div class="modal-content">
<div class="modal-header">
    <h4 class="modal-title" id="myModalLabel1">Upload Your Photo</h4>
</div>
<Myajax:ToolkitScriptManager ID="scriptManager1" runat="server" />

<div class="btn btn-file">
    <Myajax:AsyncFileUpload ID="FileUpload1" 
        CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern" UploadingBackColor="#CCFFFF"
        ThrobberID="imgLoad" OnUploadedComplete="UploadFile"/><br />
    <asp:Label ID="lblUpload" runat="server" class="text-success pull-left" Text="" ></asp:Label>
</div>

<div class="modal-footer">
    <asp:Image ID="imgLoad" CssClass="pull-left" style="width: 35px; height: 35px" runat="server" ImageUrl="Images/loading2.gif" />
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button id="btnSubmit" runat="server" type="button" class="btn btn-default" onserverclick="UploadFile">Upload</button>
</div>

c＃code：

protected void UploadFile(object sender, EventArgs e)
{
    string fileName = Server.HtmlEncode(FileUpload1.PostedFile.FileName);
    string extension = System.IO.Path.GetExtension(fileName);

    if (extension == ".jpeg")
    {
        string fn = System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName);
        string SaveLocation = Server.MapPath("Data") + "\\" + fn;
        try
        {
            FileUpload1.PostedFile.SaveAs(SaveLocation);
            Response.Write("The file has been uploaded.");
        }
        catch (Exception ex)
        {
            lblUpload.Text = "Somthing";
        }
    }
    else
    {
        lblUpload.Text = "Only jpeg is allow";
    }
}

Answer 1

实际上，查看它时，您有一个标签，您可以在进入时设置它，但是您无法更新界面以反映更改。您需要做的是将标签包装在UpdatePanel中，以便标签可以在设置文本值后更新视图。

更新对以上信息感到抱歉。让我详细介绍一下，因为AsyncFileUpload是一个奇怪的野兽。我回去看看我做了什么，因为我正在使用jCrop在上传之前创建一个图像裁剪器。

AsyncFileUpload（从此处出来AFU）允许您指定要在客户端上使用事件执行的脚本。我只能假设这是因为AFU实际上在幕后使用iFrame来对图像数据进行异步发布。如果您在周围搜索，您会发现人们在AFU之前使用这种方法来实现相同的目标。使用客户端事件触发器，您可以在JavaScript中调用执行OnClientUploadStarted，OnClientUploadComplete和OnClientUploadError的函数;您将JavaScript函数指定为值。

对于您要执行的操作，OnClientUploadComplete将是最佳使用方法。现在，因为AFU使用iFrame，在其PostBack序列期间设置为控件的任何值实际上都在与页面不同的帧中。这意味着只需更新标签甚至更新UpdatePanel都不会起作用，因为它不是页面中的当前帧。相反，您需要告诉当前帧要做什么，在这种情况下只更新标签，我们可以将值存储在会话中。每个客户端浏览器都会维护会话，因此AFU的iFrame将使用与当前视图相同的会话。

在处理UploadedComplete事件的AFU UploadFile方法中，我们将会话变量设置为标签中所需的文本。然后，我们需要触发UpdatePanel进行刷新。一种简单的方法是隐藏UpdatePanel中的按钮，并使用AsyncPostBackTrigger使其成为触发器。在按钮的OnClick事件中，将标签设置为您从AFU事件设置的会话密钥的值。

最后一件事是触发按钮点击。使用OnClientUploadComplete，我们调用一个JavaScript函数，该函数将触发按钮的PostBack事件，从而触发按钮Click事件，并最终触发UpdatePanel更新。

以下是一些与您的示例一起使用的代码： HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function _panelRefresh() {
            __doPostBack('<%= panelUpdate.ClientID%>', '');  // client id of button control
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="scriptMan1" EnablePartialRendering="true"></asp:ScriptManager>
        <div>
            <asp:AsyncFileUpload ID="FileUpload1"
                CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Traditional" UploadingBackColor="#CCFFFF"
                ThrobberID="imgLoad" OnUploadedComplete="UploadFile" OnClientUploadComplete="_panelRefresh" />
            <asp:UpdatePanel runat="server" ID="updatePanel1" ChildrenAsTriggers="true">
                <ContentTemplate>
                    <asp:Button runat="server" ID="panelUpdate" OnClick="panelUpdate_Click" style="display:none;" />                    
                    <asp:Label ID="lblUpload" runat="server" class="text-success pull-left" Text=""></asp:Label>
                </ContentTemplate>
                <Triggers><asp:AsyncPostBackTrigger ControlID="panelUpdate" EventName="Click" /></Triggers>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

代码背后：

protected void UploadFile(object sender, EventArgs e) {
    string fileName = Server.HtmlEncode(FileUpload1.PostedFile.FileName);
    string extension = System.IO.Path.GetExtension(fileName);

    if (extension == ".jpeg") {
        string fn = System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName);
        string SaveLocation = Server.MapPath("Data") + "\\" + fn;
        try {
            FileUpload1.PostedFile.SaveAs(SaveLocation);
            Response.Write("The file has been uploaded.");
        } catch (Exception ex) {
            Session["uploadLabel"] = "Something";// use session to store label text
        }
    } else {
        Session["uploadLabel"] = "Only jpeg is allow";  // use session to store label text
    }
}
protected void panelUpdate_Click(object sender, EventArgs e) {
    lblUpload.Text = Session["uploadLabel"].ToString() ?? "";   // session value or empty if session is null
}

顺便提一下，您可以使用AFU控件缩短部分FileName和Save引用。使用// SHORTENED对行进行评论以显示它：

protected void UploadFile(object sender, EventArgs e) {
    string extension = System.IO.Path.GetExtension(FileUpload1.FileName);// SHORTENED

    if (extension == ".jpeg") {
        string fn = FileUpload1.FileName;   // SHORTENED
        string SaveLocation = Server.MapPath("Data") + "\\" + fn;
        try {
            FileUpload1.SaveAs(SaveLocation);   // SHORTENED
            Response.Write("The file has been uploaded.");
        } catch (Exception ex) {
            Session["uploadLabel"] = "Something";// use session to store label text
        }
    } else {
        Session["uploadLabel"] = "Only jpeg is allow";  // use session to store label text
    }
}

将标签值从C＃传递给bootstrap模式

1 个答案: