Привет! У меня есть существующий сайт, который я конвертирую в Semantic-UI.Я добавил sidenav, содержащий выпадающие списки и текстовые поля внутри модального окна.
Что я делаю:
- Открытие модального режима с помощью кнопки
- Открытие бокового элемента с помощью кнопки
- Выберите элемент из выпадающего меню
Что происходит:
- Страница обновляется, и модальное закрывается.
- Сиденав такжезакрывается и выпадающий список возвращается к выбору по умолчанию
Что я пробовал:
Что происходит:
- Страница обновляется, но модал остается открытым.
- Раскрывающийся список по-прежнему возвращается к выбору по умолчанию.
Что я пробовал:
- Удалите sidenav
- Установите модальное на отделяемое: false
Что происходит:
- Страница обновляется, и модальный остается открытым.
- Раскрывающийся список показывает правильный выбор.
- Текстовые поля заполняются динамически.
- Отчет показывает корПрямо, когда я нажимаю кнопку Показать отчет.
Разметка:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="BesideMIS.Index"%>
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="content/semantic/semantic.css" rel="stylesheet" />
<link href="css/StyleSheet.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384- mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"/>
<title>Beside</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="36000"></asp:ScriptManager>
<div class="wrapper">
<asp:TextBox ID="userCode" runat="server" Visible="false"></asp:TextBox>
<nav class="main-nav">
<div id="reports-menu" class="ui icon button" ><a href="#"><i class="fas fa-chart-line"></i></a></div>
</nav>
<section id="reports-modal" class="ui modal">
<i class="fas fa-times x-close"></i>
<asp:UpdatePanel ID="upanel" runat="server">
<ContentTemplate>
<div class="inner-container">
<div id="params-container" <%--class="ui sidebar inverted vertical menu"--%>>
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="ui search selection dropdown" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
<asp:PlaceHolder ID="DatesPh" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="SeasonPh" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="CompanyPh" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="BrandPh" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="LocationPh" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="GenderPh" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="LinePh" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="SubLinePh" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="PlaceHolder3" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="PlaceHolder2" runat="server">
<div class="chkBox">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>
</asp:PlaceHolder>
<%-- <asp:PlaceHolder ID="PlaceHolder2" runat="server">
<asp:DropDownList ID="DropDownList2" runat="server" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
</asp:PlaceHolder>--%>
<asp:Button ID="Button1" runat="server" CssClass="ui button" Text="Show" OnClick="Button1_Click" class="input-button" />
</div>
<div id="arrow-container" class="ui button">
<img src="img/LeftMenu.jpg" alt="Close" class="arrowImg arrow" />
</div>
<asp:UpdateProgress ID="UpdProg" runat="server" AssociatedUpdatePanelID="upanel" Height="93%" Width="100%">
<ProgressTemplate>
<img src="img/BlocksLoad.gif" />
<h3>Generating greatness...</h3>
</ProgressTemplate>
</asp:UpdateProgress>
<div id="rpt-container" class="container">
<rsweb:ReportViewer ID="ReportViewer1" runat="server" Height="93%" Width="100%" OnDrillthrough="ReportViewer1_Drillthrough" InteractivityPostBackMode="AlwaysAsynchronous"></rsweb:ReportViewer>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</section>
</div>
</form>
<script src="content/jquery/jquery-3.3.1.js"></script>
<script src="content/semantic/semantic.js"></script>
<script>
$(document).ready(function () {
$('.ui.dropdown').dropdown({
fullTextSearch: 'exact'
});
$('#reports-menu').click(function () {
$('#reports-modal').modal({
dimmerSettings: { opacity: 0 },
detachable: false
})
.modal('show');
});
$('#arrow-container').click(function () {
$('#params-container').sidebar({
context: '#reports-modal',
dimPage: false
})
.sidebar('toggle');
});
});
</script>
</body>
</html>
Наконец, я просто хочу, чтобы состояние оставалось прежним, я открываю модальный и sidenav, выберитечто-то из выпадающего списка и создать отчет.Спасибо.