ASP.NET - Image not rendered at runtime - html

Please help me with a weird issue I am facing in my web application. In the scenario below an image (company logo) is not getting rendered at runtime.
I have designed a very simple page named default2.aspx. The intention of this page is to work as a maintenance page in case of an application downtime.
The logic of implementing this by have a SiteIsActive switch key in web.config with "N" representing downtime.
In the Global.asax I have implemented the "Application_BeginRequest" method to check for the SiteIsActive flag and redirect to default2.aspx. While the functionality is working fine with both the SiteIsActive cases, the image (company logo) is not getting rendered in default2.aspx at runtime. However when I directly browse the default2.aspx by setting it as startup page the logo/image is displayed at runtime.
Note: This scenario is being tried from within visual studio 2015 and is not yet being deployed.
Any suggestions would be appreciated as to why the image is not being rendered when the switch (SiteIsActive = N) and being re-directed to default2.aspx
Code for default2.aspx below:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<head runat="server">
<link href="~/Image/BrightSide.css" rel="stylesheet" type="text/css"/>
<title>AAA</title>
</head>
<body id="bodyindex">
<div id="wrap" style="width: 1000px;">
<div id="header">
<table style="background-color: rgb(255, 255, 255);" width="100%">
<tbody>
<tr>
<td width="15%">
<img src="~Image/AAA_Image.jpg" /></td>
<td width="32%">
<h1 style="font: bolder 3.1em 'Trebuchet MS',Arial,Sans-serif;">AAAy</h1>
</td>
<td align="right" width="53%"> </td>
</tr>
</tbody>
</table>
<br>
<br>
</div>
<div id="content-wrap">
<h1 align="center">The AAA website is currently unavailable due to scheduled maintenance.<br />
<br />
We are sorry for the inconvenience. Please re-visit the site.
<!-- <div class="caption" style="height:50px;"><div class="content"></div></div> -->
</h1>
<br>
<br>
<br>
<div style="clear: both;">
<!-- wrap lower portion-->
<div style="width: 75%; float: left;">
<h1> </h1>
<p> </p>
</div>
<br>
<!-- content-wrap ends here -->
</div>
<!-- footer starts here -->
<div id="footer">
<div class="footer-left">
<p class="align-left">
� 2017 <strong>AAA</strong>
</p>
</div>
<div class="footer-right">
<p class="align-right"> </p>
</div>
</div>
<!-- footer ends here -->
<!-- wrap ends here -->
</div>
</div>
</body>
</html>
Code defined in Application_BeginRequest.
The logic I implemented is within the two comments "// Logic for maintainence page". Also please note I have included some logic for IPAddress exclusion where for such IPs the regular websites will be shown and for others the maintenance page is dispalyed:
public void Application_BeginRequest(object sender, EventArgs e)
{
// Check the application validity
LicenseHelper.CheckValidity();
// Enable request debugging
// Application start events
FirstRequestInitialization(sender, e);
CMSRequest.BeforeBeginRequest(sender, e);
// Check if Database installation needed
if (InstallerFunctions.InstallRedirect())
{
return;
}
// Enable debugging
SetInitialDebug();
CMSRequest.AfterBeginRequest(sender, e);
// Logic for maintainence page
HttpContext context = HttpContext.Current;
string maintenancePage = System.Configuration.ConfigurationManager.AppSettings["Maintenance_RedirectTo"];
string siteIsActive = System.Configuration.ConfigurationManager.AppSettings["SiteIsActive"];
if (siteIsActive != null && siteIsActive.Equals("N", StringComparison.CurrentCultureIgnoreCase))
{
if (!context.Request.Path.Equals("/" + maintenancePage))
{
string exceptionIP = string.Empty;
string ips = System.Configuration.ConfigurationManager.AppSettings["Maintenance_Redirect_Exceptions"];
string ipAddress2 = Request.ServerVariables["HTTP_X_FORWARDED_FOR"];
if (ipAddress2 == null || ipAddress2.ToLower() == "unknown")
ipAddress2 = Request.ServerVariables["REMOTE_ADDR"];
//ipAddress2 = "127.0.0.1";
if (ips != null)
{
System.Collections.Generic.List<string> ipAddressList = new System.Collections.Generic.List<string>(
ips.Split(new char[] { '|' }, StringSplitOptions.RemoveEmptyEntries));
if (ipAddressList != null)
{
exceptionIP = ipAddressList.Find(delegate (string ipAddress)
{
return ipAddress.Equals(ipAddress2, StringComparison.CurrentCultureIgnoreCase);
});
}
}
if (exceptionIP == null || exceptionIP.Length <= 0)
{
this.Response.Redirect(maintenancePage);
}
}
}
// Logic for maintainence page
}

Related

ASP.NET MVC Redirect to same page after submit button is clicked

some friends and I have started a team project but we are stuck at this point. We made a function of the site to add comments under every post. The problem is that when submit is clicked it adds the comment but doesn't refresh the page which causes some problems. The author stays "anonymous" and when refresh button is clicked it shows an alert:
The page that you're looking for used information that you entered. Returning to that page might cause any action you took to be repeated. Do you wish to continue?
However, if we just type the URL again and click ENTER everything is good: the author shows up and the comment appears only once. So the only solution for us is to redirect to the same page. Here is the form:
<div style="text-align: left">
<div><i>Leave your comment</i>
</div>
<form method="post">
<fieldset>
<p>
<textarea rows="10" class="form-control" type="text" id="1" name="commentText" style="height: 100px"></textarea>
</p>
<p>
<input type="submit" name="buttonSubmit" onclick="redirect" value="Add comment" class="btn btn-default" style="" />
</p>
</fieldset>
</form>
</div>
This is how the comments are printed on the page:
<h3>Comments</h3>
<br>
<div>
#foreach (var comment in ViewBag.Comments) {
<section class="row">
<article class="post col-md-12">
<div class="about">
Posted on <i>#comment.Date</i>
#if (comment.AuthorId != null) { #: by <i>#comment.Author.FullName</i>
}else { #: by <i>anonymous</i>
}
</div>
<div class="body">#comment.Text</div>
</article>
</section>
}
</div>
Thanks in advance!
Use the #Ajax.BeginForm() helper.
In the AjaxOptions(), you'll want to set the Httpmethod to "Post", InsertionMode.InsertBefore (or After depending on where you want new comments), and UpdateTargetId = "your-comment-div".
You'll need to include jquery.unobtrusive-ajax.js so the Ajax helper works correctly. You can use the nuget package manager to pull it in. Be sure to add it to your jquery bundle.
Then, you need to create the post action in your controller to accept the comment params and return a partial view.
Doing thIs keeps the Ajax confined to a razor helper and controller method.
View:
#using (Ajax.BeginForm("AjaxAddComment",
"MyController",
/* route params */,
new AjaxOptions()
{
InsertionMode = InsertionMode.InsertBefore,
UpdateTargetId = "commentsDiv",
HttpMethod = "Post"
}, htmlAttributes: new { /* ... */ }))
{
<div class="form-horizontal">
#* comment form... *#
</div>
}
...
<div id="commentsDiv">
<div class="comment">...</div>
<div class="comment">...</div>
</div>
Controller:
[HttpPost]
//[ValidateAntiForgeryToken]
public async Task<PartialView> AjaxAddComment(string comment, /*...other params*/)
{
var newComment = ... // comment viewModel
// add comment to db
await db.SaveChangesAsync();
return PartialView("_CommentPartial", newComment);
}
_CommentPartial:
<div class="comment">
...
</div>

Object does not support this property or method - InnerHTML VBS HTA Issue

