trying to add two css files in my MVC project - asp.net-mvc-3

I want to include two css files for my MVC project. One for admin side and other for client side. For admin I have used shared/_Layout.cshtml file where I have added the following line of code...
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
For client side, I am trying to use Site.Master file in the Store folder, which is not in the Shared folder, where I haved added the following line of code between head...
<asp:ContentPlaceHolder ID="head" runat="server">
<link href="~/Content/Style.css"" rel="stylesheet" type="text/css" />
</asp:ContentPlaceHolder>
In my Views folder called Store/index.cshtml I have included the following line of code...
#{
<link href="#Url.Content("~/Content/Style.css")" rel="stylesheet"
type="text/css" />
}
but this is giving me a warning message...
Validation (XHTML 1.0 Transitional): Element 'link' cannot be nested within element 'link'.
So my 1st question is it possible to use two css file for my MVC project?
2nd, Have I approached this the correct way?
3rd question, what shall I do about this warning message.
In for my client side I am trying to create a sidebar in the Site.Master file adding the following line of code... But nothing is happening?
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
<link href="~/Content/Style.css"" rel="stylesheet" type="text/css" />
</asp:ContentPlaceHolder>
<!-- adding the following line of code -->
<div id="header">
<div class="title">My Project</div>
</div>
<div id="categories">
Will put something useful here later
</div>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<div class="title">SPORTS STORE</div>
</asp:ContentPlaceHolder>
</div>
</form>
I am using VS 2010, ASP.NET MVC 3 in C#. Thanks in advance if anyone can help me here?

Is it possible to use two css file for my MVC project?
Definitely
Have I approached this the correct way?
You're not using the proper syntax within the <link> tag to resolve the url to your CSS file. Try using this:
<link href="<%=ResolveUrl("~/") %>Content/Style.css"
rel="stylesheet" type="text/css" />
What shall I do about this warning message?
Might be a typo, but you also have a 2 closing double quotes "". This warning message should go away if you remove this.

Found a better way. Added a new layout.cshtml file in Views/Shared path. When creating a new index.cshtml through controller, you can select the new layout.cshtml file in Razor. in MVC 3 you don't need to define Layout = "~/Views/Shared/_LayoutClient.cshtml"; in each view file. _ViewStart.cstml has been already been created for you. So you can avoid the DRY.

Related

Featherlight external html opening (AJAX)

I'm sorry but I spent long time but can't figure out what is wrong to pop-up the other html file with the Featherlight. The manual says nothing additional so I will be happy if you will guide me what's wrong:
<link href="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
Open Ajax Content
<br>
Ver2
<br>
Open Ajax Content
You need to specify the class in your target html page
So within http://www.htmliseasy.com/popup/popup1.html
there should be a content here
(you can rename "jQuery-Selector" whatever you wish...)

Where to put css file in laravel project

I have been searching for an answer to this question with no luck. This is my second day using laravel and I'm trying to create a custom 404 error page. I don't know where/how to include my .css file. Can someone please help me with this?
Place your css files inside public folder and use link tag in html document (or 404 template)
Example
<link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" />
The best way is using blade syntax with the laravel helper for what you need
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
this folder css or whatever you named it, must be placed inside your public folder.
Search for Public folder in Laravel.
Create css folder (that contains stylesheet files of your project), javascript and Images folder (contains images that you will use in your project).
Go to layouts in app.blade.php file update html code using blade syntax:
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
and JS:
<script src="{{ asset('pickadate/lib/picker.js')}}"></script>
1. put your CSS file in directory [PUBLIC/CSS]
2. in your FileName.blade.php in file just write :
<head> <link rel="stylesheet" href={{ asset('css/article.css')}}> </head>
Note Again : Don't Write asset('public/css/article.css') this wrong
put it in your public file and the html tags in view then to connect them with the css use
<link rel="stylesheet" href="{{ URL.asset('css/style.css') }}">
<link rel="stylesheet" href="css/app.css">
simply add this your blade.php file

kendo ui core trouble getting started

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.

How can I add a script reference to _Layout.cshtml with a NuGet package?

I have a helper called 'SelectionOtherInput', for capturing a meaningful value when a user chooses 'Other' on a select list.
I have built a NuGet package for it, and it is ready to use as installed, provided there is a reference to it's JavaScript file in the page using it, or easier, in the _Layout.cshtm file. It's easy to tell the user, "install the NuGet package, then add this script reference", but why not tell them, "copy these files, then add this script reference?" and skip NuGet?
I realised editing the file may be complicated and involved the CodeDOM< but them's the risks.
Bounty guaranteed as soon as permitted!
Is it a Unix _Layout.cshtm file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Movies", "Index", "Movies")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
<section id="main">
#RenderBody()
<p>Copyright W3schools 2012. All Rights Reserved.</p>
</section>
</body>
</html>

asp.net mvc 3 razor sections and portable areas

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>

Resources