Loading a view specific stylesheet in an asp.net mvc3 app? - asp.net-mvc-3

I'm trying to load a view specific stylesheet in an asp.net mvc3 application (just learning this stuff!), so in my _Layout.cshtml I have:
<head>
<!--- All the common css & JS declarations here -->
#ViewBag.PageIncludes
</head>
<body>
Then in my controller I have:
public ActionResult Index()
{
ViewBag.PageIncludes = "<link rel='stylesheet' type='text/css' href='../Content/viewspecificstylesheet.css')' />";
return View();
}
However, when I view the page, even though the declaration is in the head, the text is rendered in the body, and thus rendered as text.
A couple of questions as a result:
Why, even though I declare in the head is this rendered in the body?
What is the best practice for loading a specific stylesheet for a given view/controller?
Thanks

You could use sections:
<head>
<!--- All the common css & JS declarations here -->
#RenderSection("Styles", false)
</head>
<body>
...
</body>
and then in the Index.cshtml view:
#section Styles {
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/viewspecificstylesheet.css")" />
}
<div>This is the index view</div>
and your controller no longer needs to worry about styles which is purely view specific responsibility:
public ActionResult Index()
{
return View();
}

Related

"typescript intellisense" in my razor views?

I'm wondering if it's possible to get "typescript intellisense" in my razor views, as I have in my ts-files?
This is my app.ts file (when I type 'this.' the 'myExampleMessage' property shows up):
/// <reference path="Scripts/typings/angularjs/angular.d.ts"/>
'use strict';
var app = angular.module('app', []);
class TestController {
constructor($scope: ng.IScope) {
this.myExampleMessage = "Hello";
}
myExampleMessage: string;
}
This is my default.cshtml file (when I type 'tController.', no intellisense show up):
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<title>TypeScript HTML App</title>
<script src="Scripts/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="TestController as tController">
<h1>TypeScript HTML App</h1>
<div id="content">{{tController.myExampleMessage}}</div>
</body>
</html>
What I would like, is for Visual Studio (2013) to understand what tController is, and give me the properties defined on this class. In this case it would be the 'myExampleMessage' property.
I'm I doing something wrong, or isn't this possible?
I'm I doing something wrong, or isn't this possible?
It isn't supported at the moment.

What is layout/template/themes in codeigniter

I'm new in codeigniter, I feel trouble about layout/template/themes in codeigniter.
I don't know when should using one of them..
What is the best way that i can do? if i want to make a website with free a html/css template like
goodnatured
|--img
|--img01.jpg
|--css
|--style.css
|--js
|--jquery.js
|--index.html
Anyone can tell me a tutorial, suggest, ... thanks
I just write little additional library(application/libraries/display_lib.php) for rendering tempates and similar page blocks.
Something like this:
class Display_Lib{
private $_CI;
private $_template_data;
public function __construct()
{
$this->_CI =& get_instance();
}
public function set($key, $value)
{
$this->_template_data[$key] = $value;
}
public function get($key)
{
return $this->_template_data[$key];
}
public function get_template_data()
{
return $this->_template_data;
}
public function display_page($view, $data = array())
{
$this->set('content', $this->_CI->load->view($view, $data, TRUE));
$this->_CI->load->view('templates/main_template', $this->get_template_data());
}
}
Set this library in auto load:
$autoload['libraries'] = array('session', 'database', 'display_lib');
And call it in controller:
class Main extends CI_Controller{
public function index()
{
$some_data = array();
$this->display_lib->display_page('views/main_view', $some_data);
}
}
Template example:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<?=base_url();?>">
<meta charset="utf-8">
<link rel="icon" href="<?=site_url('img/favicon.ico')?>" type="image/x-icon"/>
<link rel="stylesheet" href="<?=site_url('css/style.css');?>" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="<?=site_url('js/jquery-1.10.2.min.js');?>"></script>
<title>Some page title</title>
</head>
<body>
<header></header>
<div class="auth_wrapper">
<div class="content">
<?=$content;?>
</div>
<div class="buffer"></div>
</div>
<footer></footer>
</body>
</html>
And application/views/main_view simple exmaple:
<div>Come content will be here</div>
This lib allow to use templates and render views from controllers.
Templates handle the layout of your page. You create a template that will contain your meta, header, footer, and a space for the body. The body get injected in the template, this is where the content change.
The idea is that most of the site don't change, only the body changes. This is where templates are useful, they save you time and increase consistency.
See this template library, it's pretty good: http://getsparks.org/packages/template/show
Themes is combined with a template as templates often define the layout and a theme just 'skin' the layout. A theme include assets and styles that will modify the template further more.
Cheers
Make a template.php, header.php, footer.php. Below is template.php, Similarly make header and footer and place them all in views folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="<?=site_url('img/favicon.ico')?>" type="image/x-icon"/>
<link rel="stylesheet" href="<?=site_url('css/style.css');?>" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="<?=site_url('js/jquery-1.10.2.min.js');?>"></script>
<title>Some page title</title>
</head>
<body>
<header><?=$this->load->view('header');?></header>
<div class="wrapper">
<div class="content">
<?=$main?>
</div>
</div>
<footer><?=$this->load->view('footer');?></footer>
</body>
</html>
In your Controller function:
function index(){
$data = array();
$data['main'] = "home"; #this view is home.php in views folder, the content part of template.php
$this->load->view('template', $data); #this is the template file being rendered.
}
This is the most simple way of using templates in CI I think.

want to put #renderbody() into a partial view source by _layout

Creating an MVC 3 Razor project. have a very involved UI design. I wanted to put #renderbody() into a partial view source by _layout. The compiler won't let me. Is there a way to do this?
Instead of partial view you can go for master/sub layouts.
MasterLayout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
</head>
<body>
#RenderBody()
</body>
</html>
Layout.cshtml
#{
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
// html code above render body
#RenderBody()
// html code below render body
Your sublayout(Layout.cshtml) contains the code that should be in the partial view.

Adding data on Print functionality in MVC3

I have a web page designed in MVC3. I want to add some data (a disclaimer text) at the bottom of the page on the print button click and then print the page. How to do this?
Thanks!
Description
You can do this using css.
Create a div at the end of your page and give them a className disclaimer
Create a stylesheet file for the normal view of your page and set the display attribute to none
Create another css file called print.css and set the display attribute to visible
Sample
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="myCSSfile.css" rel="stylesheet" type="text/css" media="screen">
<link href="print.css" rel="stylesheet" type="text/css" media="print">
<head>
<body>
<!--- your content --->
<div class="disclaimer">Your disclaimer text</div>
</body>
</html>
Your myCSSfile.css
.disclaimer { display: none; }
Your print.css
.disclaimer { display: block; }
More Information
CSS Design: Going to Print
You want to use CSS and print media style sheets to make the element visible for printing.
A basic tutorial about this can be seen here: CSS Media Types Create Print-Friendly Pages

ASP.NET MVC layout

I have layout page and the page that uses layout.
How can I add some new elements to the head not changing layout.(layout already contains head)?
Layout:
<head>...</head>
I want my page be like:
<head>all layout head logic... plus
my page new elements...
</head>
You could use sections in the layout. For example:
<html>
<head>
#RenderSection("scripts", false)
</head>
<body>
#RenderBody()
</body>
</html>
and then in the view override this section and provide contents for it:
#section scripts {
<script type="text/javascript">
alert('hello');
</script>
}
<div>Hello from the index view</div>
And since the section is optional (second argument = false) if a view doesn't provide any contents for it, it will stay empty.

Resources