Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Monday, 2 February 2015

MVC / Jquery unobtrusive validation

http://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-1

Also for how do attach a new client side method to unobtrusive validation e.g.

jQuery.validator.unobtrusive.adapters.add(adapterName, [params], fn);

see this article...

http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html

 

Note: For any element a in your <form>, you can do this to figure out what validation is attached to the containing <form> for that element...


$.data(a.form, "validator").settings.rules

e.g.

$.data(a.form, "validator").settings.rules.MiddleInitial
Object {maxlength: "1", __dummy__: true}

$.data(a.form, "validator").settings.messages.MiddleInitial
Object {maxlength: "The middle initial must be a single charater"}

Wednesday, 14 January 2015

How to do data dash data- attributes in Razor

Answer: Use an underscore

In the cshtml view file definition when declaring the attributes in the new {} object class for the attributes, use data_mycustomdataattribute to render out data-mycustomdataattribute

@Html.Hidden("controlName", "valueHere", new { @data_mycustomdataattribute = "testing dash"})

This will render the following...

<input data-mycustomdataattribute="testing dash" id="controlName" name="controlName" type="hidden" value="valueHere">

Monday, 8 December 2014

Data dash attributes in ASP.NET MVC

http://stackoverflow.com/questions/4844001/html5-data-with-asp-net-mvc-textboxfor-html-attributes

You could use underscore (_) and the helper is intelligent enough to do the rest:

Html.TextBoxFor(
model => model.Country.CountryName,
new { data_url = Url.Action("CountryContains", "Geo") }
)

And for those who want to achieve the same in pre ASP.NET MVC 3 versions they could:

<%= Html.TextBoxFor(
model => model.Country.CountryName,
new Dictionary<string, object> {
{ "data-url", Url.Action("CountryContains", "Geo") }
}
) %>

Thursday, 18 September 2014

Watermarks in ASP.NET MVC 4

...using the jquery.overlabel plugin

1. Stick a DisplayName attribute for the watermark on your model property

[RequiredIf("Mode", UnderOfferModelMode.SetUnderOffer, ErrorMessage = "Please enter a comment")]

[DisplayName("Please enter your comment text here")]

public string UnderOfferComment { get; set; }

2. Add an Html.LabelFor and an Html.TextAreaFor your model property

3. Import the jquery.overlabel.js by including "overlabel" in your require imports

4. Add a line in the document.ready to call the .overlabel() method on the label selector (or use a class selector as I have)

clip_image001

5. In your css then you just need

label.overlabel {

position: absolute;

margin-left: 70px;

margin-top: 10px;

z-index: 1;

color: #999;

}

And you end up with a lovely little unobtrusive watermark that doesn't interfere with your model validation in anyway.

Wednesday, 21 May 2014

BrowserLink and other new VS 2013 features

Perhaps the most significant enhancement to creating web applications in Visual Studio for many years. Check out how you can edit your pages in line in the browser, and it updates the source code back in visual studio directly, using the new BrowserLink feature...

http://www.asp.net/visual-studio/overview/2013/visual-studio-2013-web-editor-features-browser-link

More features worth a look are all listed under the parent page here...

http://www.asp.net/visual-studio/overview/2013

Monday, 10 March 2014

Wednesday, 11 December 2013

Altering the HTTP response using Fiddler

Should you ever have the need to change the http response to a web server, then please note in the latest version of Fiddler it's actually possible to do this without having to hack the CustomRules.js file that the Fiddler training videos and documentation tell you about.

You can simply set up an AutoResponder tab rule as follows

1. Stick a file in %userprofile%\Documents\Fiddler2\Captures\Responses folder

2. Highlight the request you want to set up a rule for

3. Got to the AutoResponder tab and check Enable automatic responses and unmagtched requests passthrough

4. Click Add rule

5. In the dropdown list control at the bottom, select the file that you dropped in the folder in step 1 above.

6. Hit the save button

7. Clear the Cache

clip_image001

Now next time you request that resource, the version you have saved on disk will be downloaded instead. You can check this by looking in the IE cache folder %userprofile

%userprofile%\AppData\Local\Microsoft\Windows\Temporary Internet Files

More detail about request and response breakpoints in fiddler here… (this is very useful should you wish to change the request going to the server in the first place as well)…

http://www.youtube.com/watch?v=8bo5kXMAcV0&list=PLvmaC-XMqeBbw72l2G7FG7CntDTErjbHc&index=2

P.S. For more powerful / permanent debugging solution you can just alter the fiddler customrules.js as follows

static function OnBeforeResponse(oSession: Session) {

        if (m_Hide304s && oSession.responseCode == 304) {

            oSession["ui-hide"] = "true";

        }

if (oSession.uriContains("Name=ViewerScript")) {

                                                oSession["x-replywithfile"]="Reserved.ReportViewerWebControl.axd";

                                }

    }

Thursday, 5 December 2013

Microsoft Virtual Academy - ASP.NET MVC

I’ve just got into the Microsoft Virtual Academy, and I have to say it has a wealth of up to date, excellent training videos.

http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et=4099&m=4093&ct=19601#?fbid=_Oyn-vcRqgr

Razor syntax escape characters…

image

Html anti forgery token..

http://blog.stevensanderson.com/2008/09/01/prevent-cross-site-request-forgery-csrf-using-aspnet-mvcs-antiforgerytoken-helper/

ASP.NET MVC 4 Content Map

http://www.asp.net/mvc/overview/getting-started/aspnet-mvc-content-map

Script including - always use the longhand version for the <script></script> tag, otherwise your script file will not be downloading to the client browser

JSBin.com - http://jsbin.com/ a fantastic javscript, jquery, html and css online playground like jsfiddle.net and plnkr.co. The nice thing about this one though is that you can download the entire finished article file as a single html page.

What's coming in ASP.NET - www.asp.net/vnext

Signed nightly builds of asp.net vnext - https://aspnetwebstack.codeplex.com/

Getting started with web api - http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

Web API 2 (video) - http://channel9.msdn.com/Events/Build/2013/3-504

Wednesday, 18 September 2013

Preload Images with CSS, Javascript or Ajax

See here for many ways to achieve this...

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Personally I'm sticking with the following...

http://jsfiddle.net/chafferm/VU2dq/

Note the type check for array in this example is probably overkill, as it is for all browser versions, we could have used jQuery isArray instead, or even Array.isArray in ECMA script 5 (IE 9 or higher).

Saturday, 24 August 2013

Plunkr Noughts And Crosses Game

Spent some time with my new favourite javascript online editor of the moment http://plunkr.co. I've found I can use my tablet, an iPad and even a smart phone to edit my HTML using this editor, although most of the time it's done using Google Chrome on a laptop.

My daughter and I find this game is best played with two wireless mouse devices plugged into the laptop, and you take it in turns to move the pieces into the squares.

P.S. Some hidden gems in Plunkr are the keyboard shortcuts:

Ctrl+S = Save
Ctrl+Up/ Ctrl+Down = Cycle through files
Ctrl+Enter = Preview / Run your code

To run the game, click here:
http://run.plnkr.co/plunks/kLcfW2/

To edit the code, feel free at this link:

http://plnkr.co/edit/kLcfW2?p=preview

Plunkr - Noughts and Crosses Game

Friday, 24 May 2013

Icon editor for favicon in the web

Came across this in the book I'm reading at the moment, http://www.xiconeditor.com/ - rather clever little tool from Microsoft for creating the favicon for your website, for when users book mark it on their iPad / iPod or desktop PC.

Friday, 1 February 2013

Thanks Dzone!

Back when I used to blog for Conchango, someone once asked me why do I bother blogging. Well yesterday I received my free www.dzone.com bundle package, which included a nice new T-Shirt, 8GB USB memory stick, and some toys for my kids amongst other things... ALL FREE!!! - So you see sometimes in life, you do get something for nothing.

image

It also included print outs of a couple of dzone.com ref cards including this one that opened my eyes to HTML5 WebSockets...

http://cdn.dzone.com/sites/all/files/refcardz/rc152-010d-Websocket_2.pdf

The funniest part is the author @peterlubbers, who even has a number plate reading HTML5 in California...

image

Friday, 18 January 2013

<PRE> tags and white-space: pre style

When you need to preserve tab characters and line breaks within HTML elements other than multiline input fields, you can use the <pre> tag or the style attribute of white-space: pre.

Just noticed that there is a slight difference in using a <pre> tag and a div with the white-space: pre style attribute applied to it. As the default user agent setting for the font-family style attribute for a <pre> tag is mono

clip_image001

Found more of a description on this site... http://www.quirksmode.org/css/whitespace.html#t01

clip_image002

Use Plunkr to test it out if you like....

http://plnkr.co/edit/dqJKnD?p=preview

<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>Awesome Game</title>
  <head>
 
  <body>
  <pre>Test this wer awereaw
   
    waerwearaw
    waeraw
    w
   
  </pre>
  <div id='content' style="white-space:pre">Content!
   
    waer
   
    weraweraw
    waera
    waer
  </div>
   
  </body>
 
</html>

Thursday, 17 January 2013

Project Silk for all your HTML web application needs

A colleague of mine pointed out this white paper article that Microsoft have kindly put together, which appears to be a full overview on how to construct a web site in this day an age.

"Guidance for building cross-browser web applications with a focus on client-side interactivity. These applications take advantage of the latest web standards like HTML5, CSS3 and ECMAScript 5 along with modern web technologies such as jQuery, Internet Explorer 9, and ASP.NET MVC3"

http://silk.codeplex.com/

You can also download it all in pdf format from the following link

http://www.microsoft.com/en-us/download/details.aspx?id=27290

Friday, 28 December 2012

Javascript framework performance tester

Came across this little gem for testing the performance of javascript frameworks in your browser. Interesting to see how each browser performs...
http://jsperf.com/angular-vs-knockout-vs-ember/2
Also this is quite a good reference for all the difference frameworks that are out there at the moment to choose from
http://addyosmani.github.com/todomvc/
Performance test results for various browsers as follows...
IE 8.0 32-bit on Windows 7 64-bit
image
Chrome IE 9 32-bit on Windows 7 64-bit
image
Chrome 23.0.1271.97 32-bit on Windows 7 64-bit
image

Wednesday, 31 October 2012

Beware the perils of Javascript

These two links are definitely worth a read I think...

http://oreilly.com/javascript/excerpts/javascript-good-parts/bad-parts.html

and especially…

http://oreilly.com/javascript/excerpts/javascript-good-parts/awful-parts.html

e.g.

Semicolon Insertion

JavaScript has a mechanism that tries to correct faulty programs by automatically inserting semicolons. Do not depend on this. It can mask more serious errors.

It sometimes inserts semicolons in places where they are not welcome. Consider the consequences of semicolon insertion on thereturn statement. If a return statement returns a value, that value expression must begin on the same line as the return:

return

{

status: true

};

This appears to return an object containing a status member. Unfortunately, semicolon insertion turns it into a statement that returns undefined. There is no warning that semicolon insertion caused the misinterpretation of the program. The problem can be avoided if the { is placed at the end of the previous line and not at the beginning of the next line:

return {

status: true

};

Monday, 22 October 2012

YSlow CSS inspector

Just installed the YSlow browser extension for Chrome (although versions are available for other browsers too!).

http://developer.yahoo.com/yslow/

Not bad for finding where things on your site can be improved…

image

image

Wednesday, 26 September 2012

JavaScript dates are zero based for month part

It appears that JS treats dates as zero indexed on the month part when you construct them in the format new Date("yyyy", "MM", "dd")

clip_image001

How to find the last interactive logons in Windows using PowerShell

Use the following powershell script to find the last users to login to a box since a given date, in this case the 21st April 2022 at 12pm un...