asp.net 两个模态打开,防止关闭第一个模态打开

axr492tv  于 2023-01-14  发布在  .NET
关注(0)|答案(1)|浏览(132)
<div class="modal fade" id="update" role="dialog" data-keyboard="false" data-dismiss="modal" style="position: absolute" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <!-- Modal content-->
            <div class="modal-content" style="max-width: 1000px; padding: 30px;">
                <div class="modal-body">
                    <center><span class="form-text text-muted" id="nomeregistado"></span></center>
                    <asp:TextBox ID="nral" CssClass="form-control" Style="text-align: center; width: 0; height: 0; margin: 0; padding: 0;" runat="server" /><br />
                    <div class="tabbable">
                        <!-- Only required for left/right tabs -->
                        <ul class="nav nav-tabs">
                            <li class="pull-right"><a href="#tab2" data-toggle="tab">Imagens</a></li>
                            <li class="active pull-right"><a href="#tab1" data-toggle="tab">Características</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab1">
                                <div class="row">
                                    <div class="column_modal">

                                        <label class="col-2"></label>
                                        <center>
                                            <div class="col-10">
                                                <span class="form-text text-muted">Localidade</span>
                                                <input id="localidade_input" name="text" placeholder="Localidade" type="text" style="border: 0.5px solid darkgrey; width: 30%; text-align: center;" class="form-control" aria-describedby="textHelpBlock" disabled>
                                            </div>
                                            <br />

                                            <span>Modalidade</span>
                                            <div class="col-10">
                                                <select id="select_modalidade" name="select" class="custom-select form-control" style="width: 50%; text-align: center" disabled>
                                                    <option value="quarto privado">Quarto Privado</option>
                                                    <option value="Apartamento">Apartamento</option>
                                                    <option value="duplex">Duplex</option>
                                                    <option value="moradia">Moradia</option>
                                                </select>
                                            </div>
                                        </center>

                                        <label class="col-2"></label>
                                        <center>
                                            <div class="col-10">
                                            </div>
                                        </center>

                                    </div>

                                    <div class="column_modal">
                                        <label class="col-2"></label>
                                        <center>
                                            <div class="col-10">
                                                <span class="form-text text-muted">Número de quartos</span>
                                                <asp:DropDownList ID="select2" runat="server" name="select2" class="custom-select form-control" Style="text-align: center; width: 30%;" aria-describedby="select2HelpBlock">
                                                    <asp:ListItem Text="1" Value="1"></asp:ListItem>
                                                    <asp:ListItem Text="2" Value="2"></asp:ListItem>
                                                    <asp:ListItem Text="3" Value="3"></asp:ListItem>
                                                    <asp:ListItem Text="4" Value="4"></asp:ListItem>
                                                </asp:DropDownList>
                                            </div>
                                        </center>
                                        <br />

                                        <center>
                                            <div class="form-group row">
                                                <div class="col-10">
                                                    <span id="select1HelpBlock" class="form-text text-muted">Limite de Hóspedes</span>
                                                    <select id="select_limite" name="select1" class="custom-select form-control" aria-describedby="select1HelpBlock" style="text-align: center; width: 30%;" disabled>
                                                        <option value="1">1</option>
                                                        <option value="2">\</option>
                                                        <option value="3">3</option>
                                                        <option value="4">4</option>
                                                        <option value="5">5</option>
                                                        <option value="6">6</option>
                                                        <option value="7">7</option>
                                                        <option value="8">8</option>
                                                        <option value="9">9</option>
                                                        <option value="10">10</option>
                                                        <option value="11">11</option>
                                                        <option value="12">12</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </center>

                                        <center>
                                            <div class="form-group row">
                                            </div>

                                        </center>
                                    </div>

                                    <div class="column_modal">
                                        <label class="col-2"></label>
                                        <center>
                                            <div class="col-10">
                                                <span class="form-text text-muted">Descrição</span><br />
                                                <textarea id="description" name="story" rows="5" cols="27" runat="server" style="border: 0.5px solid black">
                                            </textarea>

                                            </div>
                                        </center>

                                        <label class="col-2"></label>
                                        <center>
                                            <div class="col-10">
                                            </div>
                                        </center>

                                        <label class="col-2"></label>
                                        <center>
                                            <div class="col-10">
                                            </div>
                                        </center>
                                    </div>
                                    <br />
                                </div>

                                <div class="form-group row">

                                    <center>
                                        <div class="form-group row" style="display: inline-block">
                                            <div class="custom-control custom-checkbox custom-control-inline" style="display: inline-block; margin-left: 5px;">
                                                <input name="checkbox_caracteristicas" id="checkbox_caracteristicas_piscina" runat="server" style="display: inline-block" type="checkbox" class="custom-control-input" value="piscina" aria-describedby="checkbox_caracteristicasHelpBlock">
                                                <label for="checkbox_caracteristicas_0" style="display: inline-block" class="custom-control-label">Piscina</label>
                                            </div>
                                            <div class="custom-control custom-checkbox custom-control-inline" style="display: inline-block; margin-left: 5px;">
                                                <input name="checkbox_caracteristicas" id="checkbox_caracteristicas_ac" runat="server" type="checkbox" class="custom-control-input" value="a/c" aria-describedby="checkbox_caracteristicasHelpBlock">
                                                <label for="checkbox_caracteristicas_1" class="custom-control-label">A/C</label>
                                            </div>
                                            <div class="custom-control custom-checkbox custom-control-inline" style="display: inline-block; margin-left: 5px;">
                                                <input name="checkbox_caracteristicas" id="checkbox_caracteristicas_pf" runat="server" type="checkbox" class="custom-control-input" value="petfriendly" aria-describedby="checkbox_caracteristicasHelpBlock">
                                                <label for="checkbox_caracteristicas_2" class="custom-control-label">Pet Friendly</label>
                                            </div>
                                            <div class="custom-control custom-checkbox custom-control-inline" style="display: inline-block; margin-left: 5px;">
                                                <input name="checkbox_caracteristicas" id="checkbox_caracteristicas_terraco" runat="server" type="checkbox" aria-describedby="checkbox_caracteristicasHelpBlock" class="custom-control-input" value="terraço">
                                                <label for="checkbox_caracteristicas_3" class="custom-control-label">Terraço</label>
                                            </div>
                                            <div class="custom-control custom-checkbox custom-control-inline" style="display: inline-block; margin-left: 5px;">
                                                <input name="checkbox_caracteristicas" id="checkbox_caracteristicas_cozinha" runat="server" type="checkbox" aria-describedby="checkbox_caracteristicasHelpBlock" class="custom-control-input" value="cozinha">
                                                <label for="checkbox_caracteristicas_4" class="custom-control-label">Cozinha</label>
                                            </div>
                                            <div class="custom-control custom-checkbox custom-control-inline" style="display: inline-block; margin-left: 5px;">
                                                <input name="checkbox_caracteristicas" id="checkbox_caracteristicas_wifi" runat="server" type="checkbox" aria-describedby="checkbox_caracteristicasHelpBlock" class="custom-control-input" value="wifi">
                                                <label for="checkbox_caracteristicas_5" class="custom-control-label">Wi-Fi</label>
                                            </div>
                                            <div class="custom-control custom-checkbox custom-control-inline" style="display: inline-block; margin-left: 5px;">
                                                <input name="checkbox_caracteristicas" id="checkbox_caracteristicas_tv" runat="server" type="checkbox" aria-describedby="checkbox_caracteristicasHelpBlock" class="custom-control-input" value="tv">
                                                <label for="checkbox_caracteristicas_6" class="custom-control-label">Tv</label>
                                            </div>
                                            <div class="custom-control custom-checkbox custom-control-inline" style="display: inline-block; margin-left: 5px;">
                                                <input name="checkbox_caracteristicas" id="checkbox_caracteristicas_bbq" runat="server" type="checkbox" aria-describedby="checkbox_caracteristicasHelpBlock" class="custom-control-input" value="churrasqueira">
                                                <label for="checkbox_caracteristicas_7" class="custom-control-label">Churrasqueira</label>
                                            </div>
                                            <div class="custom-control custom-checkbox custom-control-inline" style="display: inline-block; margin-left: 5px;">
                                                <input name="checkbox_caracteristicas" id="checkbox_caracteristicas_mll" runat="server" type="checkbox" aria-describedby="checkbox_caracteristicasHelpBlock" class="custom-control-input" value="maquina de lavar loiça">
                                                <label for="checkbox_caracteristicas_8" class="custom-control-label">Máquina de lavar louça</label>
                                            </div>
                                            <div class="custom-control custom-checkbox custom-control-inline" style="display: inline-block; margin-left: 5px;">
                                                <input name="checkbox_caracteristicas" id="checkbox_caracteristicas_mlr" runat="server" type="checkbox" aria-describedby="checkbox_caracteristicasHelpBlock" class="custom-control-input" value="maquina de lavar roupa">
                                                <label for="checkbox_caracteristicas_9" class="custom-control-label">Máquina de lavar roupa</label>
                                            </div>
                                        </div>
                                    </center>
                                </div>
                                <center>
                            </div>
                            <div class="tab-pane" id="tab2">
                                <div class="containermodal">
                                    <input type="file" id="file_input" runat="server" accept="image/png, image/jpeg" onchange="preview()" multiple />
                                    <label for="file_input" class="label-foto">
                                        <i class="fa-solid fa-upload"></i>&nbsp; Escolhe As Fotografias
                                    </label>
                                    <p id="num-of-files">Nenhuma Fotografia Escolhida</p>
                                    <div id="images"></div>
                                    <br />
                                    <center>
                                        <label>
                                            <h6>Toque nas fotografias para remover.</h6>
                                        </label>
                                    </center>
                                </div>
                                <div class="mt-5 text-right" runat="server">
                                </div>
                            </div>
                            <center>
                                <asp:LinkButton class="btn btn-danger profile-button" runat="server">Cancelar</asp:LinkButton>
                                <asp:LinkButton ID="LinkButton1" class="btn btn-success profile-button" runat="server" OnClick="Unnamed_Click">Guardar</asp:LinkButton></center>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="deleteFoto" style="position: center relative">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <center>
                            <h4 class="modal-title" id="myModal">Deseja apagar a fotografia?</h4>
                        </center>
                    </div>
                    <!-- /.modal-header -->
                    <div class="modal-body">
                        <asp:TextBox ID="TextNomeFoto" CssClass="form-control" Style="text-align: center" runat="server" /><br />
                    </div>
                    <!-- /.modal-body -->
                    <div class="modal-footer">
                        <div class="column_modal" style="align-content: center; width: 50%; padding: 5%">
                            <asp:LinkButton CssClass="form-control btn btn-danger" Text="Cancelar" runat="server" />
                        </div>
                        <div class="column_modal" runat="server" style="align-content: center; width: 50%; padding: 5%">
                            <asp:LinkButton CssClass="form-control btn btn-success" OnClick="Unnamed_Click1" Text="Confirmar" runat="server" />
                        </div>

                    </div>
                    <!-- /.modal-footer -->
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>

