ASPInsiders Twitter List

The ASPInsiders is a select group of international professionals in ASP.NET technologies (Web Forms, MVC, Web Pages, etc…)

Jason Gaylord has assembled a list of ASPInsiders into a new ASPInsiders Twitter List that you can follow to keep track of the latest in ASP.NET technologies.

<blockquote>“The ASPInsiders team spends countless hours answering questions and giving guidance to other ASP.NET developers, as well as providing feedback and diretion on new features for future ASP.NET releases. Their work and contributions are invaluable.” </blockquote><blockquote><div>Scott Guthrie </div><div>Product Unit Manger, Web Platforms, Microsoft Corporation</div></blockquote>
<div></div>

ASPInsiders Twitter List

<blockquote>Note: The ASPInsiders group is different from the Microsoft MVP award. Many of the ASPInsiders either are or have been a Microsoft MVP as well, but there are also many that have not. There is not a 1:1 correlations between the two groups.  </blockquote>

Free Julian on JavaScript Series

If you are new to JavaScript or just don’t know it as well as you should, then I encourage you to watch the Julian on JavaScript Series on DevExpress.

Julian M Bucknall wrote an awesome series a while back called JavaScript for C# Developers that I remember going through that helped me become a better JavaScript developer.

Julian has planned out 4 sessions thus far, and has completed one of them already. If you can’t make the live webinar, then the sessions will be available to view online afterwards.

<hr>
Julian on JavaScript I (07-Feb-2011)

Writing JavaScript when you already know C# can seem like a piece of cake: after all it’s a C-like language, so what can go wrong? Julian starts off a series of webinars to teach you the basics of writing JavaScript. No experience is necessary apart from an understanding of C#. This webinar will concentrate on types.

Watch Online

<hr>
Julian on JavaScript II (28-Feb-2011)

Writing JavaScript when you already know C# can seem like a piece of cake: after all it’s a C-like language, so what can go wrong? Julian continues a series of webinars that teach you the basics of writing JavaScript. This webinar will concentrate on objects and assumes you’ve watched part I.

Register Online

<hr>
Julian on JavaScript III (07-Mar-2011)

Writing JavaScript when you already know C# can seem like a piece of cake: after all it’s a C-like language, so what can go wrong? Julian continues a series of webinars that teach you the basics of writing JavaScript. This webinar will concentrate on functions and assumes you’ve watched parts I and II.

Register Online

<hr>
Julian on JavaScript IV (28-Mar-2011)

Writing JavaScript when you already know C# can seem like a piece of cake: after all it’s a C-like language, so what can go wrong? Julian continues a series of webinars that teach you the basics of writing JavaScript. This webinar will dive deep into writing good JavaScript and assumes you’ve watched the previous three parts.

Register Online

Mocking jQuery Ajax Calls with Random Templated Data

Mocking the jQuery Ajax Call in ASP.NET MVC 3 Music Store

Sometimes the front-end and back-end of your application progress at different speeds. In order for each layer to progress independently it is optimal if the front-end piece can mock the results of the back-end.

I have grabbed the AJAX section from the recently updated ASP.NET MVC 3 Music Store and I slightly tweaked it below.

