Question

您好，我有一个现有网站要转换为Semantic-UI。我在模式中添加了一个包含下拉列表和文本框的sidenav。

我做什么：

通过按钮打开模式
通过按钮打开侧面
从下拉菜单中选择一个项目

会发生什么：

页面刷新，模式关闭。
sidenav也将关闭，并且下拉菜单将恢复为默认选择

我尝试过的事情：

删除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，从下拉列表中选择内容并生成报告。谢谢。

ASP.net updatepanel：防止回发时关闭语义UI模式

0 个答案: