MVC3, Entity Framework, jQuery… Everything example

How would you like to have a project that has these features?

Dependency Injection
Entity Framework 4.0 with POCO
Inversion of Control with Castle
The IResult
jQuery
jQuery Ajax Posts
jQuery Custom Css
jQuery Validation
Mocking with Rhino Mocks
MVC 3/Razor
MVC Annotation Based Validation
What I call the Repository Pattern
Unit Tests - Integration With Entity Framework
Unit Test - MVC Controller Actions

And more s--t I can't think of right now!

What’s the price of this gem? Just your time which is worth nothing!

Where can you find it? Right here!

Requirements:

Visual Studios 4.0
Mvc 3
To open the solution and do a search and replace on "Tutorial" to set your directory paths.
A real f--king need to learn!

Act now, operators aren’t in existence since this is hosted on a website, but if they were they would be standing by!

Disclaimer:

This may or may not hit you with a wave of awesome. Be prepared for the worse case awesome scenario. I am in now way responsible for any heart stoppage due to the shock and awe power of the project.

jQuery Validation with Multiple Checkboxes

So this one is done on request and because I am a kind of merciful god I will grant this request.

For those bullet point programmers:

Now when I say validation, I mean the validation plugin. and this example is built using concepts in this post.

Here’s the markup:

 
<form id="formCheckBoxValidation" method="post" action="checkboxValidation.html">
	<input type="checkbox" id="checkBoxList" name="checkBoxList" value="One">
	<input type="checkbox" id="checkBoxList" name="checkBoxList" value="Two">
	<input type="checkbox" id="checkBoxList" name="checkBoxList" value="Three">
	<input type="checkbox" id="checkBoxList" name="checkBoxList" value="Four">
	<input type="checkbox" id="checkBoxList" name="checkBoxList" value="Five">
	<br />
	<input type="submit" id="buttonCheckBoxValidation">
</form>
<div>
	<div id="divError" name="divError" style="display:none;"></div>
</div>

<form id="formCheckBoxValidationDifferentName" method="post" action="checkboxValidation.html">
	<input type="checkbox" id="checkBoxListOne" name="checkBoxListOne" value="One">
	<input type="checkbox" id="checkBoxListTwo" name="checkBoxListTwo" value="Two">
	<input type="checkbox" id="checkBoxListThree" name="checkBoxListThree" value="Three">
	<br />
	<input type="submit" id="buttonCheckBoxValidationDifferentName">
</form>
<div>
	<div id="divErrorDifferentName" name="divErrorDifferentName" style="display:none;"></div>
</div>

For this example I’m actually presenting two examples(Say ‘example’ again, I dare you, I double dare you m—erf—er, say ‘example’ one more God d–n time!): If the checkboxes are linked by id and if the checkboxes are not linked at all. There is actually a difference. You see, if they share the same id, the required method can be used since it will treat them all as the same element and therefore if even on is checked, there is a value. Otherwise, you have to check all the checkboxes to see if at least one is checked. (Yeah, that made total sense.)

Here’s the check checkboxes method:

