将标签值从 C# 传递到引导模式

Pass label value from C# to bootstrap modal

本文关键字：模式 标签      更新时间：2023-09-26

>我正在使用一个引导模式弹出窗口，在模态内使用 Ajax 同步文件上传。当用户浏览文件时，将触发 C# 代码。

唯一的问题是模态中有一个标签，它应该告诉用户上传是否正常以及原因（来自 c# 代码）并且标签的值始终为 null！

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

谢谢！

引导模式代码：

<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# 代码：

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";
    }
}

实际上，看着它，你有一个标签，你可以在介入时设置它，但你没有办法让界面更新以反映变化。您需要做的是将标签包装在 UpdatePanel 中，以便在设置文本值后标签可以更新视图。

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

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

对于您正在尝试做的事情，OnClientUploadComplete 将是最好的使用方法。现在，由于 AFU 使用 iFrame，因此在其回发序列期间设置为控件的任何值实际上都位于与页面不同的帧中。这意味着简单地更新标签甚至更新 UpdatePanel 将不起作用，因为它不是页面中的当前框架。相反，您需要告诉当前帧要做什么，在这种情况下，只需更新标签，我们可以将值存储在会话中。会话按客户端浏览器维护，因此来自 AFU 的 iFrame 将使用与当前视图相同的会话。

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

最后一件事是触发按钮单击。使用 OnClientUploadComplete，我们调用一个 JavaScript 函数，该函数将触发按钮的回发事件，从而触发按钮 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 控件缩短一些文件名和保存引用。用//SHORTED 注释了这些行以显示它：

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
    }
}
相关文章：