如何在不使用UpdatePanel的情况下单击RadioButtonList时停止页面重新加载

Question

我在我的网页中使用RadioButtonList，其中RadioButtonList项目是a和B。当项目B单击时，我显示了一些带有FileUploadControl的ImageBox，并将它们添加到数据库中。当我单击单选按钮值时，我的页面会被刷新。我尝试过使用UpdatePanel，然后它在没有页面刷新的情况下运行良好，但我无法将值添加到数据库中。我有一个null异常，即使在从FileUploadControl 中选择图像后，FileName也变为空

我对此进行了搜索，发现如果在UpdatePanel中添加FileUploadControl，所选文件将丢失。

下面给出的代码段是我如何获得图像名称

string imageFile = Path.GetFileName(FileUpload1.PostedFile.FileName);

有没有其他方法可以实现这两个目标？(将它们添加到数据库中，然后单击而不刷新页面)

使用完整代码编辑：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RadioButtonList1" EventName="SelectedIndexChanged" />
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<div class="textAnswers" id="textAns" runat="server">
<p>
<b>A.</b>
<asp:TextBox ID="answerOneTb" runat="server" Width="95%"></asp:TextBox>
</p>
<p>
<b>B.</b>
<asp:TextBox ID="answerTwoTb" runat="server" Width="95%"></asp:TextBox>
</p>
</div>
<div class="imageAnswers" id="imageAns" runat="server">
<div id="imageA">
<b>A.</b>
<asp:Image ID="Image1" CssClass="images" runat="server" ImageUrl="..FolderblankImage.png" Width="150px" />
&nbsp;
</div>
<div id="imageB">
<b>B.</b>
<asp:Image ID="Image2" CssClass="images" runat="server" ImageUrl="..FolderblankImage.png" Width="150px" />
&nbsp;
</div>                                                        
<br />
<br />
<br />
</div>
<div class="fileUpload" id="addImageFupld" runat="server">
<div id="fu1">
<asp:FileUpload ID="FileUpload1" runat="server" Width="150px" onchange="ImagePreviewA(this)" accept=".png,.jpg,.jpeg" /><br />
<br />
<dx:ASPxLabel ID="imageName1" runat="server" Text="ASPxLabel" Visible="false"></dx:ASPxLabel>
</div>
<div id="fu2">
<asp:FileUpload ID="FileUpload2" runat="server" Width="150px" onchange="ImagePreviewB(this)" accept=".png,.jpg,.jpeg" /><br />
<dx:ASPxLabel ID="imageName2" runat="server" Text="ASPxLabel" Visible="false"></dx:ASPxLabel>
</div>
</div>
<asp:Button ID="Button1" runat="server" Text="Add Question" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>

在上面给定的代码段中，当用户在单选按钮列表中选择项目A时，textAnswers(Div标记)将被隐藏，当他单击项目BimageAnswers和fileUpload时，将可见。单击这些到RadioButtonList页面中的项目时，会刷新这些值，并将这些值添加到数据库中。但我需要停止页面重新加载，同时将值添加到DB中。当我使用更新面板时，我得到的FileName变为null，并在我的代码隐藏中得到一个null异常。

Answer 1

基本上，当您上传文件时，您的更新面板需要进行完全回发。为此，您需要在更新面板中发布回触发器。

<asp:UpdatePanel ID="updPanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RadioButtonList1" EventName="SelectedIndexChanged" />
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
<ContentTemplate>
<asp:FileUpload ID="fupload" runat="server" /><br />
<asp:Button ID="btnUpload" runat="server" Text="Upload"  />
<asp:RadioButtonList ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Text="T1" Value="M1"></asp:ListItem>
<asp:ListItem Text="T2" Value="M2"></asp:ListItem>
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>

还要确保你有这个。Form.Enctype="多部分/表单数据"；设置在您的代码中，或者您可以将其放入该页面中。

或者，您需要使用Jquery/Javascript来实现RadiobuttonList单击事件。

Answer 2

这听起来可能不太好，但如果单击单选按钮进行回发，您可以将AutoPostBack="false"，并使用jquery在客户端捕获onchange事件，并显示那些图像框和文件上传控件，然后您不需要使用updatepanel，一切都会正常工作。

Answer 3

我建议您不要使用更新面板，而是在jquery中使用ajax进行部分更新(异步通信)

在这里你可以找到如何使用jQuery上传文件如何使用javascript上传文件？

在这里，您可以找到如何在单击单选按钮时切换(显示/隐藏)控件。单击单选按钮时显示隐藏控件。

希望这能对你有所帮助。