After deployed to server, website UI does not display properly - twitter-bootstrap-3

I have an ASP.Net MVC5 based web app. I am using Bootstrap for the UI.
On my machine everything is perfect. After login, the following page is shown.
Analytics page as on localhost
After I deploy to the web server, I get the following page post login.
Analytics page from the server
You can see that the page from server is all messed up. It is almost like all divs are showing up with their borders. I am not sure what is going wrong here. Any inputs are most welcome.
Update:
I have another application "TalkApp" that has the same login page as this Analytics App. "TalkApp" UI has no issues.
So I checked the page source for the login page. The TalkApp has these links:
<link href="/TADATalk/Content/bootstrap.css" rel="stylesheet"/>
<link href="/TADATalk/Content/site.css" rel="stylesheet"/>
<script src="/TADATalk/Scripts/modernizr-2.8.3.js"></script>
<script src="/TADATalk/Scripts/jquery-3.1.1.js"></script>
<script src="/TADATalk/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/TADATalk/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/TADATalk/Scripts/bootstrap.js"></script>
Whereas, the AnalyticsApp did not have these. Instead it had ..v="e34hgd5677.." type of entries. I removed use of bundles from AnalyticsApp and directly added the link refs. Now the UI loads properly.
So the question still stands: why did bundles not work with one app but work with another app (which is also deployed on the server).

The only thing I can think of as to why your bundles aren't loading but hardcoding css links does, is if you're not including them in your _Layout.cshtml. Here is an example from my application.
BundleConfig.cs (RegisterBundles method)
.... other bundles ...
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
... other bundles ...
_Layout.cshtml*
... other head stuff ...
#Styles.Render("~/Content/css") <--- this name is the "virtual path" to that bundle of styles
... other head stuff ...
You define the bundles in BundleConfig.cs, which gets called from your Global.asax.cs.ApplicationStart() method:
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
ViewEngineConfig.RegisterEngines(ViewEngines.Engines);
}
This should all be setup in the older template startup project.

Related

Setting ASP.NET Core 2.0 favicon

I'm trying to add and set favicon.ico.
When I saw a initial project that Visual Studio 2017 make automatically, the favicon.ico file is just in the wwwroot directory and there is no setting for it.
So, I add favicon file into wwwroot directory.
But the favicon does not show up in any browsers.
How can I set the favicon in ASP.NET Core 2.0?
wwwroot/index.html file has the link to favicon.
<link rel="icon" type="image/x-icon" href="favicon.ico">
is the code to add favicon to the website.
For .net core Single Page Application (SPA) project the favicon will be rendered from its own respective static file. For example if are using angular as client application there is index.html file inside src and in index.html you can link your favicon with following code
<link rel="icon" type="image/x-icon" href="favicon.ico">
In _Layout.cshtml include,
<link rel="shortcut icon" href="//.../content/images/favicon.ico" />
If your favicon.ico file is in wwwroot folder and if you are still getting 404 error when browser try to get favicon.ico, make sure you have app.UseStaticFiles(); in your Startup.cs -> public void Configure(IApplicationBuilder app, IHostingEnvironment env).
Please read
Static files in ASP.NET Core for detail.
If you add favicon.ico in wwwroot and not in any subfolder, you don't need to add the <link ... tag in your html or cshtml.
Just a headsup for anyone struggling with this issue. If you're serving up a spa from .net core 2 (angular, react, other) sometimes the spa will look under the spa's static file's folder. I struggled with for awhile and found that the only way i could get the favicon to show up with my angular app was to put the favicon and site.webmanifest in my app/assets folder. Worked without any modification after that. There are some suggestions out there to modify the content response types but didn't have to do that as long as the files were in the right folder. Hopefully this helps someone else.

static resources are not loaded for an application deployed on weblogic12c

I deployed a web application on WebLogic 12c (12.1.3) and when I hitting the login page, I get a HTTP-200 response for the login.html but the js and css files which are included in the login.html, not getting loaded and throwing HTTP-404 error.
Like below js is included in html
<script language="JavaScript" type="text/javascript" src="/resources/js/validation.js"/>
For validation.js getting http 404 error.
The resources folder is already under the application home directory.
I am new to weblogic.
Let me know if any configurations are required to set to get these js-files loaded whenever required for an application.
I am able to get the static contents after adding dot (.) in the src attribute like below
script language="JavaScript" type="text/javascript" src="./resources/js/validation.js" />

ASP.NET page is not loading CSS styles on my local iis web server

I have a local ASP.NET web site written in VB.NET runing on W7.
The default web page contains a simple style sheet which is loaded as follows
<link rel="stylesheet" href="dchs.css" type="text/css" media="screen" runat="server"></link>
The page is displayed without the above styling. The style sheet does exist as I can display it via the web browers as
file:///c:/inetpub/wwwroot/c1/dchs.css
but I cannot display it via the brower using
http://localhost/c1/dchs.css
This leads me to believe that IIS has some form of access problem to the C1 directory. It a similar way I can display a jpeg image via file://c1 bit not via localhost which gives an error message
The image "http://localhost/c1/menu.jpeg" cannot be displayed, because it contains errors.
How you attached the .css file to your html project? where is it located?
Options:
1. Drag and drop your .css file to your html page.(Inside)
like this:
<link rel="Shortcut Icon" href="images/fil.ico" />
Make sure all folders and files are include when project deployed And a correct calling of id or class in your css of course.

Resolving js and css urls affected by app.Map in ASP.NET 5

I am implementing multi-tenancy based on the first folder segment of the request url.
As such I'm configuring each tenant separately by branching with IApplicationBuilder like this:
PathString path = new PathString("/somefolder");
app.Map(path,
branchApp =>
{
// code goes here to configure the branch
}
as a result of this if my view has a link with url /Home/About for example, it automatically is adjusted to be relative to the folder I branched on when I visit /somefolder, ie the links change to /somefolder/Home/About, somefolder/Home/Contact etc
This was kind of unexpected to me but actually helpful.
But also if my view has
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/js/lib/jquery/dist/jquery.js"></script>
those now resolve to /somefolder/css/site.css and /somefolder/js/lib/jquery/dist/jquery.js
which is not what I want.
Is there some way I can change this behavior for js and css but keep it for navigation links?
No, you can't. At least, not easily: when using app.Map, it automatically sets HttpContext.Request.PathBase with the path parameter you specified, which causes the exact behavior you're seeing (it's basically a "virtual directory" equivalent).
The best option is to stop using virtual path links (~/) and replace them by standard root-relative links (/), that are not processed by Razor and MVC.
<link rel="stylesheet" href="/css/site.css" />
<script src="/js/lib/jquery/dist/jquery.js"></script>

Getting Rally API key to work outside of rally App

I have seen this question and response, but it still does not work for us:
Embedding Apps with API key
We are having a problem with the Rally API. Our intent is to make a stand-alone page (outside of Rally) that shows the portfolio Kanban.
I have attached the test page. It was created with the rally-app-builder. We created an API key. When we try to load the page, passing the API key, we get a json exception about cross-site violations. The documentation says that we will see this error if we don't pass the key. But even when we do pass it, the error persists.
We have tried it through an apache server, so the issue about being a standalone file is not our problem. Does anyone have any other ideas?
The html page is below.
<!DOCTYPE html>
<html>
<head>
<title>helloworld</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define("CustomApp",{extend:"Rally.app.App",componentCls:"app",items:{html:'App SDK 2.0rc3 Docs'},launch:function(){this.add({xtype:"rallycardboard",types:["Portfolio Item/Feature"],attribute:"State",storeConfig:{context:{project:"/project/14292239482",projectScopeUp:!1,projectScopeDown:!0}},context:this.getContext(),readOnly:!0})}});
Rally.launchApp('CustomApp', {
name:"helloworld",
parentRepos:""
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
The api key we generated is of type alm-wsapi-read-only. When page is loaded, even with apikey parameter provided, we get the JSON x-site error.
We are wondering if there is a config to change on Rally subscription side or perhaps there is an error in the documentation or something else simple.
I submitted a defect. It works up to the point when I load an App-debug.html using rally-app-builder run command:
rab run
and append apiKey to the app's URL as a query parameter. It loads fine using the apiKey:
The problem starts when I choose a different server to load an embedded app, for example:
a)start a simple http python or node server in another directory
b)copy App-external.html from deploy folder to the directory from which the server is running
c)create a new file, App-embedded.html in this directory :
<html>
<header>
<title>Embedded app test: revs</title>
</header>
<body>
<iframe src="http://localhost:9000/App-external.html?apiKey=_Ib4u6d7"></iframe>
</body>
</html>
d)load App-embedded.html
These steps results in cross-origin error.
If you check in Chrome's Network tab, or Safari debugger it shows that artifact (hierarchicalrequirement or defect) requests fails. Interestingly, the preceding subscription, user and schema requests complete successfully. Screenshot from Safari:
It turns out that the underlying issues were related to the CORS configuration on the Rally servers, not anything specific with App SDK 2.0rc3. As of 11/24/14 this issue should be resolved.