How to stop page reload when RadioButtonList clicked without using UpdatePanel?

Question

I am using a RadioButtonList in my web page where RadioButtonList items are A and B. When Item B clicked I am showing few ImageBoxes with FileUploadControl and adding them to database. When I click the radio button values my page gets refreshed. I have tried using the UpdatePanel and then it worked fine without the page refresh but I was not able to add the values to the database. I've got a null exception where the FileName became empty even after selecting the image from the FileUploadControl

I have searched regarding this and found that the selected file will be lost if the FileUploadControl is added inside the UpdatePanel.

below given code segment is how I get the image name

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

Is there any other way to achieve both? (adding them to DB and click without page refresh)

EDITED WITH FULL CODE:

  <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>

In the above given code segment textAnswers (Div tag) will be hidden while the user selects Item A in the RadioButtonList and When he clicks Item B imageAnswers and fileUpload will be visible. While clicking these to Items in the RadioButtonList Page gets refreshed and the values are added to the DB. But I need to stop the page reload and add the values to the DB at the same time. When I use Update Panel I am getting FileName becomes null and getting a null exception in my Code Behind.

Answer 1

Basically your update panel need to make full postback when you upload a file. For that you need to you Post back trigger in update panel.

 <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>

Also make sure that you have this.Form.Enctype = "multipart/form-data"; set in your code, or you can put in that page.

Alternatively you need to use Jquery/Javascript to achieve the RadiobuttonList click event.

Answer 2

Well this may not sound good but if clicking on radio button was making postback you can turn AutoPostBack="false" and capture that onchange event in clientside using jquery and displayed those imageboxes and fileupload control and then you don't need to use updatepanel and everything will work fine.

Answer 3

I will suggest you to don't use update panel, instead use ajax in jquery for partial update (asyncronous communication.)

Here you can find how can you upload file using jQuery How to upload file using javascript?

Here you can find how can you toggle (show/ hide) controls on click of radio button. Show hide controls on radio button click.

Hope this might help you.