I am trying to get Angular UI Directives for bootstrap working with ASP MVC.
I have created a new, basic project and have used Nuget to add Twitter Bootstrap, AngularJS and UI Bootstrap.
I am registering these as bundles like so:
bundles.Add(new StyleBundle("~/Content/bootstrap")
.Include("~/Content/bootstrap.css")
.Include("~/Content/bootstrap-theme.css"));
bundles.Add(new ScriptBundle("~/bundles/angular")
.Include("~/Scripts/angular.js"));
bundles.Add(new ScriptBundle("~/bundles/angularUiDirectives")
.Include("~/Scripts/ui-bootstrap-{version}.js"));
My shared _Layout.cshtml page looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Testing Angular - #ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/bootstrap")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/angularUiDirectives")
#RenderSection("scripts", required: false)
</body>
</html>
So I have added the libraries for Angular UI directives, along with the dependencies listed here via Nuget, I am registering all of these libraries as bundles and then I am rendering these bundles on my shared master page.
So far so good, but then I get to the next instruction:
As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.bootstrap module
What does 'declare a dependency' mean in regards to HTML and CSS? The page on github suggests I need to put the following somewhere:
angular.module('myModule', ['ui.bootstrap']);
Where do I put this, and when do I run it?
Thanks
I solve this by doing the following:
I added the following to the opening HTML tag of my master page (replacing appName with the name of your application):
ng-app="appName"
I created a seperate Javascript class which I called test.js, registered this as a bundle and added the following:
angular.module('appName', []);
angular.module('appName', ['ui.bootstrap']);
The first line defines the angular module, the second wires it up to the UI Bootstrap library, and you need both.
Updated code to register my bundles is below:
using System.Web.Optimization;
namespace MvcApplication2
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/bootstrap")
.Include("~/Content/bootstrap.css")
.Include("~/Content/bootstrap-theme.css"));
bundles.Add(new ScriptBundle("~/bundles/angular")
.Include("~/Scripts/angular.js"));
bundles.Add(new ScriptBundle("~/bundles/angularUiDirectives")
.Include("~/Scripts/ui-bootstrap-tpls-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/test").Include("~/Scripts/Test.js"));
}
}
}
Here is the code for Test.js:
angular.module('appName', []);
angular.module('appName', ['ui.bootstrap']);
Here is the code for my master page:
<!DOCTYPE html>
<html ng-app="appName">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Testing Angular - #ViewBag.Title</title>
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/angularUiDirectives")
#Scripts.Render("~/bundles/test")
#Styles.Render("~/Content/bootstrap")
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
At this point we are fully setup with AngularJS, and Twitter Bootstrap and Angular Directives for Bootstrap in an ASP MVC application.
Related
Is it possible technically to have a full webassembly Blazor application as a Razor Class Library and then consume it in another ASP.NET project regardless of the consumer be MVC, Razor Pages, or Blazor app? Is it possible to define the routing within the Razor Class library?
I'm working on a project that is going to be published as a Nuget package. This package should be used in a variety of ASP.NET projects which are implemented as MVC, Razor Pages, or even Blazor.
I figured out how to get it running. I am using .NET 5.0.
First create a new Solution with a Razor Class Library project (Check the checkbox Support pages and views).
And create a MVC project.
In Startups.csadd the following:
public void ConfigureServices(IServiceCollection services)
{
...
services.AddRazorPages();
services.AddServerSideBlazor();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapRazorPages();
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
Also make sure you have app.UseStaticFiles(); in your Configure method.
Then, in your Razor Class Library, you can copy and paste the Pages, Shared folders and all other razor files from the example Blazor webassembly project. Also don't forget the wwwroot css folder and add your own wwwroot folder to your RCL.
In the Pages folder also create a new cshtml file. This will be the entry point to your Blazor app.
Example code:
#page
#using PROJECTNAME
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor WebAssembly Prerendered</title>
<base href="~/" />
<link href="/_content/PROJECTID/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="/_content/PROJECTID/css/app.css" rel="stylesheet" />
#*https://learn.microsoft.com/de-de/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#razor-class-library-rcl-support*#
<link href="/_content/PROJECTID/PROJECTNAME.bundle.scp.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
</body>
</html>
<script src="_framework/blazor.server.js"></script> <!--blazor.webassembly.js didn't work-->
The important parts are the <base href="~/" /> and the _framework/blazor.server.js.
If you don't map this page to be at the root, like #page "/" you have to make sure all the static content is mapped to the project-id correctly.
Also make sure the paths in the example projects NavMenu.razor are correct if you don't use / as the root. Has to be correct in the Razor Components too.
If you have problems with the _Imports.razor file, try adding the NuGet package Microsoft.AspNetCore.Components.WebAssembly
Also add the correct namespace for your shared folder, in the example project it's PROJECTNAME.Shared. Change it accordingly.
Here's a blogpost that helped me get things the right way: https://blog.joelving.dk/2020/02/reusable-ui-and-interchangable-hosting-models-in-blazor/
I am very new to Bundling and minification, I try to implement it for the first time in my MVC project.
I have added a BundleConfig.cs file:
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
//libs scripts
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/libs/jquery/jquery-{version}.js",
"~/Scripts/libs/jquery/jquery-ui-{version}.js",
"~/Scripts/libs/jquery/jquery.mask*",
"~/Scripts/libs/jquery/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/ko").Include(
"~/Scripts/libs/ko/knockout-{version}.js"));
//site scripts
bundles.Add(new ScriptBundle("~/bundles/site").Include(
"~/Scripts/site/*.js"));
bundles.Add(new StyleBundle("~/Content/site/").Include("~/Content/site/*.css"));
}
}
And added in Global.asax:
BundleConfig.RegisterBundles(BundleTable.Bundles);
Then I rendered the scripts/css in my Layout page:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/site/Fonts.css")
#Styles.Render("~/Content/site/Site.css")
#RenderSection("styles", required: false)
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/ko")
#Scripts.Render("~/bundles/site")
#RenderSection("scripts", required: false)
</head>
But this is not working, I keep getting all kind of errors that indicate that the scripts and css are not being recognized.
For example:
Uncaught ReferenceError: jQuery is not defined
What am I doing wrong?
As per #BasantaMatia comment that gave me the idea, setting:
BundleTable.EnableOptimizations = true
In the Global.asax file, after:
BundleConfig.RegisterBundles(BundleTable.Bundles);
Solved the issue.
See here you are adding 2 times all the scripts files,
You already added reference your bundle jquery, ko and site.
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/ko")
#Scripts.Render("~/bundles/site")
Then there is no need to add again these files.
<script src="~/Scripts/Libs/jquery/jquery-3.1.1.min.js"></script>
<script src="~/scripts/libs/jquery/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/Libs/jquery-mask/jquery.mask.min.js"></script>
<script src="~/Scripts/Libs/knockout/knockout-3.4.1.js"></script>
<script src="~/Scripts/Site/Site.js"></script>
I have ASP.NET MVC application and im using Telerik's UI for ASP.NET MVC framework for few controls.
1> The application is using bootstrap 3.3.6
2> Telerik also provides bootstrap styling for their controls. so i have bundled those styles as well.
3> I also have my own site.css so i can override some of the styles.
Here is my BundleConfig.cs
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
// jQuery, bootstrap and kendo JavaScripts are bundled here
// kendo bootstrap-theme CSS
bundles.Add(new StyleBundle("~/Content/kendo-bootstrap/css").Include(
"~/Content/kendo/2016.1.412/kendo.common-bootstrap.min.css",
"~/Content/kendo/2016.1.412/kendo.bootstrap.min.css"));
// bootstrap CSS
bundles.Add(new StyleBundle("~/Content/bootstrap/css").Include(
"~/Content/bootstrap.min.css"));
// site CSS
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css"));
}
}
This is how im referencing them in layout.cshtml
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/kendo-bootstrap/css")
#Styles.Render("~/Content/bootstrap/css")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/kendo/2016.1.412")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
</body>
</html>
Do we need to refer CSS in particular order? Whats the recommended order?
This would be the order in your razor (cshtml) file:
// Generic bootstrap css
#Styles.Render("~/Content/bootstrap/css")
// Css that kendo overwrites or extends based on bootstrap
#Styles.Render("~/Content/kendo-bootstrap/css")
// Your own css that can override the previous css files
#Styles.Render("~/Content/css")
that way bootstrap doesn't overwrite the style that was set by the kendo-ui library.
I'm unsing TypeScript AMD (RequireJs) and AngularJs.
I want to use AMD for my typescript code and not for the rest: jquery, angular, bootstrap, ...
For thirdparty js I'm using MVC bundling and I want to continue this way.
This is my thirdparty bundle config:
bundles.Add(new ScriptBundle("~/bundles/thirdparty").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/require.js",
"~/Scripts/angular.js",
"~/Scripts/angular-route.js"
));
My _Layout.cshtml is something like:
<!DOCTYPE html>
<html ng-app="PafBase">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
#Scripts.Render("~/bundles/thirdparty")
<script>
require.config({
baseUrl: 'typescript/'
});
require(['module/BaseApplication']);
</script>
</head>
<body>
#RenderBody()
</body>
BaseApplication.ts is something like:
var app: ng.IModule = angular.module('PafBase', ['ngRoute']); // Breakpoint here ****
app.config(['$routeProvider', ($routeProvider) => { ... }]);
When run the application I get this javascript error:
[$injector:modulerr] Failed to instantiate module PafBase due to:
Error: [$injector:nomod] Module 'PafBase' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
If I continue the execution I can see that BaseApplication.ts is executed after the angular error.
I think it can be due to angular scan the DOM after ready and found <html ng-app="PafBase"> then search "PafBase" module and not find it due to requireJs don't load BaseApplication.ts before angular scan the DOM.
How to do angular scan the dom after my code is executed?
You can manually bootstrap Angular instead of specifying ng-app="PafBase". Take a look at the docs here: https://docs.angularjs.org/guide/bootstrap
Basically you just need to remove ng-app from your html and add this to your JS
angular.element(document).ready(function() {
angular.bootstrap(document, ['PafBase']);
});
I have an issue where icons are not displaying when publishing remotely. If I run the project within Visual Studio 2010 via http://localhost:62299/ I see everything perfectly in Firefox, but if I use the same browser to view the remote website, the icons do not show. Getting varied results across verions of IE too.
I have ensured the full /Contents and /Scripts folders have been copied across in their entirety to ensure no files have been omitted. But despite this, icons will still not show.
BundleConfig.cs
using System.Web.Optimization;
namespace WebApplication1
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.IgnoreList.Clear();
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryold").Include(
"~/Scripts/Compatibility/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryuiold").Include(
"~/Scripts/Compatibility/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/ie9").Include(
"~/Scripts/html5shiv.js",
"~/Scripts/respond.min.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap*"));
bundles.Add(new ScriptBundle("~/bundles/freelanceold").Include(
"~/Scripts/jquery.easing.min.js",
"~/Scripts/classie.js",
"~/Scripts/freelancer.js"));
bundles.Add(new ScriptBundle("~/bundles/freelance").Include(
"~/Scripts/jquery.easing.min.js",
"~/Scripts/classie.js",
"~/Scripts/cbpAnimatedHeader.js",
"~/Scripts/freelancer.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/Site.css"));
bundles.Add(new StyleBundle("~/Content/font-awesome").Include(
"~/Content/font-awesome/css/font-awesome.min.css"));
}
}
}
_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="" />
<meta name="author" content="" />
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/font-awesome")
#Scripts.Render("~/bundles/modernizr")
<link href='http://fonts.googleapis.com/css?family=Montserrat:400' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css' />
</head>
<body id="page-top">
#RenderSection("featured", required: false)
#RenderBody()
<footer class="text-center">
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © 2014 - MySite
</div>
</div>
</div>
</div>
</footer>
<div class="scroll-top page-scroll visible-xs visble-sm">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!--[if lt IE 9]>
#Scripts.Render("~/bundles/jqueryold")
<![endif]-->
<!--[if gte IE 9]><!-->
#Scripts.Render("~/bundles/jquery")
<!--<![endif]-->
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/freelance")
<!-- IE8 support for HTML5 elements and media queries -->
<!--[if lt IE 9 !IE]>
#Scripts.Render("~/bundles/ie9")
<![endif]-->
#RenderSection("scripts", required: false)
</body>
</html>
Any help would be be much appreciated :-)
I had this same issue with a set of css files, where the request to the combined style url would result in a 301, then the final destination resulted in a 403 (forbidden). It's because your style bundle url of "~/Content/font-awesome" matches an actual folder path. I think the virtual path resolution is matching it to an actual physical folder location first, and if that fails, then it matches to a virtual bundle url if possible. If you change it to what I have below and update your view to match, you should be fine:
bundles.Add(new StyleBundle("~/Content/font-awesome-bundle").Include(
"~/Content/font-awesome/css/font-awesome.min.css"));
#Styles.Render("~/Content/font-awesome-bundle")
I had this same issue with a project at work. What is happening is that some of the font-awesome files weren't included in the publish.
The .eot, .tff, and .woff were not included for me. I had to click on the files, and change the Build Action from "None" to "Content". At that point, they would output correctly.
For the record, that was in Visual Studio 2010, but in 2013, it appears that they are set to "Content" correctly.
I had a similar issue with font awesome below listed is my current bundle value and this solved the issue with additional references from Font-awesome.css file
bundles.Add(new StyleBundle("~/Framework/libs/vendor/font-awesome/4.4.0/css/font-awesome").Include( "~/Framework/libs/vendor/font-awesome/4.4.0/css/font-awesome.css"));
when the path is relative the to the actual font-awesome css file the relative path to the eot,tff and woff files will also become correct.