This has got to be an easy one, but I'm pulling my hair out.
I'm writing a new HTA, written several before now - but I can't get the InnerHTML property to work.
The error I recieve is on line 10. The error is:
Object doesn't support this property or method: 'text1.innerHTML'
I have compared my text1.innerHTML code areas to that in other HTA's that work fine and cannot see any difference. I've also checked the header / meta info and there's nothing different there.
Below are the snips of code:
<script language="VBScript">
Sub Window_OnLoad()
Self.resizeTo 800,670
Set objShell = CreateObject("WScript.Shell")
strShort = objShell.ExpandEnvironmentStrings("%USERDOMAIN%")
If strShort = "DOMAINA" Then text1.innerHTML="VPN Type 1"
If strShort = "DomainB" Then text1.innerHTML="VPN Type 2"
'This method will be called when the application loads
'Add your code here
End Sub
Sub EnableUpgrade()
If UACheckbox.Checked = True Then
UpgradeButton.Disabled = False
Else
UpgradeButton.Disabled = True
End If
End Sub
Sub OnClickButtonUpgradeButton()
'This method will be called when button "UpgradeButton" is clicked
'Add your code here
End Sub
</script>
<html>
<head>
<title>Test HTA</title></title>
<link href="Main.css" rel="stylesheet" type="text/css" />
<HTA:APPLICATION
APPLICATIONNAME="Babcock GlobalProtect Deployment"
ID="GlobalProtectDeployment"
VERSION="1.0"
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="no"
SCROLL="auto"/>
</head>
<body bgcolor="white">
<div class="wrappr">
<table class="top">
<tr class="top">
<td colspan="2">
<div class="wrapper">
<div class="topone" align=left><img style="width:125px;border:0;" vertical-align"center" src="WebVersion.png"></div> &nbsp &nbsp
<div class="topthree"><h1>Test HTA</h1>
</td>
</tr>
</table>
<table>
<tr><td>
<br>This upgrade will replace the <span ID = "Text1"> VPN software on this computer. This is mandatory, as <span ID = "text1"> will soon be decomissioned. The new VPN software that will be installed is VPNC.
</td></tr>
<br>
<input onclick="EnableUpgrade "type="checkbox" name="UACheckbox" id="UACheckbox">&nbspI confirm I have completed the above requirements
<br>
<input type="button" name="UpgradeButton" id="UpgradeButton" value="Upgrade" onclick="OnClickButtonUpgradeButton" disabled>
</table>
</div>
<!--Add your controls here-->
<!--{{InsertControlsHere}}-Do not remove this line-->
</body>
</html>
You are not closing the span tag in:
<br>This upgrade will replace the <span ID = "Text1"> VPN software on this computer. This is mandatory, as <span ID = "text1"> will soon be decomissioned. The new VPN software that will be installed is VPNC.
And id of elements should be unique in the page.
I think what you need is:
<br>This upgrade will replace the <span ID = "Text1"></span> VPN software on this computer. This is mandatory, as <span ID = "Text2"></span> will soon be decommissioned. The new VPN software that will be installed is VPNC.
And in the onLoad function,
If strShort = "DOMAINA" Then
Text1.innerHTML="VPN Type 1"
Text2.innerHTML="VPN Type 1"
End if

Load view after data is loaded