CS文件

protected void Unnamed_Click1(object sender, EventArgs e)
    {
        var x = HttpContext.Current.Session["Propriedades"] as List<RentaHouse.propControl>;
        var value = x.First(item => item.numRNAL == Convert.ToInt32(nral.Text));
        
        value.foto.Remove(TextNomeFoto.Text);
        list_fotos.Remove(TextNomeFoto.Text);
    }

我有2模态打开,第二模态有一个按钮来确认图像删除。所以,当我确认图像删除的过程中,两个模态关闭和页面刷新。我需要访问一个asp函数中的。cs文件,所以我需要链接按钮来激发事件。我想确认图像删除,但我想第一模态保持打开,我从来没有使用 AJAX ,我不知道如何使用。pls,我需要帮助:(

mklgxw1f

mklgxw1f1#

如果它导致了回发(删除),您需要调用modal.show(),它是您首先用来打开模态的。
例如:
在apsx中添加show函数(JS)

<script>
 function MOD_SHOW() {
                var myModal = new bootstrap.Modal(document.getElementById("ModalName"), {});
              
                    myModal.show();
             
            }
</script>

确认删除后再调用

protected void Unnamed_Click1(object sender, EventArgs e)
    {
        var x = HttpContext.Current.Session["Propriedades"] as List<RentaHouse.propControl>;
        var value = x.First(item => item.numRNAL == Convert.ToInt32(nral.Text));
        
        value.foto.Remove(TextNomeFoto.Text);
        list_fotos.Remove(TextNomeFoto.Text);

ScriptManager.RegisterStartupScript(this, GetType(), Guid.NewGuid().ToString(), "MOD_SHOW();", true);
    }


选项2使用更新面板,这样当调用后台代码时,只会进行部分回发,并且modal应该保持打开状态

相关问题