a developer's notes – a semi-technical web development BLOG

April 30, 2014

Invoke a MVC Html Helper Method in a Unit Test

Filed under: ASP.NET MVC — adevelopersnotes @ 9:14 am
Tags: , , ,
HtmlHelper helper = null;
helper.YourHelperMethod();

April 25, 2014

jquery.validate : Unable to get property ‘getAttribute’ of undefined or null reference

Filed under: Javascript / JQuery — adevelopersnotes @ 12:31 pm
Tags: , , , , ,

I got this error recently in jquery.validate.js:
“Unable to get property ‘getAttribute’ of undefined or null reference”

Jq_ErrorAttr

GetAttributeError

Turns out the error was from a input type checkbox needing a name attribute and not just an Id attribute.

April 10, 2014

Twitter Bootstrap 3 Style DateTime Picker

Filed under: CSS / Styling,HTML — adevelopersnotes @ 9:48 pm
Tags: , , , ,

Here is a working example using eonasdan‘s version.

https://github.com/Eonasdan/bootstrap-datetimepicker

http://jsfiddle.net/QM8eC/7/

April 2, 2014

Using HTML5 Data Annotations for Zipcode and Telephone Numbers

Filed under: ASP.NET MVC,Javascript / JQuery — adevelopersnotes @ 11:22 am
Tags: , , , , , ,

Setup your view model properties with HTML 5 attributes:

[Required]
[DataType(DataType.PhoneNumber)]
public string Phone { get; set; }

[Required]
[DataType(DataType.PostalCode)]
public string ZipCode { get; set; }

Then in your script file, you can have controls use jquery.MaskedInput and also add the bootstrap css class “form-control”

    setupMaskInputs: function () {
        // Any view model property that has a [DataType(DataType.PhoneNumber)] attribute, renders type=tel
        if ($("input[type='tel']").length > 0) {
            $("input[type='tel']").mask("(999) 999-9999? ext.9999", { placeholder: " " });
        }

        // Any view model property that has a [DataType(DataType.PostalCode)] attribute, renders type=zip
        if ($("input[type='zip']").length > 0) {
            $("input[type='zip']").mask("99999?-9999", { placeholder: " " });
        }

        // @Html.EditorFor is used to render any inputs that need the html 5 type attributes.
        // But @Html.EditorFor, won't allow you to add a css class, so we do it here.
        $('input[type=text],input[type=tel],input[type=datetime],input[type=date],input[type=number],input[type=password],textarea,input[type=email],input[type=url],input[type=zip]').each(function (idx, item) {
            if (!$(item).hasClass('form-control'))
                $(item).addClass('form-control');
        });
    }

March 30, 2014

Can’t Connect to SqlServer 2012 LocalDB

Filed under: SQL — adevelopersnotes @ 11:12 am
Tags: , , , , , , ,

I had trouble connecting my sql server to (LocalDB)\v11.0 with my Windows account. I ended up having to delete it and recreate it.

Open a cmd prompt

c:\sqllocaldb delete "v11.0"
LocalDB instance "v11.0" deleted.

c:\sqllocaldb create "v11.0"
LocalDB instance "v11.0" created with version 11.0

If the database is in use, stop MSSQL service and try again.

March 21, 2014

Using jquery.validate.unobtrusive with jquery.maskedinput

Use a regular expression validator with your view model property. This regex will match “(999) 999-9999″ and anything after. The input will be restricted with jquery.maskedinput to only accept valid numbers. Whether the user enters an extension or not, the regex will still get validated. We only need to valid the minimum required phone number.

Using the Data Annotation on your view model will allow the client side unobtrusive validation to work when the user enters in a phone number with the optional extension.

View Model property

[Required]
[DataType(DataType.PhoneNumber)]
[RegularExpression(@"^([(][0-9]{3}[)][ ][0-9]{3}[-][0-9]{4})(.*)$", ErrorMessage = "Phone number busted.")]
[DisplayName("Contact Phone Number")]
public string ContactPhoneNumber { get; set; }

In your view

<div>
	@Html.EditorFor(x => x.ContactPhoneNumber)
	@Html.ValidationMessageFor(x => x.ContactPhoneNumber)
</div>

Script:

if ($("input[type=tel").length > 0) {
	$("input[type=tel").mask("(999) 999-9999? ext.9999", { placeholder: " " });

	// @Html.EditorFor is used to render any inputs that need the html 5 type attributes.
	// But @Html.EditorFor, won't allow you to add a css class, so we do it here.
	$('input[type=text],input[type=tel],input[type=datetime],input[type=date],input[type=number],input[type=password],textarea,input[type=email],input[type=url],input[type=zip]').each(function (idx, item) {
		if (!$(item).hasClass('form-control')) //class only for Bootstrap styling
			$(item).addClass('form-control');
	});

}

March 8, 2014

Jquery Validation Unobtrusive with ASP.NET MVC

Filed under: Javascript / JQuery — adevelopersnotes @ 2:46 pm
Tags: , , , , ,

Things to remember:

1. Input controls must be wrapped within a form
2. For validation messages to appear, you must have a validation message property for each input.

@Html.TextBoxFor(x => x.MyTextBox)
@Html.ValidationMessageFor(x => x.YourProperty)

3. If you want the validation message to appear immediately upon page load, you have to run this jquery method:

$('form').valid();

4. You can customize your validation message style with these css classes that you can override:

.field-validation-error span{
     color: red;
}

//Adds an asterisk before the message
.field-validation-error span:before{
     content: "*";
}

input.input-validation-error{
     border: 1px solid red;
}

Checkbox returning “true,false” from FormCollection.

Filed under: ASP.NET MVC — adevelopersnotes @ 10:46 am
Tags: , , , , , , , , , ,

If you try Request.Form["checkbox0"], you’ll get the value “true,false” .

Just check this:

form[key].Contains("true"); //some said chrome returns "on"

Or

You could simplify your code doing this:

var strArray = collection["YourCheckboxName"];
char[] delimiterChars = {‘,’};
string[] checkedvalue = strArray.Split(delimiterChars);
var returnValue = checkedValue.Length > 1;

If the checkbox is checked, then the array will contain 2 values, if not, only one.

February 26, 2014

Getting started with MvcSiteMapProvider with ASP.NET MVC

Filed under: ASP.NET MVC — adevelopersnotes @ 12:54 pm
Tags: , , , , ,

Here is a great site to get started with MvcSiteMapProvider. MvcSiteMapProvider provides a simple and easy way to add breadcrumb support to your MVC site.

http://maartenba.github.io/MvcSiteMapProvider/getting-started.html

Some tutorial links:

http://edspencer.me.uk/2011/02/10/mvc-sitemap-provider-tutorial/

http://edspencer.me.uk/2011/09/20/mvc-sitemap-provider-tutorial-2-breadcrumbs/

Note: There is a NuGet package for

    MvcSiteMapProvider MVC 4
    MvcSiteMapProvider MVC 4 Core (core library if you need to reference the library from a non MVC project such as a class library.)
    MvcSiteMapProvider MVC 5
    MvcSiteMapProvider MVC 5 Core (core library if you need to reference the library from a non MVC project such as a class library.)

Note:
If you get an error “does not contain a definition for ‘MvcSiteMap’”in the Razor view with this line…

@Html.MvcSiteMap().SiteMapPath()

Add in this using statement:

@using MvcSiteMapProvider.Web.Html;

February 12, 2014

Check if Browser is IE and Which Version of IE with HTML

Filed under: CSS / Styling,HTML — adevelopersnotes @ 8:16 pm
Tags: , , , , ,

Check if the browser is using IE8

<!--[if IE 8]> 
	<script src="_ie8.js"></script>
<![endif]-->

This stylesheet will only display to IE9 or above, along with every other non-IE browser. Notice opening and closing expressions are wrapped in comments.

<!--[if gt IE 8]><!-->
	<script src="_nonIe8.js"></script>
<!--<![endif]-->

**Make sure the src path reference begins with a slash (/scripts/myscript) and not use the root tilde reference. This (~) doesn’t seem to work within the conditional hthml.

Reference: http://www.impressivewebs.com/conditional-comments/
Reference: http://reference.sitepoint.com/css/conditionalcomments

HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries. This is for Bootstrap 3 support.

<!--[if lt IE 9]>
	<script src="~/../Scripts/html5shiv-3.7.0.js"></script>
	<script src="~/../Scripts/respond.min-1.4.2.js"></script>
	<link href="~/../Content/bootstrap-glyphicons.css" rel="stylesheet" />
<![endif]-->
Next Page »

The Rubric Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.