<pre>$(“.RemoveLink”).click(function() {
var recordToDelete = $(this).attr(“data-id”);

if (recordToDelete) {
$.post(“/ShoppingCart/RemoveFromCart”, {
“id”: recordToDelete
}, function(data) {
if (data.ItemCount === 0) {
$(‘#row-‘ + data.DeleteId).fadeOut(‘slow’);
} else {
$(‘#item-count-‘ + data.DeleteId)
.text(data.ItemCount);
}

$(‘#cart-total’).text(data.CartTotal);
$(‘#update-message’).text(data.Message);
$(‘#cart-status’)
.text(‘Cart (‘ + data.CartCount + ‘)’);
});
}
});
</pre>
Let’s say for example, that the controller action wasn’t yet implemented, but the front-end developer still wanted to progress in their code. To do this we are going to introduce a new tool called Mockjax to simulate a response from a jQuery ajax call.

The following code mocks any call to the /ShoopingCart/RemoveFromCart URL and will respond with the following object literal.

<pre>$.mockjax({
url: “/ShoppingCart/RemoveFromCart”,
responseTime: 750,
responseText: {
ItemCount: 5,
DeleteId: 1,
CartTotal: 112.45,
Message: “Your cart has been updated!”,
CartCount: 16
}
});
</pre>
The great thing about the above technique is that you are guaranteed the same response will be returned no matter what request you made to the ajax call. For example, this approach can be very good for Unit Testing. However, if you are trying to demonstrate the code to a client or just want to play around with the behavior then you might want something a little more flexible and dynamic.

Fortunately, Mockjax not only allows you to return a static set of responseText or repsonseXML, but it also lets you dynamically decide what content you want returned, which is what we are going to demonstrate below.
<blockquote>Note: Mockjax offers much more control than what I am showing in this example. I encourage you to check out all of it’s features.</blockquote><pre>$.mockjax({
url: “/ShoppingCart/RemoveFromCart”,
responseTime: 750,
response: function(settings) {
var row = $(“#row-“ + settings.data.id),
itemCount = +row.find(“td”).eq(2)
.text(function(index, text) {
return +$.trim(text) - 1;
}).text(),
cartTotal = 0, cartCount = 0;

$(“table tr”).each(function(index, element) {
var row = $(element),
price = +row.find(“td”).eq(1).text(),
quantity = +row.find(“td”).eq(2).text();

if (price && quantity) {
cartCount += quantity;
cartTotal += price * quantity;
}
});

this.responseText = {
ItemCount: itemCount,
DeleteId: settings.data.id,
CartTotal: cartTotal.toFixed(2),
Message: “Your cart has been updated!”,
CartCount: cartCount
};
}
});
</pre>
This might seem like excessive front-end code, but the intent is to simulate what the back-end might return in order for the front-end to respond in an appropriate manner. The code is doing some basic calculations to determine what the Shopping Cart quantity and values might be after deleting an item.
<blockquote>Note: The mockjax response code above could have been simplified somewhat if I had modified the MVC 3 View rendering the HTML, but as in many projects you don’t always have access to change the existing output. I decided to go with that approach instead of changing the MVC 3 View code in this blog post. </blockquote>
Once the back-end code is complete, then you can remove the $.mockjax call from your code-base and it will be hitting your back-end resource instead of the mocked response.

I captured the HTML, CSS, and JavaScript from the MVC 3 Music Store and put it in the following jsFiddle for you to execute and play around with. The main piece that I added was the mockjax code to simulate the AJAX request and response from the server.


<blockquote>Note: You might also consider mockjax to be a great Unit Testing tool as you are developing your front-end code and the back-end isn’t yet implemented.</blockquote>

Feature Detect Placeholder to Adjust jQuery Mobile Layout

If you take a look at most of the jQuery Mobile Documentation you will see heavy use of labels and input elements inside of a fieldcontain data-role. The great thing about this technique is that it looks good on portrait layouts (labels on top & input on bottom) and also adjusts for landscape layouts (labels on the left & input on the right).


<div></div>
The HTML to generate the above screenshots can be found in the following markup.

<pre>
<div data-role="page" id="login">

<div data-role="header">
<h1>Acme Corporation</h1>
</div>

<div data-role="content">
<form id="frmLogin" class="validate">
<div data-role="fieldcontain">
Email:
<input type=”text” id=”email”
name=”email” class=”required email” />
</div>

<div data-role="fieldcontain">
Password:
<input type=”password” id=”password”
name=”password” class=”required” />
</div>

<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button id=”btnCancel” data-theme=”d”
data-icon=”delete”>Cancel</button>
</div>
<div class="ui-block-b">
<button id=”btnLogin” type=”submit”
data-theme=”a” data-icon=”check”>
Log In
</button>
</div>
</fieldset>
</div>
</form>

</div>

</div>
</pre>
I recently did a mock-up for a client using this technique, but they wanted to use the HTML5 form placeholder technique instead. I told the client that this was possible, but mentioned that not all browsers support this technique.

So, I decided to use a Progressive Enhancement approach to this problem using the Modernizer JavaScript library. I wrote some JavaScript to detect if the browser supports the placeholder HTML5 attribute and if it does, then I hide and take the text from the label element and then push the value into the input element’s placeholder attribute.

<pre>
// if placeholder is supported
if ( Modernizr.input.placeholder ) {

$( “input” ).each( function(index, element) {

var placeholder =
$(“label[for=” + element.id + “]”)
.hide().text();

$(element)
.addClass(“ui-input-text-placeholder”)
.attr(“placeholder”, placeholder);

});

}
</pre>
You can view a running example of the above code from this jsFiddle. If you are running Google Chrome, then you’ll notice the label’s are embedded as placeholder’s within the input elements, but if you are using Firefox or Internet Explorer 6/7/8 then you’ll notice the default label and input technique that is default in most of the jQuery Mobile documentation.



I’ve added some screenshots of the placeholder technique in case you are reading this blog entry in a browser that doesn’t support the HTML5 form placeholder attribute.


<div></div>