Как остановить перезагрузку страницы при щелчке RadioButtonList без использования UpdatePanel?

Question

Я использую RadioButtonList на своей веб-странице, где элементами RadioButtonList являются A и B. Когда щелкнул элемент B, я показываю несколько ImageBox с FileUploadControl и добавляю их в базу данных. Когда я нажимаю значения переключателя, моя страница обновляется. Я попытался использовать UpdatePanel, а затем он работал нормально без обновления страницы, но я не смог добавить значения в базу данных. У меня есть пустое исключение, когда FileName становится пустым даже после выбора изображения из FileUploadControl

Я искал относительно этого и нашел , что выбранный файл будет потерян, если 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>

В указанном выше фрагменте кода textAnswers (тег Div) будет скрыт, пока пользователь выбирает элемент A в RadioButtonList и когда он щелкает элемент B imageAnswers и fileUpload будет видно. При нажатии на них в пунктах на странице RadioButtonList обновляется и значения добавляются в базу данных. Но мне нужно остановить перезагрузку страницы и одновременно добавить значения в БД. Когда я использую панель обновлений, я получаю, что FileName становится пустым, а в моем коде позади - пустое исключение.

Answer 1

Ну, это может звучать не очень хорошо, но если нажатие переключателя вызывало обратную передачу, вы можете включить AutoPostBack = "false" и записать это событие onchange на стороне клиента с помощью jquery и отобразить эти графические окна и управление загрузкой файлов, а затем вам не нужно используйте updatepanel и все будет работать нормально.

Answer 2

Я предлагаю вам не использовать панель обновления, вместо этого используйте ajax в jquery для частичного обновления (асинхронное взаимодействие.)

Здесь вы можете найти, как вы можете загрузить файл, используя jQuery Как загрузить файл с использованием JavaScript?

Здесь вы можете найти, как вы можете переключать (показывать / скрывать) элементы управления нажатием переключателя. Показывать скрытые элементы управления по щелчку переключателя.

Надеюсь, это поможет вам.

Answer 3

По сути, ваша панель обновлений должна делать полный постбэк при загрузке файла. Для этого вам нужно запустить триггер Post Back в панели обновления.

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