MVC.NET Html helper extension examples

Leave a comment

Here are some examples of HTML helper extensions and their respective HTML output.

mvc-helper-examples

Dropdown list

@Html.DropDownListFor(model => model.Package.State.Id, Model.PackageStates)            
<select data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Package_State_Id" name="Package.State.Id">
<option value="1">Received</option>
<option value="2">Processing</option>
<option selected="selected" value="3">Complete</option>
</select> 

I have a more indepth breakdown of dropdown list here.

https://agilewarrior.wordpress.com/2012/12/13/how-to-simple-html-dropdownlistfor-mvc-net/

Checkbox

@Html.CheckBoxFor(model => model.IsActive)            
<input checked="checked" data-val="true" data-val-required="The IsActive field is required." id="IsActive" name="IsActive" type="checkbox" value="true" /><input name="IsActive" type="hidden" value="false" />

Textbox

@Html.TextBoxFor(model => model.UserName)            
<input id="UserName" name="UserName" type="text" value="jrasmusson" />

Textarea

@Html.TextAreaFor(model => model.Poem, new {@rows = "6"})            
<textarea cols="20" id="Poem" name="Poem" rows="6">...</textarea>

Radiobutton

<span class="control-label">Do you agree to the Terms and Conditions?</span>
            <br />
            @Html.RadioButtonFor(model => model.TermsAndConditions, true, new {id = "TermsAndConditions_true", @class = "control-radio"})
            <label for="TermsAndConditions_true">Yes</label>
            <br />
            <span class="control-label">&nbsp;</span>
            @Html.RadioButtonFor(model => model.TermsAndConditions, false, new {id = "TermsAndConditions_false", @class = "control-radio"})
            <label for="TermsAndConditions_false">No</label>
            <br />
<input class="control-radio" data-val="true" data-val-required="The TermsAndConditions field is required." id="TermsAndConditions_true" name="TermsAndConditions" type="radio" value="True" />
            <label for="TermsAndConditions_true">Yes</label>
            <br />
            <span class="control-label">&nbsp;</span>
            <input checked="checked" class="control-radio" id="TermsAndConditions_false" name="TermsAndConditions" type="radio" value="False" />
            <label for="TermsAndConditions_false">No</label>

Radio button with Twitter Bootstrap

<span class="control-label">Do you agree to the Terms and Conditions?</span>
            <br />
            <div class="controls">
                <div class="btn-group" data-toggle="buttons-radio">
                    <button type="button" class="btn btn-primary" value="TermsAndConditions_true">Yes</button>
                    <button type="button" class="btn btn-primary" value="TermsAndConditions_false">No</button>
                </div>
            </div>

Here is the View in it’s entirety. Note this look and feel was done using Twitter Bootstrap.

Index.cshtml

@model Dashboard.Models.DashboardIndexModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<fieldset>
    <legend>Package</legend>
    
    <div class="form-horizontal">
        
        <div class="control-group">
            @Html.LabelFor(model => model.Package.State, new {@class = "control-label"})
            <div class="controls">
                @Html.DropDownListFor(model => model.Package.State.Id, Model.PackageStates)            
            </div>
        </div>
    
        <div class="control-group">
            @Html.LabelFor(model => model.IsActive, new {@class = "control-label"})
            <div class="controls">
                @Html.CheckBoxFor(model => model.IsActive)            
            </div>
        </div>
        
        <div class="control-group">
            @Html.LabelFor(model => model.UserName, new {@class = "control-label"})
            <div class="controls">
                @Html.TextBoxFor(model => model.UserName)            
            </div>
        </div>
        
        <div class="control-group">
            @Html.LabelFor(model => model.Poem, new {@class = "control-label"})
            <div class="controls">
                @Html.TextAreaFor(model => model.Poem, new {@rows = "6"})            
            </div>
        </div>
        
        <div class="control-group">
            <span class="control-label">Do you agree to the Terms and Conditions?</span>
            <br />
            @Html.RadioButtonFor(model => model.TermsAndConditions, true, new {id = "TermsAndConditions_true", @class = "control-radio"})
            <label for="TermsAndConditions_true">Yes</label>
            <br />
            <span class="control-label">&nbsp;</span>
            @Html.RadioButtonFor(model => model.TermsAndConditions, false, new {id = "TermsAndConditions_false", @class = "control-radio"})
            <label for="TermsAndConditions_false">No</label>
            <br />
        </div>
        
        <div class="control-group">
            <span class="control-label">Do you agree to the Terms and Conditions?</span>
            <br />
            <div class="controls">
                <div class="btn-group" data-toggle="buttons-radio">
                    <button type="button" class="btn btn-primary" value="TermsAndConditions_true">Yes</button>
                    <button type="button" class="btn btn-primary" value="TermsAndConditions_false">No</button>
                </div>
            </div>
        </div>


    </div>
    
