Is it possible to have a portable area feed into a ASP.Net MVC 3 razor section? I have a section in my for placing JS files, CSS, fiels, etc. I want to be able to target the head section from portable areas for any JS, CSS files the portable area needs. Is this possible?
Thanks
Tom
You can use master page concept just like _Layout.chtml to put portable sections. (It event works for header)
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet"
type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")"
type="text/javascript"> </script>
#{
//access your portable section here.
}
</head>
<body>
#RenderBody()
</body>
</html>
Related
I've been trying to understand how can I use Angular 5 (or 2 or 4) together with Spring thymeleaf template together. My problem is that Angular 5 runs on CLI and it resolves as it's own project (app folder). But that makes it SPA and to be honest I do not like full SPA applications. In my opinion it makes them slow when huge data is there to be processed.
Instead I want to make multi page applications (which means page refresh and server side rendering). And I want to use some Angular 5 features (for example two way data binding). But how exactly I can achieve that? In Angular 1 (AngularJS) all I had to do was include it's source and done. But how about with Angular 5?
Its not much different from AngularJS. You just need to include compilation of the typescript to javascript in your build using something like frontend-maven-plugin. In your thymeleaf templates you would need to point to your generated js files.
Check out the following:
http://justincalleja.com/2016/04/17/serving-a-webpack-bundle-in-spring-boot/
http://blog.gerardin.info/archives/824
I used Thymeleaf to serve a common header and footer
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My APP</title>
</head>
<body>
<header th:replace="header.html :: headerContent">header content</header>
<app-root></app-root>
<footer th:replace="footer.html :: footerContent">footer content</footer>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
I am wondering how Apache Mesos implements the front-end web ui (localhost:port) in which users can track the system's current status and the submitted jobs. Is there any library for this? How does Mesos do this (in C++)?
Well, having a look at the source code reveals what it's using:
<!DOCTYPE html>
<html lang="en" ng-app="mesos">
<head>
...
<link href="/static/css/bootstrap-3.3.6.min.css" rel="stylesheet">
...
</head>
<body>
...
<script src="/static/js/jquery-1.7.1.min.js"></script>
<script src="/static/js/underscore-1.4.3.min.js"></script>
<script src="/static/js/zeroclipboard-1.1.7.js"></script>
<script src="/static/js/angular-1.2.3.min.js"></script>
<script src="/static/js/angular-route-1.2.3.min.js"></script>
<script src="/static/js/ui-bootstrap-tpls-0.9.0.min.js"></script>
...
</body>
</html>
So, it's using
Angular
jQuery
Bootstrap
I am trying to get started with kendo ui core. I followed the instructions at
http://docs.telerik.com/kendo-ui/getting-started/introduction?utm_source=telerik&utm_medium=email&utm_campaign=kuicore1
which say to include a link to the file js/kendo.web.min.js but this file was not in the kendoui.core download.
I tried substituting js/kendo.web.min.js for js/kendo.core.min.js which was in the download but that doesn't work either.
I am also getting a javascript console error on a file I've not even called.
GET /telerik.kendoui.2014.1.416.core/js/jquery-1.9.1.js 404 (Not Found)
I tried including both a local copy of jquery-1.9.1.js and a link to google cdn which removed the 404 error but still the kendo ui components don't work.
Please help me get started, thanks
<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.core.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
If you use Kendo UI Professional then you can use core and you have all the JavaScript needed in one single file (kendo.web.min.js) -except jQuery- but this includes a lot of code that you might not need. That's why Telerik also distributes the separate files making your life harder but your web more efficient.
You can use the following example and then you don't need to setup anything else. If you copy this to a file and open it in a browser it should work...
<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.ui.core.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
But this is not efficient because you are loading all the widgets and you are bringing them from internet.
BUT if you want to use Kendo UI CORE the file that you need to include with all the widgets (included in this core) is NOT kendo.core.min.js but kendo.ui.core.min.js. So your code should be:
<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="./styles/kendo.common.min.css" rel="stylesheet" />
<link href="./styles/kendo.default.min.css" rel="stylesheet" />
<script src="./js/jquery.min.js"></script>
<script src="./js/kendo.ui.core.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
BUT it seems that you want to deploy it in your server / computer instead of from internet. Then you need to copy to your system:
JavaScript:
js/jquery.min.js
js/kendo.ui.core.min.js
CSS:
styles/kendo.common.min.css
styles/kendo.default.min.css
plus files used by Default style:
styles/Default/editor.png
styles/Default/imagebrowser.png
styles/Default/indeterminate.gif
styles/Default/loading.gif
styles/Default/loading-image.gif
styles/Default/loading_2x.gif
styles/Default/slider-h.gif
styles/Default/slider-v.gif
styles/Default/sprite.png
styles/Default/sprite_2x.png
All this files are referenced by kendo.default.min.css and you will find them in the downloaded zip containing Kendo UI Core.
I am unable to get Button() builder in view page, my page is designed as follows..
#using Kendo.Mvc.UI
<h2>ButtonKendoHelper</h2>
<html>
<head>
<link href="~/Scripts/Kendo/Styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Scripts/Kendo/Styles/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery.1.8.3.js"></script>
<script src="~/Scripts/Kendo/kendo.web.min.js"></script>
</head>
<body>
#(Html.Kendo().**button()**
</body>
</html>
when i entered "b", it is showing MobileButton Controls.
may i know why i am unable to get Button Builder?
You are probably using an old version which doesn't yet support the Kendo Button. Try upgrading to the latest version.
I'm trying to reference the css files of bootstrap inside my views. I'm using Codeigniter as my framework. CI has a folder for the views, but I haven't been able to reference the stylesheets. This is what I'm doing right now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<title>
Login
</title>
</head>
<body>
<div class="container">
And so on... But the style is just plain html.
I know there are plenty of questions in stackoverflow regarding this, like this one, but I haven't found a solution in them. Any help would be great.
Solved my problem.
It was a mix of not putting the correct DOCTYPE and also for some reason I had to use <?php base_url();?> for the urls... If someone could explain this to me it would be great to learn more.