模态触发器和图像仅在默认页面上工作 [英] Modal trigger and images working only on default page
问题描述
好的，我有一个页面使用URL路由并有多个面板。一些面板显示默认内容，而某些面板根据请求的URL（默认内容+额外内容）变得可见。
因此默认内容（例如：http ... / Home）包含模态的触发按钮，以及包含图像和一些文本的两个面板。
因此，当我加载默认页面（即https .... / Home）时，一切正常精细，模态触发工作完美，图像显示应该如此。
但是如果我请求不同的URL（http ... / Home / abc - >它由url路由处理）所有内容面板（默认内容+额外内容）变得可见，但图像不会显示而是我得到一个损坏的图像图标（即使在默认页面上可见的图像变成一个损坏的图像图标）模态触发器也不起作用。如果我点击它就没有任何反应。
所有的代码都在一页仍然无法正常工作我无法弄清楚什么是错的...特别是图像，图像是链接到外部http链接，它可以在点击损坏的图标图标时工作，所以有些东西会在那里而不是图像？
这里是c＃的代码：< br $> b $ b
受保护 void Page_Load（ object sender，EventArgs e）
{
string clientname ;
if （GetRouteUrl（RouteData.Values [ name]）== null || RouteData.Values [ name] == null ）
{
// 无效信息/页
}
其他
{
clientname = RouteData.Values [ name]。ToString（） ;
if （clientname == abc）
{
Panel_2.Visible = true ;
Panel_logo2.Visible = true ;
}
else if （clientname == xyz）
{
Panel_1.Visible = 真;
Panel_logo1.Visible = true ;
}
其他
{
// < span class =code-comment>无效页面/信息
}
}
}
代码在aspx中：
< form id =form1runat =server>
< asp：ScriptManager ID =ScriptManager1runat =server>
< / asp：ScriptManager>
<！ - 徽标容器 - >
< div class =container>
< div class =row>
< div class =col>
< a href =http ...... /> < img src =logo / default_logoclass =rounded float-leftheight =100width =200/> < / A>
< / div>
< div class =col-6 text-center>
< h1>东西< / h1>
< / div>
<！ - abc logo - >
< div class =col>
< asp：Panel ID =Panel_logo1runat =serverVisible =false>
< a href =http ...> < img src =logo / 1class =round float-rightheight =100width =200/> < / A>
< / asp：Panel>
<！ - xyz logo - >
< asp：Panel ID =Panel_logo2runat =serverVisible =false>
< a href =https ....>< img src =logo / 2class =round float-rightheight =100width =200/> < / A>
< / asp：Panel>
< / div>
< / div>
< / div>
<！ - 徽标的容器末尾 - >
<！ - 默认部分 - >
< div class =container>
< div class =jumbotron>
< div class =col>
< p>一些默认的东西随时出现< / p>
< p>
更多东西
< / p>
< / div>
< / div>
< / div>
<！ - abc - >
< asp：Panel ID =Panel_abcrunat =serverVisible =false>
< div class =container>
< div class =jumbotron>
< div class =col>
< h1> ABC部分< / h1>
< p> ABC< / p>的消息部分
< / div>
< / div>
< / div>
< / asp：Panel>
<！ - xyz - >
< asp：Panel ID =Panel_xyzrunat =serverVisible =false>
< div class =container>
< div class =jumbotron>
< div class =col>
< h1> XYZ部分< / h1>
< p> 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 type =buttonclass =btn btn-primarydata-toggle =modaldata-target =＃logger_modal>
模态触发
< / button>
< / div>
< / div>
< / div>
< div class =col>
< / div>
< / div>
< / div>
<！ - 模态代码 - >
< div class =modal fadeid =logger_modaltabindex = - 1role =dialogaria-labelledby =logger_model1aria-hidden =true>
< div class =modal-dialogrole =document>
< div class =modal-content>
< div class =modal-header>
< h6 class =modal-titleid =logger_modal1>请提供登录所需的信用证。< / h6>
< button type =buttonclass =closedata-dismiss =modalaria-label =Close>
< span aria-hidden =true>×< / span>
< / button>
< / div>
< asp：UpdatePanel ID =UpdatePanel1runat =server>
< ContentTemplate>
< div class =modal-body align-content-center>
< asp：TextBox .... onkeydown =return（event.keyCode！= 13）;>< / asp：TextBox>
< asp：RequiredFieldValidator ... EnableClientScript =falseDisplay =Dynamic>< / asp：RequiredFieldValidator>
< br />
< asp：TextBox ... onkeydown =return（event.keyCode！= 13）;>< / asp：TextBox>
< asp：RequiredFieldValidator ... EnableClientScript =falseDisplay =Dynamic>< / asp：RequiredFieldValidator>
< / br> < asp：Label ID =Label1runat =serverClass =alert>< / asp：Label>
< / div>
< / ContentTemplate>
<触发器>
< asp：AsyncPostBackTrigger ControlID =.../>
< /触发器>
< / asp：UpdatePanel>
< div class =modal-footer>
............
< / div>
< / div>
< / div>
< / div>
< / form>
我有什么试过：
< asp：Button class =btn btn-primaryID =modal_triggerrunat =server Text =登录data-toggle =modaldata-target =＃logger-modalOnClick =Modal_trigger_Click/>
modal_trigger_Click（）方法中的
我调用java脚本函数 - >显示模态模态。（show）;
但是在这种情况下按钮本身甚至在默认页面上都不起作用。
< blockquote>
< img src =logo / default_logo
这是一个相对网址，它意味着看在当前页面级别的名为logo的文件夹中，所以在/上它看起来是/ logo /，但在/ abc上它看起来是/ abc / logo
Google Page.ResolveURL了解如何确保网址始终正确，无论网页是什么。
Ok so I have a page which uses URL routing and has multiple panels. Some of the panels are to show default content while some panel become visible based upon URL requested (default content + extra content).
So the default content(eg: http.../Home) contains a trigger button for the modal, and two panels containing images and some text.
So when I load the default page (ie https..../Home) everything works fine, modal trigger works perfectly and images get shown as they should.
BUT if I request a different URL (http.../Home/abc --> which is handled by url routing) All the content panels (default content + extra content) becomes visible but images do not show up instead I get a broken image icon(even the image which is visible on default page becomes an broken image icon) and the modal trigger also does not work. Nothing happens if I click on it.
All the code is in one page still it doesnt work I cant figure out whats wrong...Specially with images, images are linked to an external http link which does work upon clicking the broken-image icons so something is going there but not the image?
here is the code for 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
}
}
}
code in the 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>
What I have tried:
<asp:Button class="btn btn-primary " ID="Modal_trigger" runat="server" Text="Login" data-toggle="modal" data-target="#logger-modal" OnClick="Modal_trigger_Click"/>
inside Modal_trigger_Click() method I call the java script function--> to display the modal modal.("show");
but the button itself doesnt work in this case even on the default page.
<img src="logo/default_logo"
This is a relative url, it means look in a folder called logo at the current page level, so on "/" it looks in "/logo/", but on "/abc" it looks in "/abc/logo"
Google Page.ResolveURL to find out how to ensure a url is always right no matter the page it is on.
这篇关于模态触发器和图像仅在默认页面上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
