Модальный триггер и изображения, работающие только на странице по умолчанию
Итак, у меня есть страница, которая использует маршрутизацию URL-адресов и имеет несколько панелей. Некоторые панели должны показывать содержимое по умолчанию, в то время как некоторые панели становятся видимыми на основе запрошенного URL-адреса (содержимое по умолчанию + дополнительное содержимое).
Таким образом, содержимое по умолчанию(например, http.../Home) содержит триггерную кнопку для модала и две панели, содержащие изображения и некоторый текст.
Поэтому, когда я загружаю страницу по умолчанию (т. е. https..../Home), все работает нормально, модальный триггер работает отлично, и изображения отображаются так, как они должны.
Но если я запрошу другой URL (http.../Home/abc --> который обрабатывается маршрутизацией url) Все панели контента (Контент по умолчанию + дополнительный контент) становятся видимыми, но изображения не отображаются, вместо этого я получаю значок сломанного изображения(даже изображение, которое видно на странице по умолчанию, становится значком сломанного изображения), и модальный триггер также не работает. Ничего не произойдет, если я нажму на нее.
Весь код находится на одной странице, но все равно он не работает, и я не могу понять, что не так...Особенно с изображениями, изображения связаны с внешней http-ссылкой, которая действительно работает при нажатии на значки разбитого изображения, так что там что-то происходит, но не изображение?
вот код на C#:
protected void Page_Load(object sender, EventArgs e)
{
string clientname;
if (GetRouteUrl(RouteData.Values["name"]) == null || RouteData.Values["name"] == null)
{
// invalid info/ page
}
else
{
clientname = RouteData.Values["name"].ToString();
if (clientname == "abc")
{
Panel_2.Visible = true;
Panel_logo2.Visible = true;
}
else if (clientname == "xyz")
{
Panel_1.Visible = true;
Panel_logo1.Visible = true;
}
else
{
// invalid page/info
}
}
}
код в aspx:
<form id="form1" runat="server" >
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<!-- Container for logos -->
<div class="container">
<div class="row">
<div class="col">
<a href="http....../"> <img src="logo/default_logo" class="rounded float-left" height="100" width="200"/> </a>
</div>
<div class="col-6 text-center">
<h1> stuff </h1>
</div>
<!-- abc logo -->
<div class="col">
<asp:Panel ID="Panel_logo1" runat="server" Visible="false">
<a href="http..."> <img src="logo/1" class="rounded float-right" height="100" width="200" /> </a>
</asp:Panel>
<!-- xyz logo -->
<asp:Panel ID="Panel_logo2" runat="server" Visible="false">
<a href="https...."><img src="logo/2" class="rounded float-right" height="100" width="200"/> </a>
</asp:Panel>
</div>
</div>
</div>
<!-- End of Containers for logo -->
<!-- Default section -->
<div class="container">
<div class="jumbotron">
<div class="col">
<p> some default stuff which shows up at all times</p>
<p>
more stuff
</p>
</div>
</div>
</div>
<!-- abc -->
<asp:Panel ID="Panel_abc" runat="server" Visible="false">
<div class="container">
<div class="jumbotron">
<div class="col">
<h1> ABC section</h1>
<p> Section for message of ABC </p>
</div>
</div>
</div>
</asp:Panel>
<!-- xyz-->
<asp:Panel ID="Panel_xyz" runat="server" Visible="false">
<div class="container">
<div class="jumbotron">
<div class="col">
<h1>XYZ Section</h1>
<p> Section for message of XYZ</p>
</div>
</div>
</div>
</asp:Panel>
<!-- END -->
<div class="container">
<div class="row">
<div class=" col-sm-12 col-md-4">
<div class="card">
<div class="card-body">
<p>stuff </p>
<!-- Button to trigger Login modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#logger_modal">
Modal Trigger
</button>
</div>
</div>
</div>
<div class="col">
</div>
</div>
</div>
<!--Modal code-->
<div class="modal fade" id="logger_modal" tabindex="-1" role="dialog" aria-labelledby="logger_model1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="logger_modal1">Please provide the required credientials to Log In.</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="modal-body align-content-center">
<asp:TextBox ....onkeydown="return (event.keyCode!=13);"></asp:TextBox>
<asp:RequiredFieldValidator... EnableClientScript="false" Display="Dynamic"></asp:RequiredFieldValidator>
<br />
<asp:TextBox...onkeydown="return (event.keyCode!=13);"></asp:TextBox>
<asp:RequiredFieldValidator...EnableClientScript="false" Display="Dynamic"></asp:RequiredFieldValidator>
</br> <asp:Label ID="Label1" runat="server" Class="alert"></asp:Label>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="..." />
</Triggers>
</asp:UpdatePanel>
<div class="modal-footer">
............
</div>
</div>
</div>
</div>
</form>
Что я уже пробовал:
<asp:Button class="btn btn-primary " ID="Modal_trigger" runat="server" Text="Login" data-toggle="modal" data-target="#logger-modal" OnClick="Modal_trigger_Click"/>
внутри метода Modal_trigger_Click() я вызываю функцию java script--> Для отображения модального модала.("показывать");
но сама кнопка в этом случае не работает даже на странице по умолчанию.
Bryian Tan
Кстати, это опечатка data-target="#logger-modal"? должно ли это быть data-target="#logger_modal" ?
Member 13973078
хммм..Я переписал эту часть кода (я удалил ее перед тем, как сделать этот пост) и убедился, что на этот раз я сохраняю написание таким же, но ничего не происходит.Еще одна вещь, которую я попробовал, - это когда на этой кнопке asp я поставил точку останова и узнал, что:-
- если я нахожусь на странице по умолчанию, то при нажатии на кнопку asp достигается точка останова кода OnClick, и модал фактически открывается в браузере, но только до тех пор, пока я не нажму "продолжить" и не продвинусь вперед по точке останова. Поэтому он открывается, но мгновенно закрывается
- если я нахожусь на одном из других URL-адресов (http...home/abc), модальный даже не открывается!, точка останова нажата, но ничего не происходит.
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
and the script:
<script type="text/javascript">
function openModal() {
$('#logger_modal').modal('show');
}
</script>
lw@zi
Вы видите что-то в настройках разработчика - > консоль при загрузке страницы?
lw@zi
Нет, в браузере. Нажмите клавишу F12, как только вы открыли неисправную страницу, и обновите ее, чтобы увидеть, есть ли какие-либо ошибки на вкладке консоли в браузере.
Member 13973078
ладно, я там получаю ошибки..
сначала я получал эти ошибки:
-GET http://localhost:50866/Page/Scripts/jquery.min.js 404 (Not Found) -abc:213 GET http://localhost:50866/Page/Scripts/popper.min.js 404 (Not Found) -abc:215 GET http://localhost:50866/Page/Scripts/bootstrap.min.js 404 (Not Found) -abc:12 Uncaught ReferenceError: $ is not defined at openModal (abc:12) at abc:212openModal @ abc:12(anonymous) @ abc:212revq:212 -GET http://localhost:50866/Page/Scripts/jquery.min.js 404 (Not Found)revq:213 -GET http://localhost:50866/Page/Scripts/popper.min.js 404 (Not Found)revq:215 -GET http://localhost:50866/Page/Scripts/bootstrap.min.js 404 (Not Found)
поэтому я использовал PageresolveURL и он начал находить эти файлы но теперь он показывает другие ошибки:
-GET http://localhost:50866/Scripts/jquery.min.js%3E 404 (Not Found) -Uncaught ReferenceError: $ is not defined at openModal (abc:14) at abc:214openModal @ abc:14(anonymous) @ abc:214 -GET http://localhost:50866/Scripts/jquery.min.js%3E 404 (Not Found) abc:240 -Uncaught SyntaxError: Unexpected token export popper.min.js:4-util.js:56 Uncaught TypeError: Cannot read property 'fn' of undefined at util.js:56 at util.js:10 at bootstrap.min.js:6 at bootstrap.min.js:6(anonymous) @ util.js:56(anonymous) @ util.js:10(anonymous) @ bootstrap.min.js:6(anonymous) @ bootstrap.min.js:6
а также кнопка входа в систему (простая кнопка, а не кнопка asp:) перестала функционировать на этом этапе даже на странице по умолчанию. Он отлично работает(только на странице по умолчанию) без Page.resolveURL в скриптах src
lw@zi
Ваш тег скрипта для jquery.min.js это неправильно. Смотрите путь к файлу по ошибке. У вас есть дополнительный > (обозначается %3E). Теперь, поскольку ваша страница не может загрузить jquery, весь ваш JS-код, использующий ее, не будет работать.
Member 13973078
Клянусь, я дважды проверил эту строку кода, но ее там не было! и после того, как я прочитал ваш комментарий, указывающий на это, я пошел проверить еще раз, и к моему удивлению это было так!! Я чувствовал себя таким тупым, что не могу выразить словами...
Удаление этого дополнительного " >" заставляет модальный триггер работать идеально.
Кроме того, для кнопки asp:я удалил скрипт и вместо использования OnClick использовал OnClientClick= "return false", что также заставляет работать модальный триггер.
Теперь этот вопрос решен.
Огромное спасибо lw@zi