I have some trouble. I am using this plugin "angular-masonry" (it's on Github) to dynamically build the grid on the page. When the page loads I get this:
http://joxi.ru/YBQPVP3JTJCwfIgLgbc
Here is my code:
<div class="container" style="width:80%">
<h1 style="text-align: center; margin-bottom: 40px">
Category: {{category.text}}
</h1>
<div>(masonry='' load-images="false")
<div class="masonry-brick" ng-repeat="portal in category.claim_portals" style='width:50%;float:left'>
<div>
<h3>(style='margin-left:30px')
Portal: {{portal.text}}
</h3>
<div class="category-list" ng-repeat="claim in portal.portal_claim" style="margin-bottom:2px">
<div class="claim_sections">
<claimforlist claim="claim"></claimforlist>
</div>
</div>
</div>
</div>
</div>
</div>
But after resizing browser window, everything becomes normal and looks like this:
http://joxi.ru/iBQPVP3JTJCUfLnoqQQ
I think that view loads earlier than JSON data arrives.
Can anyone help and tell me how can I load view after the data has arrived? Or if you know another reason of such an issue, please reply.
Thanks in advance.
You can add a scope boolean variable with value set to false, and change the value to true on your http promise success.
Code sample:
function myController($scope, YourDataServer) {
$scope.dataLoadedSuccessfully = false;
yourDataServer
.query()
.$promise
.then(
function(result) {
$scope.dataLoaded = true; // set the value to true
});
}
HTML would look like:
<div id="loadingBar" ng-show="!dataLoadedSuccessfully">Loading data...</div>
<div id="dataWrapper" ng-show="dataLoadedSuccessfully">
<!-- data goes here -->
</div>

Prevent jQuery Mobile Page navigation (PhoneGap) IF

Using PhoneGap...
I would like to find a way to prevent the navigation for data-role='page', if the user has no network connection. I'm having a hard time finding any resources for this, am a few hours deep on google searching, although I could be using the wrong terms.
I want the user to only be able to navigate here if there is network connection:
<div data-role="page" id="Location">
<div data-role="header" data-theme="e">
Incid..
<h1>
Location</h1>
Use Current
</div>
<!-- /header -->
<div data-role="content">
<!--<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>-->
<div id="map_canvas">
</div>
</div>
Using this jQuery for pageshow:
$('#Location').live('pageshow', function (event, ui) {
try {
display();
}
catch (e) {
log(e);
alert(e);
}
});
I know I should be able to catch the network status using if(navigator.network.connection.type == 'none'), but I'm having difficulty stopping the Location page from showing.
Use $.mobile.changePage('#pageID') to change the page depending on if the user has a network connection or not.

Side by side images with no gap?

http://i.stack.imgur.com/o2Kht.png
Basically I want these buttons to be side by side.
I've put them in a container but I cannot get them side by side like the example below.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> <!-- Linking Style Sheets -->
</head>
<body>
<style type="text/css">
<!-- Background image -->
</style>
<div class="img-wrapper-center" id="titlebar">
<img src="titlebar.png" id="img1"/>
</div>
</div>
<div id="bodycontainer">
<div id="text">
Welcome to the shop, you can add your items to to the cart below
</div>
<div id="formcontainer">
<div id="myForm">
<form name="theForm" action="shop.html" method="post" onSubmit="return checkWholeForm(theForm)">
<input type="radio" name="ram" value="yes">yes<br>
<input type="radio" name="ram" value="no">no
<br><br>
<input type="radio" name="cpu" value="yes">yes<br>
<input type="radio" name="cpu" value="no">no
<br><br>
<input type="radio" name="harddrive" value="yes">yes<br>
<input type="radio" name="harddrive" value="no">no
<br><br>
</div>
<div id="submitbuttons">
<input type="submit" value="Submit">
<input type="reset">
</div>
</div>
</form>
<div id="buttoncontainer">
<div class="homebtn">
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>
</a>
<div class="shopbtn">
<a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/>
</a>
</div>
</div>
</body>
<!-- Start of rollover script -->
<script>
Rollimage = new Array()
Rollimage[0]= new Image(121,153)
Rollimage[0].src = "homebuttonup.png"
Rollimage[1] = new Image(121,153)
Rollimage[1].src = "homebutton.png"
function SwapOut() {
document.homebtn.src = Rollimage[1].src;
return true;
}
function SwapBack() {
document.homebtn.src = Rollimage[0].src;
return true;
}
Rollimageshop = new Array()
Rollimageshop[0]= new Image(121,153)
Rollimageshop[0].src = "shopbuttonup.png"
Rollimageshop[1] = new Image(121,153)
Rollimageshop[1].src = "shopbutton.png"
function SwapOutshop() {
document.shopbtn.src = Rollimageshop[1].src;
return true;
}
function SwapBackshop() {
document.shopbtn.src = Rollimageshop[0].src;
return true;
}
</script>
<!-- end of rollover script -->
<!-- Start of form validation -->
<script>
function checkWholeForm(theForm) {
var reason = '';
reason += checkRadioButtons(theForm.ram);
if (reason != '') {
alert(reason);
return false;
}
return true;
}
function checkRadioButtons(radiobuttons) {
var checkvalue = "";
var i=0;
var error = "";
var amountOfRadioButtons = radiobuttons.length;
for (i=0; i<amountOfRadioButtons; i++) {
if (radiobuttons[i].checked) {
checkvalue = theForm.ram[i].value;
}
}
if (!(checkvalue)) {
error = "Please choose an option for RAM.\n"
}
return error;
}
</script>
<!-- End of form validation -->
Sorry for delay, rofl im new to adding code to this so i did not know how to ident it.
.homebtn, .shopbtn{
display:inline; /*or inline-block*/
}
I made a jsfiddle here using images from google image search because I don't have access to your images, but the css should be quite similar for your own uses.
You should also fix your html for the button container
<div id="buttoncontainer">
<div class="homebtn">
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()">
<img name="homebtn" src="homebuttonup.png"/>
</a>
</div>
<div class="shopbtn">
<a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()">
<img name="shopbtn" src="shopbuttonup.png"/>
</a>
</div>
</div>
You currently have one button nested inside of the other.
Looking at your code, I can spot a few areas that can be improved.
First, you're using JavaScript to handle the button rollovers. Unless there is a specific reason to be doing this, it isn't necessary. A more efficient way to do this would be to use pure CSS for the button rollovers.
Second, you have the images embedded in the link itself:
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>
</a>
If you were to actually use CSS based navigation, you wouldn't need to do this. The benefit is less code and ultimately page size and load time. Keep in mind, every image loading is a separate HTTP Request to the server. This equals more bandwidth in the long run. Your website may not be effected by this type of stuff, but it's good practice; best practices.
I have created a JSFiddle to show you how I would approach your navigation. One other thing I would add is putting all of the navigation imagery into a Sprite.
http://jsfiddle.net/cbPRv/