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)
{
}
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
{
}
}
}
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.
Submit an article or tip