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" />
</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>
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.
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.