//Add a method to the validator that checks to see if at least one of the
//  three checkboxes specified are checked.
jQuery.validator.addMethod(‘atLeastOneChecked’, function(value, element) {
	var checkedCount = 0;

	if (jQuery(‘#checkBoxListOne’).is(‘:checked’)){
		checkedCount += 1;
	}

	if (jQuery(‘#checkBoxListTwo’).is(‘:checked’)){
		checkedCount += 1;
	}

	if (jQuery(‘#checkBoxListThree’).is(‘:checked’)){
		checkedCount += 1;
	}

	return checkedCount > 0;
});

Oooooh baby.

Now for setting up the validation:

//This is for the first checkbox area where every checkbox has the same id causing them
//  to be a group and therefore the default required works.
var validationRules = new Object();
validationRules['checkBoxList'] = {required:true};

var validationMessages = new Object();
validationMessages['checkBoxList'] = {required:'at least one has be checked.'};

jQuery('#formCheckBoxValidation').validate({
	errorLabelContainer: '#divError',
	wrapper: 'div',
	rules: validationRules,
	messages: validationMessages,
	onfocusout: false,
	onkeyup: false,
	submitHandler: function (label) {
		alert('hooray');
	}
});

//This is for the second checkbox area where every checkbox has a different name
//  and therefore the atLeastOneChecked method must be used.
validationRules = new Object();
validationRules['checkBoxListOne'] = {atLeastOneChecked:true};

validationMessages = new Object();
validationMessages['checkBoxListOne'] = {atLeastOneChecked:'at least one has be checked.'};

jQuery('#formCheckBoxValidationDifferentName').validate({
	errorLabelContainer: '#divErrorDifferentName',
	wrapper: 'div',
	rules: validationRules,
	messages: validationMessages,
	onfocusout: false,
	onkeyup: false,
	submitHandler: function (label) {
		alert('hooray');
	}
});

In the words of Q-Bert: @#$% yeah!

jQuery Validator: Adding a Custom Method

File this one under “Posted to take less time to find the answer”:

If you’re using jQuery Validator and the built in validation methods just aren’t cutting, there’s a way you can add your own method to the validator itself. For this example let’s start some pretend time. Uhg I said pretend time not f–ked up fantasy time… Really, a horse? Really?

Now that we have that clear: Let’s pretend you have a form with three textboxes and you want to make sure one and only one is filled out. This doesn’t exactly fit the built in methods. Now you could try using the “required” method and replace it with a delegate. Could do that, but it ‘s  actually trickier than it sounds due to how required method actually works.  So what’s an easier way? Just add a method to the validator:

    jQuery.validator.addMethod('correctCountFilled', function(value, element) {
        var fullCount = 0;
        if(jQuery('#someTextBox1').val().length > 0){
            fullCount +=1;
        }

        if(jQuery('#someTextBox2').val().length > 0){
            fullCount +=1;
        }

        if(jQuery('#someTextBox3').val().length > 0){
            fullCount +=1;
        }

        return fullCount == 1;
    });

Then the call is done lika dis:

  ...

  rules: {
            someTextBox1: {
                correctCountFilled:  true  //This is the name of the method added and what it expects to come back when called to be valid.
            }
        },
  messages: {
            someTextBox1: {
                correctCountFilled: 'Some error message like pointing out how yours is a superior intellect.'
            }
        },
  ...

As you can see, the method returns false if all are empty or more than one is filled in. The method call on the validator expects “true” to be valid, so anything but one textbox being filled in will trigger the error message. Fairly easy, huh? Now go forth, be fruitful, and don’t multiply by mistake.

ASP.Net MVC2, Dynamic Models, Json, and Javascript

Ok so one thing I fell into while using the dynamic keyword as a model, was an issue with the dynamic model being parsed into json and then back again into javasript using jQuery. Silly me, I thought that the dynamic model would represent itself like any other object, but it turns out the dynamic object is actually a dictionary with a key value pair. Now I’m not going to harp on that since I think that’s kind of how Python does it (And javascript for that matter), but I did want this:

function doSomething(result) {
  if(result.Success){
    alert(result.Value.UserName);
  }
}

Where the result value was:

...  //Other junk
dynamic returnModel = new ExpandoObject();
returnModel.UserName = _state.CurrentUser.UserName;
result.Value = returnModel;
...  //set the data on a jSonResult to that result above and return.

But what I got for Value was a dictionary:

  result.Value[0].Key  "UserName"
  result.Value[0].Value  "test@test.com"

As you can guess, using the javascript from above won’t work. However, there is a way to run the above javascript.

    var convertedValue = new Object;

    for(var i = 0; i < result.Value.length; i++){
      convertedValue [result.Value[i].Key] = result.Value[i].Value;
    }

You see with javascript, like the dynamic object, the objects not only respond to a direct assignment like a property, but can also be manipulated like a dictionary. Where does that code above get me? Well simple, I can now do:

  alert(convertedValue.UserName);

Yeah its not perfect and I have to think there will be some way for a better json translation, but for now this is gold.

jQuery Validate Date/Check If Is Date

Far as I can tell, and that’s pretty far even though I do wonder if you can actually measure telling in distance, there isn’t a method directly used for validating a date in jquery. I find this rather odd. Not odd like how people keep watching Uwe Bol movies, more like odd that no one has tried to make a time machine to prevent them from ever appearing.

Anyways, bad movies… horrible movies… worst movies of all time aside, there is a date checking method, just not directly in jquery. It’s actually in the jquery.ui.datepicker.js file which is part of the UI files. Basically I grabbed that file and used the parseDate method on it coupled with a try catch. After all, a failure in the parseDate method throws an exception, and we don’t like those. No we don’t. (Which begs the question as why it throws an exception instead of just returning a null date.)

function isValidDate(controlName, format){
    var isValid = true;

    try{
        jQuery.datepicker.parseDate(format, jQuery('#' + controlName).val(), null);
    }
    catch(error){
        isValid = false;
    }

    return isValid;
}

Very simple, and it works. You could ask why I didn’t just roll my own date method, and then I would ask you how ambitious do you think I am? Then you would punch me because I answered your question with a question like a complete tool bag. Then I would cry. And THEN I would answer your original question. Fact is, I trust that the method created for the DatePicker is in fact well tested, otherwise the whole jquery thing just isn’t worth trusting seeing as it’s a part of their core library. And that I just refuse to believe.

jQuery: Find a Form Action Using Jquery

This is pretty useful for people trying to pass in a generated action to a javascript file.  Eh?

SKIP IF YOU DON’T CARE ABOUT A REASON FOR USING THIS:

Say you are using the jQuery post method to send things back to the server but all the code for that is in a seperate javascript file.  Well you can’t really do this:

jQuery.ajax({
      type:'POST',
      url: <%= someMethodForCreatingAUrl('controller', 'action') %>,
      dataType:'json',
      data:{
        email: user.userName,
        password: user.password
      },
      success: function(result){
        onSuccess(result);
      },
      error:function (xhr, ajaxOptions, thrownError){
        alert(xhr.status);
      }
    });

if that is in the javascript file.

What you can do is this on the html file:

  <form id="formCreateUser" name="formCreateUser" method="post" action="${someMethodForCreatingAUrl('controller', 'action')}">

And in the javascript file:

ANSWER:

  var formAction = jQuery(ELEMENT_LOGIN_FORM).attr('action');

And there you go. You have the action.

ByATool.com gets a shiny new tool!

A while back, we put up an offer to write for our blog.  Only one has risen to the top as someone having both the technical know-how and the razor sharp wit required to write on a site such as this.

ByATool.com Readers… Amy.

Amy… ByATool.com Readers.

Amy is a magnificent geek and almost 10 year veteran of server administration and software development. She has worked at IBM, Concurrent Technologies Corporation, and University of Pittsburgh Medical Center. Currently, she is doing custom SharePoint development connected with Team Foundation Server and the ASP.NET MVC framework development using the Entity Framework, C#, and jQuery. She is currently living in Pittsburgh and not happy at all about commuting into a city with 3 rivers because of the many bridges and no serious commuter subway systems… Who plans this stuff?

Welcome Amy!

Child IFrame Page Interacting with Parent Page… Yeah I went there.

Example here.

File this under “Why?” but I wanted to see if a child could talk to a parent and then receive information back from the parent to update itself with. As usual, my lack of intelligent wording probably has you scratching your head… if you do that. Personally I don’t get that expression as when I’m confused I more than likely will grab a jar of peanut butter and start lathering up with it, but to each his own.

So here’s the idea, and this post is only the start.

You have a parent page, Parent.htm, with an iframe and you want the parent to do something and alert the child that something happened. For now, it’s actually really simple.

On the parent I have a method:

  function callMethod(text, methodDelgate) {
    if (methodDelgate != null) {
      methodDelgate(text);
    }
  }

And this simple markup:

  <iframe id="myFrame" src="Child.htm"></iframe>

Wow huh? Well on the child I have this:

  function callParent(text) {
    if (top.callMethod != null) {
	  top.callMethod(text, changeText);
    }
  }

This is easy. If the parent has the method, send the text through and a method to call when finished. What is this method? Well its:

  function changeText(text) {
    jQuery('#returnText').text(text);
  }

Which simply sets the text on some div to show it actually worked.

What happens when I click a button that calls callParent? It talks to the parent, the parent calls the passed in method, and the child updates itself.

Not sure this is rocket science, but there will be more on it as I add in the idea of a dynamically created pop up on the parent being used by the child. Until then, try not to be yourself. You embarrass your mother.

Get the jQuery DatePicker to Work With jQuery Modal Dialog

Being that I am the man, I thought I would share this little thingy with you because… well I’m the man.

So here’s the issue:  You have a date picker, a modal dialog, and you can’t see the calendar when you click on the icon and/or textbox. First thought, ‘WHY DOES THIS HAPPEN TO ME???!?!’ Second though, ‘I wonder if that tool knows how to get past this.’ Good news! I do. Turns out it has to do with the z-index. The modal dialog by default has a z-index of 1000ish when showing. (And any modal dialog “above that” will increase it’s z-index to match.) If the calendar isn’t higher than that, no go.

Now you might be using the jquery styles from the jquery site and might be putting your through your keyboard thinking about having to deal with that mess. However, it’s actually a simple fix in there… there being the ui.datepicker.css file.

  .ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9000; }

And there you have it. Now the calendar will show up in front of anything lower than 9000, and as everyone knows: Anything over 9000 is impossible.

jQuery Modal Dialog : Hide That Stupid X Button / Windows Close Button

This is quick one, so hold on to your… whatever.

Want to get rid of that X at the top right of the modal “Control”? Well here it is: (The bold part, moron)

     jQuery('#WaitingDiv').dialog({
          autoOpen: false,
          bgiframe: false,
          height: 150,
          width: 200,
          modal: true,
          open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
        });

And that’s really it. Just thought I’d pass that on to you, the consumer.

On a side note, the big movie thing is the canceling of Spiderman 4 or at least going in a new direction. As much as I don’t care, it might lead to my dream come true:

A spiderman movie based on the SNES classic: Spider-Man & Venom: Maximum Carnage. Uwe Boll, are you out there?