</fieldset>

Refactoring css

1 Comment

css is one of those things I am desperately trying to get good at, and a big part of that is knowing how to structure and refactor your css files.

Here’s a good example of some ugly css from Christian Heilman’s design chapter in Smashing Book#2.

#pagetitle {
  color: black;
  text-align: left;
  border-top-width: 2px;
  border-top-color: black;
  border-top-style: solid;
  border-width-bottom: 2px;
  ...
}

The first thing you can do to clean this up is logically order elements and use the shortcut notation.

#pagetitle {
  color: black;
  text-align: left;
  line-height: 1.3em;
  border: 2px solid white;
  border-color: black white white black;
  padding: 1em 2em;
  ...
}

The next thing you can do is move common denominators out of their specific selectors and collate them. For example you could refactor this:

h1  {
  font-family: helvetica, arial, sans-serif;
  color: #000;
  margin: 0.5em;
  padding: 1em;
  font-size: 150%;
  background: #ccc;
}

h1  {
  font-family: helvetica, arial, sans-serif;
  color: #000;
  margin: 0.5em 0;
  padding: 1em;
  font-size: 120%;
  background: #999;
}

Into this:

h1, h2, h3, h4 {
  font-family: helvetica, arial, sans-serif;
  color: #000;
  margin: 0.5em 0;
  padding: 1em;
}

h1 {
  font-size: 150%;
  background: #ccc;
}

h2 {
  font-size: 120%;
  background: #999;
}

See the difference? All the common stuff is up top, and only the difference are showing below. Way better.

How not to name your css classes and id’s

3 Comments

Continuing on with Christian Heilmann’s excellent chapter ‘Red flags in web design’ I loved this section about how not to name your css class and ids.

Here are some examples of really bad class and id names:

greenMessage
largeBoxRight
redIntroText

Basically anything that describes what the element looks like, and not what is it doing.

Here would be some better names:

greenMessage -> confirmation
largeBoxRight -> leanSideBar
redIntroText -> warning

See the difference? Applying this simple check will make your code a lot more readable and easier to maintain and understand. Thx Chris!

For more good tips on design and development checkout Smashing Book#2.

How and when to use a css class

2 Comments


The Smashing Book #2 has a great section by Christian Heilmann on how and when to use css classes.

“Classitis” as Christian calls it is when classes are used everywhere. Instead of just using classes selectively to make certain elements standout, people add classes to everything and then let jQuery do it’s magic.

This can quickly turn into a maintenance nightmare because as soon as a class name changes, you’ll have to search your entire code base for all changes.

Here’s an example Christian gives on how NOT to use css classes:

<ul class="shopping-list first">
  <li class="list-item">Cucumber</li>
  <li class="list-item important">Apple</li>
  <li class="list-item">Orange</li>
</ul>

Christian’s main rule for applying css classes is:

add a class to mark the odd one out and to group elements not already grouped.

Here is how to do it right:

<ul class="shopping-list first">
  <li>Cucumber</li>
  <li class="important">Apple</li>
  <li>Orange</li>
</ul>

Instead of using .shopping-list .list-item to style, all you need is .shopping-list li.

You modify the important one with .shopping-list li.important, and then you don’t have to worry about the class specificity of .important versus list-item.

For more good examples of does and don’t about web and design, be sure to check out the excellent Smashing #1 and #2 books.

How to nice corporate background webpage

3 Comments

Ever wonder how some websites get that nice, subtle background going? I did. Turns out it’s really easy.

Just make an image (say 4 pixels high with a single dark pixel at top and three light ones below)


And repeat it as a background image over your page.

css

body {
    background-image: url(../images/background.gif);
}

html

<html>
<head>
    <title>Repeated background</title>
    <link href="css/repeatedBackground.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

And voila.

It’s subtle, but nice for corporate style look and feel work or in any enterprise as a background to a table or TPS report.

Another approach is to apply the same idea with a gradient. Take a longer gradient image (say 1×500 pixels) and repeat it along the x-axis with a darker background color for where the gradient runs out :

css

body {
    background-color: #091A3A;
    background-image: url("../images/background-darkblue-1x500.gif");
    background-repeat: repeat-x;
}

and you get something like this:

Cool eh? These are just a web design tips I am picking up no my current project. Thanks to Jonas Claesson for point these out.

Rails3.1 link problem with strange hrefs

2 Comments

If you recently upgrade your rails app and you are using blueprint, you may have an issue with your links.

Due to the new way rails handles style sheets, certain blueprint styles that used to work may clash or cause strange behaviour (like all your hyperlinks suddenly having the href link itself showing up in the text of the link on the page).

To stop it delete the following lines out of your blueprint print.css file:

a:link:after, a:visited:after {
  content: " (" attr(href) ")";
  font-size: 90%;
}

Here is a similar question asked on stackoverflow.

%d bloggers like this: