Question

我目前遇到的问题是，当我在updatepanel1中使用asyncfileupload和按钮上传图像时，整个页面刷新而不是updatepanel2中的图像标记仅重新加载。如何确保updatepanel2中的图像标记仅重新加载而不是整个页面？帮我解决这个问题。谢谢！我的标记代码如下所示。

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<script type="text/javascript" language="javascript">
    function StartUpload(sender, args) {
        var filename = args.get_fileName();
        var path = args.get_path();
        if (filename != "") {
            // code to get File Extension..
            var arr1 = new Array;
            arr1 = filename.split("\\");
            var len = arr1.length;
            var img1 = arr1[len - 1];
            var filext = img1.substring(img1.lastIndexOf(".") + 1);


            // Checking Extension
            if (filext == "jpg" || filext == "JPG") {
                $get("<%=lblUpload.ClientID %>").innerHTML = "";
                $get("<%=btnUpload.ClientID %>").disabled = false;
                return true;
            }
            else {
                $get("<%=lblUpload.ClientID %>").innerHTML = "Only .jpg and .JPG image allowed.";
                $get("<%=btnUpload.ClientID %>").setAttribute('disabled', 'disabled');
                return false;
            }
        }
    }
</script>

<asp:ScriptManager ID="ScriptManager1" 
        runat="server">
    </asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
<table width="75%" align="center">
    <tr>
        <td colspan="5" class="auto-style1">
            <h2 align="center">My Profile</h2>
            <br />
        </td>
    </tr>

  <tr> 
        <td id ="memberprofileimage" align="center" class="auto-style2">

            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Image ID="Image1" runat="server" Height="200" src="image/defaultProfile.jpg" Width="200" />
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
            <br />
            <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" 
            CompleteBackColor="Lime" UploaderStyle="Modern" 
            ErrorBackColor="Red" ThrobberID="Throbber" 
            UploadingBackColor="#66CCFF"
            OnClientUploadStarted="StartUpload"
            align="center" />
            <br />
            <br />
            <asp:Label ID="Throbber" runat="server" Style="display: none">
            <img src="image/indicator.gif" alt="loading" />
            </asp:Label>
            <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />
            <br />
            <br />
            <asp:Label ID="lblUpload" runat="server" Text=""></asp:Label>
        </td>

        <td id ="memberprofiledetail" align="left" width="50%">
           <b> Full Name 
            <br />
            </b>
            <asp:TextBox ID="txtFullName" runat="server" ReadOnly="True" Width="270px"></asp:TextBox>
            <br />

            <b>Contact </b>&nbsp;<br />
            <asp:TextBox ID="txtContact" runat="server" ReadOnly="True" Width="160px"></asp:TextBox>
            <br />

            <b>Address 
            <br />
            </b>
            <asp:TextBox ID="txtAddress" runat="server" ReadOnly="true" style="overflow:auto;" TextMode="MultiLine"></asp:TextBox>
            <br />

            <b>Email 
            <br />
            </b>
            <asp:TextBox ID="txtEmail" runat="server" ReadOnly="True" Width="270px"></asp:TextBox>
            <br />
            <asp:RegularExpressionValidator ID="revContact" runat="server"  
            ControlToValidate="txtContact" 
            ValidationExpression="^[0-9]{8}$" 
            ErrorMessage="Please enter your Contact Number."  ForeColor="Red">
            </asp:RegularExpressionValidator>
            <br />
            <asp:RequiredFieldValidator ID="rfvAddress" runat="server" 
            ErrorMessage="Please enter your Address." 
            ControlToValidate="txtAddress" ForeColor="Red">
            </asp:RequiredFieldValidator>
            <br />
            <asp:RegularExpressionValidator ID="revEmail" runat="server"  
            ControlToValidate="txtEmail" 
            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 
            ErrorMessage="Please enter a valid Email."  ForeColor="Red">
    </asp:RegularExpressionValidator>
            <br />
            <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
            <br />
            <asp:Button ID="BtnDisplay" runat="server" Text="Edit profile" CausesValidation="False" OnClick="BtnDisplay_Click" />
            <br />
            <br />       
            <asp:Button ID="btnUpdate" runat="server" Text="Update Profile" OnClick="btnUpdate_Click" Visible="False" />
            <br />
            <br />
            <asp:Button ID="btnChangePassword" runat="server" Text="Change Password" OnClick="btnChangePassword_Click" CausesValidation="False" />
        </td>     
    </tr>   
</table>   
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="btnUpload" />
    </Triggers>
    </asp:UpdatePanel>
</asp:Content>

Answer 1

出于安全原因，Asyncpostbacktrigger无法处理文件。因此，您的方案中需要完整的回发。 File Upload Issue with UpdatePanel

Answer 2

这是您需要的一个很棒的Example。

Asyncfileupload和按钮使用updatepanel

2 个答案: