My team and I are currently developing an application for both Android and iOS using ASP.NET MVC 4, HTML5, and PhoneGap. The development works perfectly fine; however, one question remains unanswered: What is the recommended approach to generate the three files PhoneGap needs (one HTML page, one JavaScript file, and one CSS stylesheet) from our MVC solution?
Would you recommend using a Razor template-based approach? Or would you simply automatically copy the output HTML source after each build? Or would you suggest something completely else?
This morning, we decided to let ASP.NET MVC render a single view containing all our application's HTML which references several JavaScript files and CSS stylesheets. We then automatically grab the rendered HTML source and copy an index.html into a certain export folder on our local machine. That folder is ready to be deployed because it contains only one HTML file and additional JavaScript and CSS resources – exactly what PhoneGap expects.
Related
I am using Visual Studio 2022. I have a Blazor server application that I created about a year and a half ago in .net5. I recently converted it to .net6 although I did not change any of the code. I simply changed the target framework and it has all been working fine. I never used CSS Isolation when it was .net5 but I want to use it now. I created a .css file (CheckInQuestion.razor.css) for one of my .razor files (CheckInQuestion.razor) and added the link reference for the scoped css file to my _host.cshtml file at the bottom of the section.
<link href="Hub.App.styles.css" rel="stylesheet">
I can see the scoped css file in the obj folder like I would expect
When I run the application, the html elements in the component have the scope reference as well.
However, the css file cannot be found so it does not apply the css.
Incidentally, I created a new Blazor .net6.0 project using Visual Studio 2022 and the CSS isolation works exactly how it is supposed to.
Anyone have any suggestions as to what is preventing my application from finding the scoped css file when I run it? It does not work on localhost or my development server.
I use Visual Studio 2019 to develop a web ASP.NET MVC application.
When I debug, or execute my web application, with the browser debugger F12, I can read in the sources menu (view photo) that my pages are based on sccs style sheets located in a scss directory.
How to generated this directory? Why most of the css (coming from bootstrap) are translated into sass files ? Is it due to the package Web.Optimization which generate bundles? I don't understand the process and its utility.
Can someone answer my questions ?
For information, I installed bootstrap 4.5.3 with NuGet, and I noticed that several files where created in"Content" directory in the project explorer (bootstrap-grid.css.map, bootstrap-reboot.css.map, etc). So I think bootstrap is maybe the reason of scss files like _reboot.scss).
Scss files are translated (by engine Sass) into css. Only that files browser can understand.
I think files from picture are just in public folder.
(*.map, *.min.css, etc) files are optional.
In Bootstrap documentation is written:
compiled and minified CSS and JS (bootstrap.min.). CSS source maps (bootstrap..map) are available for use with certain browsers' developer tools
https://getbootstrap.com/docs/3.4/getting-started/#whats-included-precompiled
The minimized files are size optimized and maps are helpful for developer tools use.
Thanks Apan.
Finally, I can keep only the 2 files bootstrap.css and the js, because MVC minimizes them with bundling process.
I googled this until my eyes bled. I can't find what's causing it to save my life.
I'm using MVC4 with KendoUI HTML5 Framework; one of the 2015 editions. Everything's .min so I can't find the exact version.
On development, Kendo UI icons show fine.
On a VM I created to test deployments, Kendo UI icons show fine.
On the customer's network in production, Kendo UI icons do not show.
On the customer's network, you can navigate to the location of the icon sprite file successfully (no 404 error)
Bootstrap icons show normally in all cases. It's only the Kendo UI icons.
Dev means there's no inherent problem with the icons or CSS. The VM deployment working fine means it is most likely not an MVC bundling problem--I'm using the following solution for the bundling issue.
.Include("~/Content/kendo/kendo.bootstrap.min.css", new CssRewriteUrlTransform())
I have absolutely no idea what is different on my customer's network that causes KendoUI icons not to display. I'm baffled, and--as always--unbelievably grateful for any help you all can give.
For a start, you can disable bundling on production, to see if it is related to the problem.
On the other hand, with bundling enabled, there should be some 404 error in the browser console when the sprite file doesn't load - I suggest checkng what the request URL is in that case, and compare it with the working URL when you access the sprite file directly.
Also check this thread that may be applicable:
CssRewriteUrlTransform with or without virtual directory
In my case the icons were not copied over to production. I copied the kendo sub folder from contents folder to the corresponding folder in production and that solved it. Visual Studio 2010 MVC 3. No bundling used.
I'm starting a new project with asp.net mvc4 internet application.
First thing I did was install a package called Twitter Bootstrap for Asp.Net MVC 4 Sample via nuGet.
This installed other two packages Bootstrap and Twitter Bootstrap for Asp.Net MVC 4.
When I run the application,I get this
I didn't face this problem in previous projects. When I installed twitter bootstrap, things were fine when i built the application.
Can anyone explain or suggest, what might be going wrong?
Edit 1:
I have another project where bootstrap works fine. When I run the two projects in chrome and check the network, file that are loaded for both the projects are same.
There is a file BundleConfig.cs (or a specific BootstrapBundleConfig.cs) in your "App_start" folder of your MVC4 project.
It will have a declaration of something like this:
// It won't look exactly like this..
bundles.Add(new StyleBundle("~/Content/bootstrap/css/style").Include(
"~/Content/bootstrap/css/bootstrap.css",
"~/Content/bootstrap/css/bootstrap-theme.css"
));
Now you must go to your "Views/Shared/_Layout.cshtml" file (or whatever you base layout is) and add the following line within your head section.
<head>
/// Other stuff in here
// This renders the boostrap style
#Styles.Render("~/Content/bootstrap/css/style")
// include any overrides to bootstrap you have after the library
</head>
We have a lot of websites with common functionality developed by 3 persons, in the business logic we use a common library project (in a shared directory) so we all use the same functions. This way the corrections and improvements are shared for the following projects or when we recompile an existing project. We have a class for some UI common functions too (loading a ListControl with x data and so)
The problem is with some web parts like CSS, Javascripts, Common Pages (login, configuration, customer management), those we don't know exactly how we can centralize them so we have those parts in the shared project so we don't have to copy paste corrections/improvements manually to the other websites each time...
Example of current website structure:
-MyWebSite1
-Styles.css
-Scripts.js
-Login.aspx
-Funx.cs (Functions specific to this site)
-Consx.cs (Session and other variables specific to this site)
-CommonProject (In a network shared directory)
-FunBusiness.cs
-FunWebUI.cs
-ConsBusiness.cs
-ConsWEB.cs
Is there a way of doing this?
For now the closest we have come to solving this problem is following this article for the Javascript part:
http://msdn.microsoft.com/en-us/library/bb398930(v=vs.100).aspx
We are now investigating using only one reference to a js file and including the other javascript references dinamically and the common CSS and MasterPages parts...
Maybe you can add those common references files as Linked File in Visual Studio. In this way you can maintain one file, while kept in a different location.
From Microsoft:
Link file leaves the file in its current location and maintains a link to the file from your current project.
Another solution would be to create a copy script before compile in Visual Studio. Reference over here.