单击RadioButtonList而不使用UpdatePanel时如何停止页面重新加载?

时间:2019-01-08 05:52:52

标签: c# asp.net visual-studio-2015 updatepanel radiobuttonlist

我在我的网页中使用RadioButtonList项目,其中RadioButtonList项目是A和B。单击项目B时,我显示了几个具有FileUploadControl的ImageBox,并将它们添加到数据库中。单击单选按钮值时,页面会刷新。我尝试使用UpdatePanel,然后在没有页面刷新的情况下也可以正常工作,但无法将值添加到数据库中。我有一个空异常,即使从FileUploadControl中选择了图像,FileName仍然为空

我已经对此进行了搜索,found已发现,如果将FileUploadControl添加到UpdatePanel中,则所选文件将丢失。

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

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" />
                            &nbsp;

                        </div>
                        <div id="imageB">
                            <b>B.</b>
                            <asp:Image ID="Image2" CssClass="images" runat="server" ImageUrl="..\Folder\blankImage.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>

在上面给定的代码段中,当用户在RadioButtonList中选择项目A并单击项目B时, textAnswers (Div标签)将被隐藏。 imageAnswers fileUpload 将可见。在“ RadioButtonList页面”中的“项目”上单击这些项目时,将刷新这些值并将其值添加到DB。但是我需要停止页面重新加载,并将这些值同时添加到数据库中。当我使用更新面板时,我的文件名变为空,并且在我的代码隐藏中获取空异常。

3 个答案:

答案 0 :(得分: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 click事件。

答案 1 :(得分:0)

这听起来可能不太好,但是如果单击单选按钮进行回发,则可以打开AutoPostBack =“ false”并使用jquery在客户端捕获该onchange事件,并显示这些图像框和文件上传控件,那么您不需要使用updatepanel,一切都会正常。

答案 2 :(得分:0)

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

在这里您可以找到如何使用jQuery上传文件 How to upload file using javascript?

在这里您可以找到如何通过单击单选按钮来切换(显示/隐藏)控件。 Show hide controls on radio button click.

希望这对您有所帮助。