在不使用 UpdatePanel 的情况下单击 RadioButtonList 时如何停止页面重新加载?
Posted
技术标签:
【中文标题】在不使用 UpdatePanel 的情况下单击 RadioButtonList 时如何停止页面重新加载?【英文标题】:How to stop page reload when RadioButtonList clicked without using UpdatePanel? 【发布时间】:2019-06-02 19:07:57 【问题描述】:我在我的网页中使用 RadioButtonList,其中 RadioButtonList 项目是 A 和 B。当单击项目 B 时,我显示了几个带有 FileUploadControl 的 ImageBox 并将它们添加到数据库中。当我单击单选按钮值时,我的页面会刷新。我尝试使用 UpdatePanel,然后它在没有刷新页面的情况下工作正常,但我无法将值添加到数据库中。我有一个空异常,即使从 FileUploadControl 中选择图像后 FileName 也变为空
我已经对此进行了搜索,found 如果在 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="..\Folder\blankImage.png" Width="150px" />
</div>
<div id="imageB">
<b>B.</b>
<asp:Image ID="Image2" CssClass="images" runat="server" ImageUrl="..\Folder\blankImage.png" Width="150px" />
</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>
在上面给出的代码段中,textAnswers(Div 标记)将在用户选择 RadioButtonList 中的项目 A 和单击项目 B 时隐藏 imageAnswers 和 fileUpload 将可见。单击这些到 RadioButtonList 页面中的项目时,会刷新并将值添加到数据库中。但我需要停止页面重新加载并将值同时添加到数据库中。当我使用更新面板时,我得到 FileName 变为 null 并在我的 Code Behind 中得到一个 null 异常。
【问题讨论】:
【参考方案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>
还要确保你有 this.Form.Enctype = "multipart/form-data";在您的代码中设置,或者您可以放入该页面。
或者你需要使用 Jquery/javascript 来实现 RadiobuttonList 点击事件。
【讨论】:
让我知道它是否有效或您遇到任何问题。 感谢您的回答。我尝试过这个。它没有用。你能解释一下使用这听起来可能不太好,但是如果单击单选按钮进行回发,您可以打开 AutoPostBack="false" 并使用 jquery 在客户端捕获该 onchange 事件并显示那些图像框和文件上传控件,然后您不需要使用更新面板,一切都会正常工作。
【讨论】:
嗨。感谢您的回答。它不起作用,这就是我使用更新面板的原因【参考方案3】:我建议你不要使用更新面板,而是在 jquery 中使用 ajax 进行部分更新(异步通信)。
在这里您可以找到如何使用 jQuery 上传文件 How to upload file using javascript?
在这里您可以找到如何在单击单选按钮时切换(显示/隐藏)控件。 Show hide controls on radio button click.
希望这对你有帮助。
【讨论】:
嗨。感谢您的回答。我会检查并告诉你:)以上是关于在不使用 UpdatePanel 的情况下单击 RadioButtonList 时如何停止页面重新加载?的主要内容,如果未能解决你的问题,请参考以下文章
在不使用路由器的情况下单击 React.js 中的按钮时如何打开新页面?
如何在不注册其后面的框的单击事件的情况下单击一个html框?
如何在不重新加载窗口的情况下单击按钮时在 JSP 中进行更新查询?