List<Model> ChildModel { get; set; }s

And as you can see, each of those children can have children. Let’s get to the code.

I have a model, and this model holds some pretty basic values:

public class Model
 {
 public Model()
 {
 ChildModels = new List<Model>();
 }

public int ModelId { get; set; }

public string ModelName { get; set; }

public string ModelImagePath { get; set; }

public bool ToAssign { get; set; }

public IModel ParentModel { get; set; }

public List<Model> ChildModels { get; set; }
 }

Now, as you can see, there is a hierarchy achieved with this model. A certain model stored from the database into an IModel has the possibility to have children IModels. While this wouldn’t be too hard to handle itself, with something along the lines of:

@for (int i = 0; i > Model.ChildModels.Count; i++)
{
     @Html.CheckBoxFor(m => m.ChildModels[i])
     @Html.HiddenFor(m => m.ChildModels[i])
}

it becomes more complicated because of the hierarchy. The children can have its own children, creating an issue when trying to make a recursive call to a partial view:

@for (int i = 0; i > Model.ChildModels.Count; i++)
{
     @Html.CheckBoxFor(m => m.ChildModels[i])
     @Html.HiddenFor(m => m.ChildModels[i])
     if (m.ChildModels[i].ChildModels.Count > 0)
     {
          @Html.Partial("partialView", Model.ChildModels[i].ChildModels)
     }
}

The problem with this recursive call is that each grand-child’s attempted value storage when persisting to the controller would be

Model.ChildCompanies[i]

As you can tell, this is going to have problems with previously set child companies from the first parent. After many hours of attempts, different techniques (Lists inside the Model with a generic name [Ids/ToAssign], javascript/jquery parsing, etc), my teammate and I had found something that finally had worked.

ViewDataDictionary http://msdn.microsoft.com/en-us/library/system.web.mvc.viewdatadictionary(v=vs.98).aspx

Thanks to this post: http://forums.asp.net/post/4309562.aspx we were able to finally do some advanced model binding. The set up is actually quite simple:

First, you create your ViewDataDictionary with the type of the Model and the original Model. Then you set a prefix for each of the HtmlHelpers to add into your mark up:

//this goes in your cshtml
var dataDictionary = new ViewDataDictionary<Location.Model>(Model);

dataDictionary.TemplateInfo.HtmlFieldPrefix = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("Model");

So, when you create a HtmlHelper, such as:

@Html.CheckBoxFor(m => m.ToAssign)

It would be forced to have the prefix “Model,” or whatever you put in there.

Next, when calling your recursive partial view, you add that into the parameters as a ViewDataDictionary:

<ul id="treeview">
     @Html.Partial("modelTreeNode", Model, dataDictionary)
</ul>

I’m using an unordered list to allow for a jquery treeview (hence the id set as treeview) for a more hierarchy look. Now, as you can see, the partial view “modelTreeNode” will be set for each object to have the prefix “Model.” This ensures that each of the parent’s children is being bound correctly when attempting to persist the objects. Now, for the partial view itself:

</pre>
@model Location.Model
<li class="@Model.Id">
 @Html.CheckBoxFor(m => m.ToAssign)
 @Html.HiddenFor(m => m.Id)
 @Model.ModelName //just a display

@if (Model.ChildCompanies.Count > 0)
 {
 <ul>
 @for (int i = 0; i < Model.ChildModels.Count; i++)
 {
 //build the view data
 var dataDictionary = new ViewDataDictionary<Location.Model>(Model);
 dataDictionary.TemplateInfo.HtmlFieldPrefix = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("ChildModels[" + i + "]");

 <div class="parent-@Model.Id">
 <ul>
 @Html.Partial("modelTreeNode", Model.ChildModels[i], dataDictionary)
 </ul>
 </div>
 }
 </ul>
 }
</li>
<pre>

Now, let me break it down. First, you add a new unordered list within the same list item (for treeview once again), and throw in your CheckBoxFor and HiddenFor for persisting the data.

Now, when you find that you parent has atleast one child, you start off again by creating a ViewDataDictionary, and creating a new prefix of “ChildModels[i].” This means when you now use CheckBoxFor or HiddenFor, they are going to have the prefix added to the beginning of each HtmlHelper, since you are adding this ViewDataDictionary into your partial view call.

But wait, what’s this? You already have a ViewDataDictionary set for your partial view, and now you’re just rendering it again. Should that cause a problem? Well, if it wasn’t for the hierarchy, it would. See, you already have a ViewDataDictionary setting a prefix of “Model.” Now, you have two prefixes being added to each HtmlHelper. First, you have the new one being added, the most recent one, so your HtmlHelper might look like ChildModels[i].ChildModels[j].ToAssign, and so on. But since you originally set the ViewDataDictionary to add the prefix “Model.” So when being rendered, it turns out to be Model.ChildModels[i].ChildModels[j].ToAssign! 

And that’s exactly what we’re looking for, for advanced model binding. This means as many children, can have children, and those can have children, and etc. Each new grandchild would have a new prefix added. This allows for hierarchy at many deep levels.

Finally, your controller action should look something like this:

public ActionResult AssignImageTo(Model viewModel)
{
//your code here
}

Your parent company, if it has children, will persist, and the children of those children will persist, and so on.

Knives (Ray Ruballos) is a relatively new face among Marvel vs. Capcom 3 competitors and will be appearing alongside Infrit and Fanatiq at the event this Saturday. 

The competition will feature Super Street Fighter IV: Arcade Edition (2012 ver.), Ultimate Marvel vs. Capcom 3, and King of Fighters XIII with various prize pots ranging from $175-$300.

The event is set to open to attendees at 2 p.m. at the Phoenix Center for the Arts in downtown Phoenix. Those who intend to spectate and casual play only will have to pay $15 for entry, while those who want in on any of the three tournaments are required to pay a $30 entry fee.

UPDATE: The Mash Up! hosts confirmed today that the initial $15 spectator fee that was announced earlier was wrong due to a misunderstanding with the venue. The $30 charge applies to all attendees regardless if they are competing or not.

Tons of local groups and faces will be present at the event including AZHP Gaming, Euphoria Gaming, Team Hazmat and many more. For more information, check out the Button Masherz official Facebook event page.

In this blog post I wanted to demonstrate the ability to do some nice validation with the Kendo UI Web Validator Framework which also let’ you do a quite bit of validtion declaritively. With that beind said let’s get right into it using the MVVM form we created from the previous post.

Let’s take a quick at where we left off at on our last form.

    <div id="formContainer">
        <h1>
            My First MVVM Web View!</h1>
        <form id="myForm" action="">
        <label>
            First Name</label>
        <input type="text" data-bind="value: firstName, disabled:  isDisabled" />
        <label>
            Last Name</label>
        <input type="text" data-bind="value: lastName, disabled:  isDisabled" />
        <label>
            Email</label>
        <input type="text" data-bind="value: email, disabled:  isDisabled" />
        <label>
            Twitter</label>
        <input type="text" data-bind="value: twitter, disabled:  isDisabled" />
        <label>
            Site</label>
        <input type="text" data-bind="value: site, disabled:  isDisabled" />
        <label>
            Address</label>
        <input type="text" data-bind="value: address, disabled:  isDisabled" />
        <label>
            City</label>
        <input type="text" data-bind="value: city, disabled:  isDisabled" />
        <label>
            State</label>
        <input type="text" data-bind="value: state, disabled:  isDisabled" />
        <label>
            Zip</label>
        <input type="text" data-bind="value: zip, disabled:  isDisabled" />
        <label>
            Occupation</label>
        <select data-bind="source: occupations, value: occupation, disabled:  isDisabled">
        </select>
        <br />
        <br />
        <input type="button" value="Load" data-bind="click: load" />
        <input type="button" value="Edit" data-bind="click: edit" />
        <input type="button" value="Cancel" data-bind="click: cancel" />
        <input type="button" value="Reset" data-bind="click: reset" />
        </form>
    </div>

Now let’s add a couple of extra fields and declaritively add some validation to our form. While doing this let’s go ahead and change the types to our input controls with the appropriate HTML5 (http://www.w3schools.com/html5/html5_form_attributes.asp) types e.g. date, number, email, etc.. Quick note, notice that we are using the HTML5 [pattern] attribute for the input field named “Phone”.

    <div id="formContainer">
        <h1>
            My First MVVM Web View <br />
            now with Validation!</h1>
        <form id="myForm" action="">
        <label>
            First Name</label>
        <input type="text" name="firstName" data-bind="value: firstName, disabled:  isDisabled" required validationMessage="please enter a first name" />
        <label>
            Last Name</label>
        <input type="text" name="lastName" data-bind="value: lastName, disabled:  isDisabled" required validationMessage="please enter a last name" />
        <label>
            Email</label>
        <input type="email" name="email" data-bind="value: email, disabled:  isDisabled" required />
        <label>
            Twitter</label>
        <input type="url" name="twitter" data-bind="value: twitter, disabled:  isDisabled" required data-required-msg="please enter a {0}" data-url-msg="please enter a valid url" />
        <label>
            Site</label>
        <input type="url" name="site" data-bind="value: site, disabled:  isDisabled" required validationMessage="please enter a {0}" data-url-msg="please enter a valid url"/>
        <label>
            Address</label>
        <input type="text" name="address" data-bind="value: address, disabled:  isDisabled" required validationMessage="please enter a {0}" />
        <label>
            City</label>
        <input type="text" name="city" data-bind="value: city, disabled:  isDisabled" required validationMessage="please enter a {0}"/>
        <label>
            State</label>
        <input type="text" name="state" data-bind="value: state, disabled:  isDisabled" required validationMessage="please enter a {0}"/>
        <label>
            Zip</label>
        <input type="text" name="zip" data-bind="value: zip, disabled:  isDisabled" required validationMessage="please enter a {0}"/>
        <label>
            Phone</label>
        <input type="tel" name="phone" pattern="\d{10}"  data-bind="value: phone, disabled:  isDisabled" required data-required-msg="please enter a {0} number" data-pattern-msg="please enter a 10 digit phone number"/>
        <label>
            Lucky Number</label>
        <input type="number" name="luckynumber" data-bind="value: luckyNumber, disabled:  isDisabled" required data-required-msg="please enter a lucky number" data-max-msg="please enter a number less than 100" min="1" max="100" />
        <label>
            Birth Date</label>
        <input type="date" name="birthdate" data-bind="value: birthDate, disabled:  isDisabled" required validationMessage="please enter a {0}" />
        <label>
            Occupation</label>
        <select name="occupation" data-bind="source: occupations, value: occupation, disabled:  isDisabled" required valdationMessage="please select a {0}">
        </select>
        <br />
        <br />
        <input type="button" value="Load" data-bind="click: load" />
        <input type="button" value="Edit" data-bind="click: edit" />
        <input type="button" value="Cancel" data-bind="click: cancel" />
        <input type="button" value="Reset" data-bind="click: reset" />
        <button type="submit" value="Submit">Save</button>
        </form>
    </div>

Notice that all we are doing here is really providing the Validator Framework with is validation messages for the type of validation. There is a convention that we need to follow which is marking the control with the attribute: data-[rule]-msg, [rule] just needs to be replaced with actual rule name so for example data-required-msg=”please enter a luckly number” will be the message that is displayed when there is no number in the input field and data-max-message=”please enter a number less than 100″ will be the validation message that is shown if a user enters a number that is greater than 100. Now that all of our validation messages are setup let’s add our one line of script to get this all of our validations wired up (line 45).

    var myViewModel;
    $(document).ready(function () {
        myViewModel = kendo.observable({
            firstName: "Long",
            lastName: "Le",
            email: "lelong37@gmail.com",
            twitter: "twitter.com/lelong37",
            site: "blog.longle.net",
            address: "3737 Galatic Avenue",
            city: "Cloud City",
            state: "Texas",
            occupations: ["", "Hacker", "Jedi", "Ninja"],
            occupation: "Jedi",
            phone: "1111111111",
            luckyNumber: 34,
            birthDate: null,
            isSaved: false,
            isDisabled: true,
            edit: function (e) {
                this.set("isDisabled", false);
            },
            cancel: function (e) {
                this.set("isDisabled", true);
            },
            reset: function (e) {
                this.set("firstName", null);
                this.set("lastName", null);
                this.set("email", null);
                this.set("twitter", null);
                this.set("site", null);
                this.set("address", null);
                this.set("city", null);
                this.set("state", null);
                this.set("zip", null);
                this.set("occupation", "");
                this.set("phone", null);
                this.set("luckyNumber", null);
            },
            load: function (e) {
                LoadJohnDoesInfo();
            }
        });

        kendo.bind($("#myForm"), myViewModel);
        var validator = $("#myForm").kendoValidator().data("kendoValidator");
    });

Now with our declaritive validation and one line of Javascript to wire everything up let’s give our form a spin. Let’s clear out our form by and try saving by clicking [Edit], [Reset] and [Save].

Let’s test out our messsages that are custom to a specific validation type by typing in an invalid Url for our Twitter, Site and invalid email address when filling out our form and clicking [Save].

Notice how are validation messages are not the displaying the standard required messages but now they are validation messages specific to the type of validation. For example with the field “Lucky Number” the standard validation message was “please enter a lucky number” now that we actually typed in a value that is greater than the max attribute that was set to 100 we are getting the declartive validation message “please enter a number less than 100″. Also for the field [email] we also have typed in something however because we changed the input type to email (new with HTML5) out of the box the framework is displaying a standard message for us “email is not a valid email” even though we did not explicitly declare a validation message for email.

Now let’s fix all the fields with the correct values email, twitter, site, phone and lucky number and notice as we tab out of each field our validation messages dissapear and we are able to post the form.

Last but not least we can manually invoke the Validator by invoking the validate() method, let’s go ahead and rewire our click button to go ahead and validate our form as well as display a message to the user.

        $("button").click(function (e) {
            e.preventDefault();
            if (validator.validate()) {
                alert("Your form is golden!");
            } else {
                alert("Your form has errors!");
            }
        });

Let’s give this a try.

Happy Coding!

Download:

Information like the current users name, email and even other not so generic information like permissions (we rolled our own permissions architecture) or current context (our website has many “portals”) all seemed like fair game. I also noticed many times we’ll need this information in the main content view or even on a partial/ajax request.

A couple solutions came to mind.

I initially created many partial actions which retrieved the specific information I needed for the particular area but soon found that to be too cumbersome. Even if all the information I needed was cached in nHibernate for the entire request, why must I go a round about way to get it each time.

Another solution was to stick what I needed in the context object, or even the ‘He-Who-Must-Not-Be-Named’ – señor ViewBag. Again though leading back to my original thesis – I wanted this to be typed safe – so I finally settled on this quick and simple solution.

First I created a simple view model, added any dependencies and populated it with the info I’d want available to my layouts and views.

public class BaseViewModel
{
   private readonly IContextRepository _contextRepository;

   public BaseViewModel(IContextRepository contextRepository)
   {
      _contextRepository = contextRepository;
      SelectedContext = _contextRepository.GetCurrent();
   }
   // assume for the sake of the example a ContextViewModel is just a simple dto with an Id and Name representing a context business object
   public ContextViewModel SelectedContext { get; private set;  }
}

Then in my base controller, during the OnActionExecuting I create the BaseViewModel using my resolver. It’s important to note that the BaseViewModel (and all of it’s properties) gets created between the unitOfWork transaction to ensure I’m not accessing the database at the view level. If there’s questions about why it’s important, I’ll make another blog post soon to respond.

public class BaseController : Controller
{
  protected BaseViewModel ModelBase { get; private set; }

  private readonly IMapService _mapService = Resolver.Get<IMapService>();
  private IUnitOfWork _unitOfWork;

  protected override void OnResultExecuting(ResultExecutingContext filterContext)
  {
    var contextItems = filterContext.HttpContext.Items;
    if (contextItems["ModelBase"] == null)
      contextItems["ModelBase"] = ModelBase;
    base.OnResultExecuting(filterContext);
  }

  protected override void OnActionExecuting(ActionExecutingContext filterContext)
  {
    _unitOfWork = Resolver.Get<IUnitOfWork>();
    _unitOfWork.BeginTransaction();
            
    ModelBase = new BaseViewModel(Resolver.Get<IContextRepository>());
            
    base.OnActionExecuting(filterContext);
  }
  //...
}

After creating it, I simply place it in the contextItems dictionary to be used by the views – simple as that. This allows type safe, transaction safe references to information in the layouts, and really all over the place.

_layout.cshtml

...
<div>Hey there you're in the @ModelBase.SelectedContext.Name section of our site!</div>
...

The naming is especially nice since intellisense will pick up the BaseViewModel when the developer types “Model” as he’ll see “ModelBase” in the drop down and hopefully remember to use it. It’s also made refactoring quite a bit easier as we now have one place to make modifications to retrieving that commonly used information.

(Now of course with great power…)
Make sure you only put in to this baseViewModel what you’ll be accessing quite often (nearly if not every request) otherwise obviously you won’t get as much out of it as you could. It’s also recommended, like always, if you are working with a view model of any kind, keep it to primitives or dtos of primitives mapped via nHibernate or AutoMapper.

Please don’t expose your entire user/company/kitchenSink object using this method as I’ll plead the 5th. =P

-D^t

Quick synopsis on MVVM for those of us that are new to it (especially MVC devs) and in the interest of time I’ll try to do this in a 60 second nutshell. So when working with a view whether it be in WPF, Silverlight, and now MVC, you can declaritively set which controls bind to which properties to your ViewModel (simply a JSON object with properties). So for example I can set a DropDownList (select) control on my view to bind directly to a property of my ViewModel that is a collection.

So let’s get right to it with a few simple examples.

First add a script references for jQuery and Kendo UI, here are some links for Microsoft’s and Teleriks’ CDN’s for these scripts.

• http://www.asp.net/ajaxlibrary/cdn.ashx
• http://www.kendoui.com/documentation/javascript-dependencies.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Kendo UI Web MVVM</title>
</head>
<body>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
</html>

Now let’s create a simple form.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Kendo UI Web MVVM</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            font-family: Arial;
        }
        label
        {
            display: block;
            margin-top: 10px;
        }
        #formContainer
        {
            background-color: #F2F7F9;
            width: 400px;
            padding: 20px;
            margin: 50px auto;
            border: 6px solid #8FB5C1;
            border-radius: 15px;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="formContainer">
        <h1>My First MVVM Web View!</h1>
        <form id="myForm" action="">
        <label>
            First Name</label>
        <input type="text" />
        <label>
            Last Name</label>
        <input type="text"  />
        <label>
            Email</label>
        <input type="text"  />
        <label>
            Twitter</label>
        <input type="text"  />
        <label>
            Site</label>
        <input type="text" />
        <label>
            Address</label>
        <input type="text" />
        <label>
            City</label>
        <input type="text" />
        <label>
            State</label>
        <input type="text" />
        <label>
            Zip</label>
        <input type="text" />
        <label>
            Occupation</label>
        <select>
        </select>
        <br />
        <br />
        <input type="button" />
        <input type="button" />
        <input type="button" />
         <input type="button" />
        </form>
    </div>
</body>

</html>

Now let’s create a ViewModel (JavaScript JSON object or class if you will) with some default values for our View (in this case our form) to bind to. We will also add some methods to our ViewModel so that we can bind our buttons that are on our view too.

  <script language="javascript" type="text/javascript">

    var myViewModel;
    $(document).ready(function () {
        myViewModel = kendo.observable({
            firstName: "Long",
            lastName: "Le",
            email: "lelong37@gmail.com",
            twitter: "twitter.com/lelong37",
            site: "blog.longle.net",
            address: "3737 Galatic Avenue",
            city: "Cloud City",
            state: "Texas",
            occupations: ["Please Select", "Hacker", "Jedi", "Ninja"],
            occupation: "Jedi",
        });

        kendo.bind($("#myForm"), myViewModel);
    });

</script>

Note: Line 18 is what will bind our form to our ViewModel, if your wondering why nothing is happening yet it’s because we are missing once more step which is to provide the binding (mapping) information, which will map our controls to our ViewModel. The beauty here is we will do this declaritively with without code.

Our View will have two modes: read-only and edit, so we will bind our controls for where each control will get and set it’s values to and another binding for enabling and disabling them.

    <div id="formContainer">
        <h1>My First MVVM Web View!</h1>
        <form id="myForm" action="">
        <label>
            First Name</label>
        <input type="text" data-bind="value: firstName, disabled:  isDisabled" />
        <label>
            Last Name</label>
        <input type="text" data-bind="value: lastName, disabled:  isDisabled" />
        <label>
            Email</label>
        <input type="text" data-bind="value: email, disabled:  isDisabled" />
        <label>
            Twitter</label>
        <input type="text" data-bind="value: twitter, disabled:  isDisabled" />
        <label>
            Site</label>
        <input type="text" data-bind="value: site, disabled:  isDisabled" />
        <label>
            Address</label>
        <input type="text" data-bind="value: address, disabled:  isDisabled" />
        <label>
            City</label>
        <input type="text" data-bind="value: city, disabled:  isDisabled" />
        <label>
            State</label>
        <input type="text" data-bind="value: state, disabled:  isDisabled" />
        <label>
            Zip</label>
        <input type="text" data-bind="value: zip, disabled:  isDisabled" />
        <label>
            Occupation</label>
        <select data-bind="source: occupations, value: occupation, disabled:  isDisabled">
        </select>
        <br />
        <br />
        <input type="button" value="Load" />
        <input type="button" value="Edit" />
        <input type="button" value="Cancel" />
         <input type="button" value="Reset" />
        </form>
    </div>

Now if we refresh the page we that our View is not bound to our ViewModel…!

Note: Notice that our form is in read-only mode, all of our controls are disabled for editing because the disabled attribute is bound to the isDisabled property in our ViewModel whose default value is set to true.

For those of us that are ASP.NET MVC developers, the answer is yes you can get and post your ViewModel back as JSON using jQuery from and to an actions on your controller!

Now let’s demonstrate binding our buttons to methods on our ViewModel, first let’s add a couple of methods to our ViewModel (edit, cancel, reset, and load)

• edit, will enabled our View for editing
• cancel, will set our View back to read-only mode
• reset, will clear out our View
• load, will load John Doe’s information into our View (obviously here you could load this from using a “GET” to an action off of your controller)

    var myViewModel;
    $(document).ready(function () {
        myViewModel = kendo.observable({
            firstName: "Long",
            lastName: "Le",
            email: "lelong37@gmail.com",
            twitter: "twitter.com/lelong37",
            site: "blog.longle.net",
            address: "3737 Galatic Avenue",
            city: "Cloud City",
            state: "Texas",
            occupations: ["Please Select", "Hacker", "Jedi", "Ninja"],
            occupation: "Jedi",
            isSaved: false,
            isDisabled: true,
            edit: function (e) {
                this.set("isDisabled", false);
            },
            cancel: function (e) {
                this.set("isDisabled", true);
            },
            reset: function (e) {
                this.set("firstName", null);
                this.set("lastName", null);
                this.set("email", null);
                this.set("twitter", null);
                this.set("site", null);
                this.set("address", null);
                this.set("city", null);
                this.set("state", null);
                this.set("zip", null);
                this.set("occupation", "Please Select");
            },
            load: function (e) {
                LoadJohnDoesInfo();
            }
        });

        kendo.bind($("#myForm"), myViewModel);
    });

    function LoadJohnDoesInfo() {
        myViewModel.set("firstName", "John");
        myViewModel.set("lastName", "Doe");
        myViewModel.set("email", "jdoe@skyranch.com");
        myViewModel.set("twitter", "twitter.com/jedi");
        myViewModel.set("site", "starwars.com");
        myViewModel.set("address",  "1212 SkyRanch");
        myViewModel.set("state", "California");
        myViewModel.set("zip", "98000");
        myViewModel.set("occupation", "Jedi");
    }

Add our binding meta-data to our buttons declaritively.

        <input type="button" value="Load" data-bind="click: load" />
        <input type="button" value="Edit" data-bind="click: edit" />
        <input type="button" value="Cancel" data-bind="click: cancel" />
        <input type="button" value="Reset" data-bind="click: reset" />

So let’s invoke some our methods on our ViewModel and give our button’s a run for their money.

Now let’s click on the [Load] button and here I just wanted to demonstrating that all we need to do here to update the View is interact with the ViewModel, any changes to the ViewModel and the View automatically updates because they are bound together, which is the magic and essense of the MVVM pattern!

Our load method on our ViewModel.

            load: function (e) {
                LoadJohnDoesInfo();
            }

Which turns around and invokes our LoadJohnDoesInfo method and set’s his data on our ViewModel.

    function LoadJohnDoesInfo() {
        myViewModel.set("firstName", "John");
        myViewModel.set("lastName", "Doe");
        myViewModel.set("email", "jdoe@skyranch.com");
        myViewModel.set("twitter", "twitter.com/jedi");
        myViewModel.set("site", "starwars.com");
        myViewModel.set("address", "1212 SkyRanch");
        myViewModel.set("state", "California");
        myViewModel.set("zip", "98000");
        myViewModel.set("occupation", "Jedi");
    }

Notice when the View first loads our entire form is disabled for our read-only mode and when we click [Edit] all of our controls that had the binding for disabled that was bound to the isDisabled property on our ViewModel which be default is set to true. Once we click on the Edit button the isDisabled property is set to true enabling all of our controls for edit mode.

Our declaritive binding on one of our controls.

<input type="text" data-bind="value: firstName, disabled:  isDisabled" />

The Edit method that is invoked when clicking the [Edit] button.

            edit: function (e) {
                this.set("isDisabled", false);
            },

Hitting the [Reset] button will simply invoke the reset method on our ViewModel which clears out all our properties by setting them null values and again our View is automagically updated because it is bound to our ViewModel.

            reset: function (e) {
                this.set("firstName", null);
                this.set("lastName", null);
                this.set("email", null);
                this.set("twitter", null);
                this.set("site", null);
                this.set("address", null);
                this.set("city", null);
                this.set("state", null);
                this.set("zip", null);
                this.set("occupation", "Please Select");
            },

Well great, I know we aren’t doing anything ground breaking here, however this post is really just to illustrate MVVM on the client-side using Telerik’s Kendo UI Web MVVM Framework and ellaborate on how we can really just work with the ViewModel to update the View vice- versa any updates to the View will update our ViewModel because they are “bound” together using MVVM.

Last but not least, even though the Kendo UI Framework was written with jQuery, notice how we didn’t have to explicitly use any jQuery or Javascript to set or get any values from our controls. I’m not at all saying jQuery is a bad thing, however when developing you probably want to be coding something that is immediately adding business value rather than coding jQuery selectors to get and and set values in your View right..? :p

Happy coding…!

Download sample code: https://skydrive.live.com/redir?resid=949A1C97C2A17906!1951

Que tal como estas!!!

Mira aqui te va la entrevista con uno de los jugadores que mejor representaron a Mexico y se hizo toda una revolucion por su gran desempeno en el torneo Evolution 2012, me refiero claro a Frutsy..

Que onda frutsy, que te parecio el evo?

El evo me pareció increíble!!! es una experiencia única que tengo que repetir

Esperabas llegar tan lejos?

Esperaba ganar pero minimo siempre dije que iba a estar en top 8 y lo logre

Que sentiste llegar al top 8?

Mucho orgullo porque logre estar ahi, no tienen idea del orgullo y felicidad que se siente

Que jugadores se te hicieron interesantes o de sorpresa?

Interesantes los japoneses y el chileno kane, los de sorpresa… los japoneses jajaja

Con quien retaste? Con quien te quedaste con ganas de retar?

Rete con muchos de alto nivel pero me quede con ganas de retar con chris G y justin wong

Que tal ser parte del team mexico? Que piensas al respecto del team?

Es exelente, tuvimos una hermandad increible aun sin conocernos y pienso que son grandiosos todos

Que es el Team Asteroides y como nace? Y que hace?

El Team Asteroides es un grupo de amigos que juega retas de cualquier juego de peleas sin excluir a nadie. Nació la idea hace algunos años gracias a la propuesta que hice sobre hacer un equipo representativo para los torneos ya que nosotros jugabamos en un local de maquinas que se llamaba asteroides, mi idea fue rechazada entonces y hasta hace poco… mas o menos en Enero que formabamos parte de elite mexico tuvimos algunos desacuerdos y nos sacaron del grupo asi que como ya teníamos una cierta comunidad pues volví a proponer que hicieramos team asteroides y esta ves aceptaron. Que hacemos? Pues organizamos torneos de UMvC3, retas en las noches, ranbats los domingos (mini torneos tipo una liga), enseñamos a jugar a los que quieren aprender, etc… el chiste es ayudar a la comunidad

Eres del DF?

Si, soy del df

De donde viene el nombre de frutsy?

Quisiera saberlo tambien jajaja la cosa es que en un torneo cuando me preguntaron mi apodo para inscribirme un amigo de inmediato dijo frutsy!!! y yo lo voltie a ver muy sorprendido y le pregunte que quien me decía asi ya que segun yo no tenía apodo y el dijo que asi me decian en asteroides… y se me quedo ya que en ese torneo hice un buen papel tambien

Regresaras al evo del ano que viene?

Me encantaría volver pero debo ver mi situacion para ese momento asi que por ahora no puedo asegurar nada

A donde te gustaria ir a retar?

Me gustaría ir a cualquier torneo donde pueda conocer distintos lugares y tener siempre experiencias nuevas y porsupuesto jugar con todo lo que tengo

Ah cambiado tu vida regresando del evo?

Pues claro que ha cambiado… almenos en esto de la escena de peleas pues mas personas quieren aprender a jugar y se acercan mas a nosotros y eso me pone muy contento

Como vez el nivel de mexico en marvel en comparacion con EEUU?

El nivel de EU es grande pero aqui estoy seguro que se sorprenderian de ver que hay muchos que los pondrían en apuros

Que crees que hace falta en mexico?

Falta apoyo tanto animico ya que muchos piensan que porque somos mexicanos no vamos a ganar y eso no es cierto, como economico ya que si hubieran patrocinios como los hay alla se podrian ver mejores eventos de forma local y mayor promocion al nivel mexicano

Cual es tu proxima meta?

Pues mi meta siempre sera mejorar y juntar la comunidad de juego, si hablamos de torneos pues ahora si que a los que la vida me lleve

Donde veremos al frutsy proximamente?

Pues me veran donde haya torneos y mientras tenga la posibilidad de asistir ahi me veran, por ejemplo la semana pasada fui a acapulco a jugar un torneo y el 4 de agosto tengo el torneo Nuclear aqui en el DF en la expo reforma

Tienes twitter?

Mi twitter es @frutsy16

Algunas palabras que quieras compartir con tus fans?

Jajaja fans??? caray que lindo se escucha eso jajaja. pues mas bien le quiero decir a todos que le echen ganas a lo que deveras quieran porque nada es inalcanzable y almenos yo ya hice algo de lo que mas me apasiona y esto me demuestra que los limites son autoimpuestos, las cosas pueden ser dificiles pero con voluntad se pueden lograr

Muchas gracias Frutsy y si lo quieren seguir siganlo en @frutsy16

Y claro siganme a mi @neopenny para cualquier duda y sugerencia del blog, hasta la proxima!!!

Problem:
SQL CE database was not getting created when using using Entity Framework’s Code First paradigm within an MVC application.

Details:
Initial error stated:

A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 26 – Error Locating Server/Instance Specified)

However, the Inner Exception specified:

ProviderIncompatibleException: The provider did not return a ProviderManifestToken string.

Resolution:
Essentially, what I was lacking was a Connection String to tell Entity Framework where to create the Database.

I used the following code in the root-level Web.config file to remedy the error:

<add name="SalesQuoteDB" connectionString="Data Source=|DataDirectory|SalesQuote.sdf" providerName="System.Data.SqlServerCe.4.0"/>

Now all seems well with the world.

• LinqToCsv which is going to help us parse the csv file.
• Telerik Extensions for ASP.NET MVC. This is going to provide us with a powerful grid in which we can render the results.

Let’s start by downloading and installing the Telerik Extensions, you can either download a free trial or use the open source version of the extensions. Be sure to read the license on the open source version before using it in your applications.

The library add a Visual Studio extension  as well as new project types. This makes it very easy to use the Telerik extensions in a new project.

After downloading and installing the extensions, let’ go ahead and create a new Visual Studio ASP.NET MVC3 Web Application called “CsvToGrid”.

Because we installed the Telerik Extensions for ASP.NET MVC we should see a new Project Template for Telerik MVC Web Application. Let’s select that.

Go through the Telerik Project Configuration Wizard and select all the default options. This will create the project and preconfigure all the necessary settings needed by the extensions. This includes configuration options in the web.config file and referencing JavaScript and css files.

After this let’s go ahead and install LinqToCsv. Right click on the references folder and select “Manage NuGet Packages” then search for “LinqToCsv” and install it.

We need to define a sample csv file. Let’s add a new file called people.csv to our desktop with the following data:

FirstName,LastName,Age,State
John, Smith, 35, CA
Mike, Jones, 29, AZ
Susan, Baldwin, 45, CA
Alex, Johnson, 32, WA

As you can see, it’s a simple comma delimited file that represents people and includes their first name, last name , age and state.

We also need a class to represent this data. Let’s add a Person class to our models folder. Add a new class and name file Person.cs The contents of the file should look like this

public class Person{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
    public string State { get; set; }
}

Now let’s modify the home controllers Index view to include a form an a file upload html control. Replace the contents of the file “Index.cshtml” in the Views/Home folder with the following:

@{

ViewBag.Title = “Home Page”;

}

@using (Html.BeginForm(“Index”, “Home”, FormMethod.Post, new { enctype = “multipart/form-data” }))

{

<input type=”file” name=”file” />

<input type=”submit” name=”btnSubmit” value=”Upload!”/>

}

Now let’s add some code to the controller so that we can save this file to disk. Let’s replace the action methods in HomeController.cs with the following two action methods:

public ActionResult Index(){

return View();

}

[HttpPost]

public ActionResult Index(HttpPostedFileBase file){
if (file.ContentLength > 0){

var fileName = Path.GetFileName(file.FileName);

var path = Path.Combine(Server.MapPath(“~/App_Data/”), fileName);

file.SaveAs(path);

TempData["file"] = path;

}

return RedirectToAction(“Grid”);

}

Here we’ve added a second Index action method that takes in an HttpPostFileBase, this object will hold the reference to the uploaded file. Now it’s important to note that the name of the input parameter (“file” in our case) has to match up with the name of the html control. If the names don’t match up, the input parameter will come through as null.

In the action method we copy the file to the App_Data folder then we save the file path in TempData and redirect to a new Action called Grid.

The Grid action method will be responsible for reading data from the csv file and passing it to the view so that it can be rendered in telerik grid.

Add the following using statements to the top of your HomeController class

using CsvToGrid.Models;
using LINQtoCSV;

Now add the Grid action method to the home controller.

public ActionResult Grid()
 {
     string file = TempData["file"] as string;
     if (file == null)
     {
         return RedirectToAction("Index");
     }

     CsvContext cc = new CsvContext();
     List<Person> people = cc.Read<Person>(file).ToList();

     return View(people);

 }

This action method reads the file path from tempdata, then uses LinqToCSV to convert the data in the file to a collection of “Person”. This data I then returned to the view.

In the view we need to show this data as a Telerik Grid. Let’s define the view as a strongly typed view of type List<Person>. Let’s also add the code for the Telerik Grid. The complete view code should be

@model IEnumerable<CsvToGrid.Models.Person>

@{
    ViewBag.Title = "Grid";
}

<h2>Grid</h2>

@(Html.Telerik().Grid(Model).Name("PeopleGrid"))

Run the application by pressing alt-F5. On the home screen select the csv file we created earlier and click the upload button. The data within the csv file should now appear as data in your telerik mvc grid.

In part two of this post I’m going to show you how to customize the application so that you deal with csv data that doesn’t include a header row. You can download the complete source code for this demo site here.

Alex Maccaw:

Web developers are still stuck in the request/response mindset. I call it the ‘click and wait’ approach – where every UI interaction results in a delay before another interaction can be performed. [...]  developers still insist on using the request/response model. Even the introduction of Ajax hasn’t improved the scene much, replacing blank loading states with spinners. [...]

I’ve been working on this problem, specifically with a MVC JavaScript framework called Spine, and implementing what I’ve dubbed asynchronous user interfaces, or AUIs. The key to this is that interfaces should be completely non-blocking. Interactions should be resolved instantly; there should be no loading messages or spinners. Requests to the server should be decoupled from the interface.

I am using different technology to solving the problem than Alex, but the end result is the same.  My approach focuses on using Microsoft Asp.Net MVC, jQuery, and a custom javascript library I created.  This technique let’s me focus on building HTML with attributes and then the script automatically enhances those views to interact with my MVC controller action methods.

Final Output

Here is a screenshot of the final profile page for which I will show how to implement the email section.  There are 9 different areas in which you can edit something on the page, including your sign in credentials, real name, birthdate, a markdown editor for a bio, an email address, a phone number, an address, a phone number, and a school/job section.  In loading this entire page the initial load time is only 1/2 a second, plus another 4/5 second for images from another domain.  I’ll cut that down after I add bundling and more minification of the resources.

As the following screenshot shows the Undo Delete only takes 58 milliseconds post time.  But before the post began the view had already toggled to the readonly version.  I don’t know of any tools to track how long javascript ran before the post began, but to me using the button it felt instantaneous.  All the buttons feel just as fast using the code shown in this article.

MVC Adaptive Controller

To support progressive enhancement you will need to support users that do not have AJAX support or that have limited support.  It is easy to make a controller action return either JSON data for consumption by javascript and to support returning view HTML.  Here are some simple controller actions that returns a profile email address for a user as either an HTML view or as JSON.

 //UserProfileController.cs
public virtual ActionResult EmailList( Guid userID )
{
	UserProfileEmailListViewModel model = new UserProfileEmailListViewModel();
	model.Load(userID);
	if (this.IsJsonRequest())
		return Json(model, JsonRequestBehavior.AllowGet);
	else
		return View(MVC.UserProfile.Views.EmailList, model);
}
public virtual ActionResult EmailView( Guid userID, long id )
{
	UserProfileEmailViewModel model = new UserProfileEmailViewModel() { UserID = userID };
	UserProfileEmail item = UserProfileManager.GetUserProfileEmail(userID, id, model.Results);
	model.Load(item);
	if (this.IsJsonRequest())
		return Json(model, JsonRequestBehavior.AllowGet);
	else
		return View(MVC.UserProfile.Views.EmailView, model);
}
public virtual ActionResult EmailEdit( Guid userID, long id )
{
	UserProfileEmailViewModel model = new UserProfileEmailViewModel() { UserID = userID };
	UserProfileEmail item = UserProfileManager.GetUserProfileEmail(userID, id, model.Results);
	model.Load(item);
	if (this.IsJsonRequest())
		return Json(model, JsonRequestBehavior.AllowGet);
	else
		return View(MVC.UserProfile.Views.EmailEdit, model);
} //UserProfileController.cs

The key in adapting your result to what is requested is to check if the request is for JSON. You can support this by adding a simple Controller class extension method somewhere in your project or in a shared library.

public static class ControllerExtensions
{
	public static bool IsJsonRequest( this Controller controller )
	{
		foreach (string a in controller.Request.AcceptTypes)
			if (a.ToLower().Contains("json"))
				return true;
		return false;
	}
	public static bool IsAjaxRequest( this Controller controller )
	{
		return controller.Request.IsAjaxRequest();
	}
}

The create action method is slightly different in that it needs to potentially return a success flag or possibly error messages.  In the case of create and delete these action methods will rarely, if ever, be called in the case when the browser supports AJAX.  So these action methods support both JSON and the normal get HTML options, but they are primarily for the latter.

 //UserProfileController.cs
public virtual ActionResult EmailCreate( Guid userID )
{
	UserProfileEmailViewModel model = new UserProfileEmailViewModel();
	model.UserID = userID;
	if (this.IsJsonRequest())
		return Json(new { success = true, item = model }, JsonRequestBehavior.AllowGet);
	else //99% case
		return View(MVC.UserProfile.Views.EmailEdit, model);
}
public virtual ActionResult EmailDelete( Guid userID, long id )
{
	UserProfileEmailViewModel model = new UserProfileEmailViewModel() { UserID = userID };
	UserProfileEmail item = UserProfileManager.GetUserProfileEmail(userID, id, model.Results);
	model.Load(item);
	if (this.IsJsonRequest())
		return Json(model, JsonRequestBehavior.AllowGet);
	else
		return View(MVC.UserProfile.Views.EmailDelete, model);
} //UserProfileController.cs

All of these methods are using a class called UserProfileManager to get data.  In case you are wondering how that business layer works, you can read my previous articles on provider model.  It really isn’t pertinent to this article so I won’t mention it in this article again.

MVC Post Action Methods

When doing a post for create, edit, or delete you may be responding to an AJAX request from the AsyncUI javascript or it may be a full browser request from a client that does not support AJAX properly. In the AsycnUI case you want to return a message, if applicable, and then let the calling page determine if the user stays on the page or needs to go elsewhere. In the form post method, the client was likely just on a full edit page since they don’t support AJAX and AsyncUI, so on success you want to redirect them back to the page from before the edit. Or in the failure case (with no AsyncUI) you want to keep them on the edit page and show the error message. To support these different result options, I create helper methods in the controller to determine the correct ActionResult.

 //UserProfileController.cs
private ActionResult UserProfileEmailResult( UserProfileEmailViewModel model, ExecutionResults result )
{
	model.Results = result;
	if (this.IsAjaxRequest()) //99% case
		return Json(new { success = result.Success, message = result.ToHtmlString(), item = model }); //passing item back because it can change - share description is calculated
	else if (result.Success)
		return RedirectToAction(MVC.UserProfile.Main(SecurityContext.CurrentIdentity.Name));
	else
		return View(MVC.UserProfile.Views.EmailEdit, model);
}
private ActionResult CancelResult()
{
	if (this.IsAjaxRequest()) //1% case - cancel was not enhanced properly to revert to view mode on client side.
		return Json(new { success = true });
	else
		return RedirectToAction(MVC.UserProfile.Main(SecurityContext.CurrentIdentity.Name));
} // //UserProfileController.cs.  Note, The code here is using T4MVC to generate urls.

I can now leverage this in the save, delete, and undo delete operations.  The XCancel action methods will not typically be invoked for most users.  But these methods are here for the case when javascript is disabled and the button needs to cause a navigation somewhere.  You can accomplish this by setting urls on cancel links instead of having cancel behave like a button.  But I included the XCancel action methods because I wanted to demonstrate the FormPostActionSelector attribute also.

//UserProfileController.cs
[AcceptVerbs(HttpVerbs.Post)]
[FormPostActionSelector(ButtonName = "Save")]
public virtual ActionResult EmailEditSave( UserProfileEmailViewModel model )
{
	ExecutionResults result = new ExecutionResults();
	if (SecurityContext.CurrentUser.IsAnonymous)
	{
		result.AppendError("You must be logged in to save this.");
		return UserProfileEmailResult(model, result);
	}
	model.UserID = SecurityContext.CurrentIdentity.ID;
	UserProfileEmail item = null;
	if (model.ID != -1 && model.ID != 0)
		item = UserProfileManager.GetUserProfileEmail(model.UserID, model.ID, result);
	if (item == null)
		item = new UserProfileEmail() { UserID = model.UserID };
	if (!result.Success)
		return UserProfileEmailResult(model, result);
	item.EmailType = model.EmailType ?? string.Empty;
	item.Address = model.Address ?? string.Empty;
	item.IsPrimaryNotification = model.IsPrimaryNotification;
	item.Groups = model.Groups ?? string.Empty;
	item.Comments = model.Comments ?? string.Empty;
	item.SuggestContacts = model.SuggestContacts;
	UserProfileManager.SaveUserProfileEmail(item, result); //method populates 'result' with any validation errors
	model.Load(item);
	return UserProfileEmailResult(model, result);
}
[AcceptVerbs(HttpVerbs.Post)]
[FormPostActionSelector(ButtonName = "Cancel")]
public virtual ActionResult EmailEditCancel( UserProfileEmailViewModel model )
{
	return CancelResult();
}
[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult EmailDeleteConfirm( Guid userID, long id )
{
	ExecutionResults result = new ExecutionResults();
	if (SecurityContext.CurrentUser.IsAnonymous)
	{
		result.AppendError("You must be logged in to delete this.");
		return UserProfileEmailResult(new UserProfileEmailViewModel() { UserID = userID, ID = id }, result);
	} 

	UserProfileEmail item = UserProfileManager.GetUserProfileEmail(userID, id, result);
	UserProfileEmailViewModel model = new UserProfileEmailViewModel();
	UserProfileManager.DeleteUserProfileEmail(item, result);
	model.Load(item);
	return UserProfileEmailResult(model, result);
}
[AcceptVerbs(HttpVerbs.Post)]
[FormPostActionSelector(ButtonName = "Cancel")]
public virtual ActionResult EmailDeleteConfirmCancel( Guid userID, long id )
{
	return CancelResult();
}
[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult EmailDeleteUndo( Guid userID, long id )
{
	ExecutionResults result = new ExecutionResults();
	if (SecurityContext.CurrentUser.IsAnonymous)
	{
		result.AppendError("You must be logged in.");
		return UserProfileEmailResult(new UserProfileEmailViewModel() { UserID = userID, ID = id }, result);
	}
	UserProfileEmail item = UserProfileManager.GetUserProfileEmail(userID, id, result);
	UserProfileEmailViewModel model = new UserProfileEmailViewModel();
	item.IsDeleted = false;
	UserProfileManager.SaveUserProfileEmail(item, result);
	model.Load(item);
	return UserProfileEmailResult(model, result);
}//UserProfileController.cs

FormPostActionSelector

Some of the code above used a custom action name selector called FormPostActionSelector. This lets you just put a button on a form in your view and then let the controller action method intercept which button it handles. If you only have one button (like Save), then this is not necassary. But if you have two or more buttons on a form then it let’s you have a post action for each of the form’s buttons. I have this in a shared library and it is available within NuGet package candor.web.mvc.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace XQuiSoft.Xulgent.MvcWebApplication.Filters
{
	/// <summary>
	/// Matches a controller action method to a post from another action where the attributed action is the name of a button on the form.
	/// </summary>
	/// <remarks>
	/// Variation from source article: http://blog.ashmind.com/2010/03/15/multiple-submit-buttons-with-asp-net-mvc-final-solution/
	/// </remarks>
	public class FormPostActionSelectorAttribute : ActionNameSelectorAttribute
	{
		/// <summary>
		/// Gets or sets the name of the action method that must match.  
		/// Or leave empty to match on a combination of the method name 
		/// and button name.
		/// </summary>
		public string FormActionName { get; set; }
		/// <summary>
		/// Gets or sets the name of the button (form field name) that
		/// must post in order to match the action method.
		/// </summary>
		public string ButtonName { get; set; }
		/// <summary>
		/// Creates a new instance.
		/// </summary>
		public FormPostActionSelectorAttribute() : base() { }
		/// <summary>
		/// Determines if the current request matches this method.
		/// </summary>
		/// <param name="controllerContext"></param>
		/// <param name="actionName"></param>
		/// <param name="methodInfo"></param>
		/// <returns></returns>
		public override bool IsValidName( ControllerContext controllerContext, 
			string actionName, System.Reflection.MethodInfo methodInfo )
		{
			if (!string.IsNullOrEmpty(ButtonName))
			{
				if (controllerContext.RequestContext.HttpContext.Request[ButtonName] != ButtonName)
					return false;
				if (!string.IsNullOrEmpty(FormActionName))
				{
					if (actionName == FormActionName &amp;&amp; actionName.Equals(methodInfo.Name, StringComparison.InvariantCultureIgnoreCase))
						return true;

					if (methodInfo.Name == ButtonName &amp;&amp; actionName == FormActionName)
						return true;
					else
						return false;
				}
				else if (ButtonName.StartsWith(actionName))
					return methodInfo.Name == ButtonName || methodInfo.Name == actionName + ButtonName;
				else
					return methodInfo.Name == actionName + ButtonName;
			}
			else if (!string.IsNullOrEmpty(FormActionName))
			{
				if (actionName.Equals(methodInfo.Name, StringComparison.InvariantCultureIgnoreCase))
					return true;

				if (!actionName.Equals(FormActionName, StringComparison.InvariantCultureIgnoreCase))
					return false;

				return controllerContext.RequestContext.HttpContext.Request[methodInfo.Name] != null;
			}
			return false;
		}
	}
}

Asp.Net MVC View Models

Something to consider when creating a view model class that is used as both a means to bind a view and to return as JSON is that you may need more values in your view file than you want serialized as part of your JSON data.  You can accomplish property hiding in your JSON data with the ScriptIgnoreAttribute.  For instance, I have a model class that I use for an email address that has a property with business layer validation messages on it.  I use it on the server side view to render a validation block.  But in the client side view template I don’t use that mechanism for returning error messages since the server side property holding those messages is bloated when serialized to JSON. Another thing you’ll notice about the controller method above is the Load method. This is just my personal preference that the view model knows how to load itself from the core business objects that it represents. You could just as easily put that Load logic in your controller. I prefer it in a Load method so that if I ever reuse my view model elsewhere in the controller or in other controllers I only have to maintain that mapping logic in one place.

	public class UserProfileEmailViewModel
	{
		public UserProfileEmailViewModel()
		{
			Results = new ExecutionResults();
		}

		[ScriptIgnore]
		public ExecutionResults Results { get; set; }
		public long ID { get; set; }
		public Guid UserID { get; set; }
		[DisplayName("Type")]
		public string EmailType { get; set; }
		[DisplayName("Email")]
		public string Address { get; set; }
		public bool IsValidated { get; set; }
		[DisplayName("Receive notifications at this email address")]
		public bool IsPrimaryNotification { get; set; }
		public bool IsDeleteable { get; set; }
		[DisplayName("Share With")]
		public string Groups { get; set; }
		public bool IsDeleted { get; set; }
		[DisplayName("Notes")]
		public string Comments { get; set; }
		[DisplayName("Let others find me by this email address")]
		public bool SuggestContacts { get; set; }
		public string ShareDescription
		{
			get
			{
				if (UserID.Equals(SecurityContext.CurrentIdentity.ID))
					return SharingManager.GetUserVisibilityDescription(UserID, Groups);
				else
					return SharingManager.GetPublicVisibilityDescription(UserID, Groups);
			}
		}
		public bool IsViewingUser
		{
			get { return UserID.Equals(SecurityContext.CurrentUser.Identity.ID); }
		}

		public void Load(UserProfileEmail source)
		{
			if (source != null)
			{
				ID = source.ID;
				UserID = source.UserID;
				EmailType = string.IsNullOrWhiteSpace(source.EmailType) ? null : source.EmailType; //want null on view model for empty value - useful in JSON payload as null
				Address = source.Address;
				IsValidated = source.IsValidated;
				IsPrimaryNotification = source.IsPrimaryNotification;
				IsDeleteable = !source.IsValidated || !source.IsPrimaryNotification;
				Groups = IsViewingUser ? source.Groups : "";
				IsDeleted = source.IsDeleted;
				Comments = string.IsNullOrWhiteSpace(source.Comments) ? null : source.Comments; //want null on view model for empty value - useful in JSON payload as null
				SuggestContacts = source.SuggestContacts;
			}
		}
	}

Asp.Net MVC Razor Views

‘EmailList’ Razor View

On my profile page where I want a list of email addresses that are editable I just render a partial of my email list. First the view code, then I’ll explain it.

@model XQuiSoft.Xulgent.MvcWebApplication.Models.UserProfile.UserProfileEmailListViewModel
<div id="user-profile-email-list" class="user-profile-email-list inline-editable-host" @if (Model.IsViewingUser){ <text>
	data-json-url="@Url.Action(MVC.UserProfile.EmailList(Model.UserID))"
	data-json-var="UserProfileEmailListJSON"
	data-template="UserProfileEmailView" </text>}>
	@foreach (var item in Model.Items)
	{
		Html.RenderPartial(MVC.UserProfile.Views.EmailView, item);
	}
</div>
@if (Model.IsViewingUser)
{
<script id="UserProfileEmailListJSON" type="text/javascript">
	var UserProfileEmailListJSON = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model))
</script>
<script id="UserProfileEmailEdit" type="text/x-jQuery-tmpl">
	@{Html.RenderPartial(MVC.UserProfile.Views.EmailEditTemplate, Model);}
</script>	
<script id="UserProfileEmailView" type="text/x-jQuery-tmpl">
	@{Html.RenderPartial(MVC.UserProfile.Views.EmailViewTemplate, Model);}
</script>
<script id="UserProfileEmailDeleteUndo" type="text/x-jQuery-tmpl">
	@{Html.RenderPartial(MVC.UserProfile.Views.EmailDeleteUndoTemplate, Model);}
</script>
}

This particular view can only be used server side to render the initial list, as you can see with the @model declaration on the first line. There is no client side template for the list as a whole. That isn’t to say you couldn’t do that, but I choose not to for my project. In the next lines notice how a bunch of data attributes are only output if the current viewing user is the owner of the profile. These attributes support the editing, so there is no point in putting them on the page for a visitor of the profile. There is also a section below that defines the client side templates, and it is only output for the owner of the profile.

For the owner of the profile we are also outputting a javascript variable populated with the initial JSON data used to populate the list. However, in the section above you also see the initial view templates are output. The view template is rendered out on the server side initially so that something appears before any javascript runs. This is important for progressive enhancement, which then supports both users without javascript enabled and for search engines. So why output the JSON data? This is to make a second pass at these elements to make them editable via AsyncUI. But you don’t have to output the JSON as a variable. You can just load the JSON after the page loads via AJAX. The data attributes in this view support both options.

Data Attributes

• data-json-url. This option let’s you define the url where the JSON will be loaded for the list.
• data-json-var. This lets you define the name of the (global scope) variable holding the JSON for this list. This option does pollute your global scope, so the data-json-url option may be preferred for the idealistic approach. However, the variable option is faster given that another request to the server via AJAX is not needed to prep the list items for edit.
• data-template. This is the initial template name to use for the initial rendering of each JSON object in the list defined in one of the previous options. You should typically set this to the name of your view template. But if you want all your items shown as editable on page load, you can put that template name here instead.

‘EmailView’ Razor view

As you can see on the list I render out the initial view of each item on the server side. So I need a Razor view for just viewing the data. This code is standard server side MVC Razor. The only thing special about it is that there is a class on the top level element called ‘inline-editable’ that the javascript library looks for.

@model XQuiSoft.Xulgent.MvcWebApplication.Models.UserProfile.UserProfileEmailViewModel
@if (!Model.IsDeleted)
{ // deleted items are only shown via templates.  For users without javascript they will see a warning before delete instead of the undo delete.
<span class="inline-editable user-profile-email">
	@if(Model.IsViewingUser){ 
		if (Model.IsDeleteable){
	<a href="@Url.Action(MVC.UserProfile.EmailDelete(Model.UserID, Model.ID))" class="inline-editable-button ui-icon ui-icon-cancel" title="click to delete"
		data-url="@Url.Action(MVC.UserProfile.EmailDeleteConfirm())" 
		data-template="UserProfileEmailDeleteUndo"></a>
		}
	<a href="@Url.Action(MVC.UserProfile.EmailEdit(Model.UserID, Model.ID))" class="inline-editable-button" title="click to edit" 
		data-template="UserProfileEmailEdit" >
		<span class="ui-icon ui-icon-pencil"></span>
		<span class="user-profile-email-address">@Model.Address</span>
	</a>
	}
	else
	{
		<span class="user-profile-email-address">@Model.Address</span>
	}
	@if (!string.IsNullOrEmpty(Model.EmailType))
	{ 
	<span class="user-profile-item-type">(@Model.EmailType)</span>
	}
	@if(Model.IsViewingUser){ 
	<span class="user-profile-item-share-description"title="@Model.ShareDescription">Visible to: @Model.Groups</span>
	}
	@if (!string.IsNullOrEmpty(Model.Comments))
	{
	<span class="user-profile-email-comment notice">@Model.Comments</span>
	}
</span>
}

This view has two buttons on it. The delete button posts a delete to the server immediately and then toggles to the delete undo view.  The edit button just toggles to the edit view and does not send anything to the server.  Edit, Delete, View, and Undo delete are NOT built in behaviors of the script.  You are just setting up those behaviors by the attributes you put on the buttons.  The script follows the same steps for the above as it does for the edit view buttons below.

‘EmailEditTemplate’ view

If the user wants to make an edit, we switch over to the edit template on the client side. This is without making a request back to the server. So this view switches practically immediately, or at least as fast as the javascript engine can make the rendering change. No latency or other server processing delay is involved. The only ‘server side’ processed portion of rendering this view is at the time that the view is sent to the browser on the initial page request, which is just to build the form tag posting to the correct controller action, and building textarea and input tags. The data put in those inputs is done when the template is rendered.

<span class="inline-editable user-profile-email">
@using (Html.BeginForm(MVC.UserProfile.EmailEdit()))
{
	<p class="notice">
		Only enter email accounts under your control. Otherwise the owner of the email address
		could potentially compromise your account</p>
	<input type="hidden" value="${ID}" id="ID" name="ID" />
	<input type="hidden" value="${UserID}" id="UserID" name="UserID" />
	<div class="property">
		<label for="Address">Email</label>:
		@Html.TextBox("Address", "${Address}", new { style = "width:300px;" })
		<span class="input-tip">Examples: alias@live.com, alias@gmail.com, alias@sample-company.com</span>
	</div>
	<div class="property">
		<label for="EmailType">Type</label>:
		@Html.TextBox("EmailType", "${EmailType}", new { @class = "autocomplete", style = "width:300px;", data_autocomplete_url = @Url.Action(MVC.ContactMethod.GetEmailTypes()), data_autocomplete_delay = 600 })
		<span class="input-tip">The type of email address (Personal, Work, or add a new one)</span>
	</div>
	<div class="property">
		<label for="Groups">Share With</label>:
		@Html.TextBox("Groups", "${Groups}", new { @class = "group-listbuilder listbuilder", style = "width:300px;", data_autocomplete_url = @Url.Action(MVC.Sharing.FindPermissableGroups()), data_autocomplete_itemtemplate = "PermissableMemberSummary" })
		<span class="input-tip">Enter 'family', 'friends', 'coworkers', or any custom group
			name such as 'college friends' or 'neighbors'. Hit enter after each group name you
			type or click on one from the list. </span>
	</div>
	<div class="property">
		<input type="checkbox" value="true" name="SuggestContacts" id="SuggestContacts" @Html.Raw("{{if SuggestContacts}}checked{{/if}}") />
		<input type="hidden" value="false" name="SuggestContacts"/>
		<label for="SuggestContacts">Let others find me by this email address</label>
	</div>
	<div class="property">
		<input type="checkbox" value="true" name="IsPrimaryNotification" id="IsPrimaryNotification" @Html.Raw("{{if IsPrimaryNotification}}checked{{/if}}") />
		<input type="hidden" value="false" name="IsPrimaryNotification"/>
		<label for="IsPrimaryNotification">Receive notifications at this email address</label>
	</div>
	<div class="property">
		<label for="Comments">Notes</label>:
		<textarea class="resizable" cols="20" id="Comments" name="Comments" rows="2" style="width:425px;">${Comments}</textarea>
		<span class="input-tip" style="width: 400px;">An explanation of when those that you
			share the address with should use it.</span>
	</div>
	<div class="">
		<input type="submit" value="Save" id="Save" name="Save" class="inline-editable-button link-button ui-state-default ui-corner-all link-button-confirm left-float" 
			data-template="UserProfileEmailView" />
		<input type="submit" value="Cancel" id="Cancel" name="Cancel" class="inline-editable-button link-button ui-state-default ui-corner-all link-button-cancel right-float"
			data-template="UserProfileEmailView" data-url="" />
		<span class="msg clear"></span>
	</div>
}
<br />
</span>

Just like the previous view there is a class on the top level element called ‘inline-editable’ that the javascript library looks for. Additionally since this view has buttons on it, it also has an attribute on each button called “data-template” which defines which view to toggle to when the button is pressed. But if the action posted to fails, the view is switched back to the edit view with any error messages from the server or updated values from the server automatically. A few of the other inputs also have special classes and data attributes on them so that they are progressively enhanced into jQuery controls after rendering of the template. I might discuss those in another article.  I won’t now since they as are not required for making AsyncUI work.

‘EmailEdit’ View

There is another view for email edit when the server needs to render it.  If you look back at the ‘EmailView’ razor view you’ll see that the buttons have an href attribute.  These buttons are hyperlinks that are enhanced with the jQuery button widget to look like a button.  If script is disabled, when the user clicks on the button/link they will navigate to the edit view.  If script is enabled, the script changes the href to “#” and attached a click handler that does the steps mentioned above instead (AsyncUI).

When the edit view is shown as rendered by the server then we render it slightly differently and using Razor syntax instead of template syntax.

@model XQuiSoft.Xulgent.MvcWebApplication.Models.UserProfile.UserProfileEmailViewModel
<span class="inline-editable user-profile-email">
@using (Html.BeginForm(MVC.UserProfile.EmailEdit()))
{
	<p class="notice">
		Only enter email accounts under your control. Otherwise the owner of the email address
		could potentially compromise your account</p>
	@Html.HiddenFor(model => model.ID)
	@Html.HiddenFor(model => model.UserID)
	<div class="property">
		@Html.LabelFor(model => model.Address):
		@Html.TextBoxFor(model => model.Address, new { style = "width:300px;" })
		<span class="input-tip">Examples: alias@live.com, alias@gmail.com, alias@sample-company.com</span>
	</div>
	<div class="property">
		@Html.LabelFor(model => model.EmailType):
		@Html.TextBoxFor(model => model.EmailType, new { @class = "autocomplete", style = "width:300px;", data_autocomplete_url = @Url.Action(MVC.ContactMethod.GetEmailTypes()), data_autocomplete_delay = 600 })
		<span class="input-tip">The type of email address (Personal, Work, or add a new one)</span>
	</div>
	<div class="property">
		@Html.LabelFor(model => model.Groups):
		@Html.TextBoxFor(model => model.Groups, new { @class = "group-listbuilder listbuilder", style = "width:300px;", data_autocomplete_url = @Url.Action(MVC.Sharing.FindPermissableGroups()), data_autocomplete_itemtemplate = "<strong>${Name}</strong>: ${ContactCount}:${MemberCount}</br><em>${MemberSummary}</em>" })
		<span class="input-tip">Enter 'family', 'friends', 'coworkers', or any custom group
			name such as 'college friends' or 'neighbors'. Hit enter after each group name you
			type or click on one from the list. </span>
	</div>
	<div class="property">
		@Html.CheckBoxFor(model => model.SuggestContacts)
		@Html.LabelFor(model => model.SuggestContacts)
	</div>
	<div class="property">
		@Html.CheckBoxFor(model => model.IsPrimaryNotification)
		@Html.LabelFor(model => model.IsPrimaryNotification)
	</div>
	<div class="property">
		@Html.LabelFor(model => model.Comments):
		@Html.TextAreaFor(model => model.Comments, new { @class = "resizable", style = "width:425px;" })
		<span class="input-tip" style="width: 400px;">An explanation of when those that you
			share the address with should use it.</span>
	</div>
	<div class="">
		<input type="submit" value="Save" id="Save" name="Save" class="link-button ui-state-default ui-corner-all link-button-confirm left-float" />
		<input type="submit" value="Cancel" id="Cancel" name="Cancel" class="link-button ui-state-default ui-corner-all link-button-cancel right-float" />
		@Html.DisplayFor(model => model.Results)
		<span class="msg clear"></span>
	</div>
}
</span>

Notice this edit view does not have the data attributes. If this view is shown we already know script is disabled on the client so the data attributes are not needed. The buttons on this edit view post directly to the MVC controller  EmailEditSave action method synchronously.  So we fallback to the ‘click and wait’ model when script is disabled.  Look back at the UserProfileEmailResult and this is where the RedirectToAction occurs on a succesful edit, and on a failed edit the EmailEdit view is returned again with the values that were just posted.

‘EmailViewTemplate’ view

After a user completes editing an item and they cancel or save, we need to toggle back over to the edit view.  This toggle should be immediate using a template and with the data on the form (in the save case).  We can’t use the ‘EmailView’ view because that is a server side rendering.  This template initially is rendered on the server as part of the ‘EmailList’ view.  This is why all the @Html.Raw Razor syntax blocks are in the file.  But that is just to get the template to the client.  Once on the client those do not exist are are not part of the rendering of the template client side.  Html.Raw is needed because otherwise the file would not be valid Razor syntax.

@Html.Raw("{{if IsDeleted}}") 
@Html.Raw("{{tmpl '#UserProfileEmailDeleteUndo'}}")
@Html.Raw("{{else}}")
<span class="inline-editable user-profile-email">
	@Html.Raw("{{if IsViewingUser}}")
	@Html.Raw("{{if IsDeleteable}}") 
	<a href="#" class="inline-editable-button ui-icon ui-icon-cancel" title="click to delete"
		data-url="@Url.Action(MVC.UserProfile.EmailDeleteConfirm())" 
		data-template="UserProfileEmailDeleteUndo"></a>
	@Html.Raw("{{/if}}")
	<a href="#" class="inline-editable-button" title="click to edit" 
		data-template="UserProfileEmailEdit" >
		<span class="ui-icon ui-icon-pencil"></span>
		<span class="user-profile-email-address">${Address}</span>
	</a>
	@Html.Raw("{{else}}")
		<span class="user-profile-email-address">${Address}</span>
	@Html.Raw("{{/if}}")
	@Html.Raw("{{if EmailType}}")
	<span class="user-profile-item-type">(${EmailType})</span>
	@Html.Raw("{{/if}}")
	@Html.Raw("{{if IsViewingUser}}")
	<span class="user-profile-item-share-description" title="${ShareDescription}">Visible to: ${Groups}</span>
	@Html.Raw("{{/if}}")
	@Html.Raw("{{if Comments}}")
	<span class="user-profile-email-comment notice">${Comments}</span>
	@Html.Raw("{{else}}")
	<br />
	@Html.Raw("{{/if}}")
</span>
@Html.Raw("{{/if}}")

This template also handles the case when the item is deleted by rendering that as sub-template as needed.  Structurally this is the same as the ‘EmailEditTemplate’ view.  This looks the same as the ‘EmailView’ view, except that this is in template syntax (inside the Razor syntax), instead of binding to a .net view model class.  Another difference from ‘EmailView’ view is that we don’t set the href attribute on the anchor tag buttons.  We know if the template is able to render then script is enabled and the subsequent enhancement to change the anchor tag to a button will also work.

As shown in the following screenshot, MVC renders the view code above as valid template syntax.

‘EmailDeleteUndoTemplate’ View

The undo delete template only applies to AsyncUI, at least in my example.  If you delete an email without script enabled you get prompted if you are sure, and then you can’t undo delete.  But if you then load the page with script enabled you’ll see the items that can be restored with the undo template (deleted section of view template).  This template is relatively short and simple.  It has one button to restore the item, and that button works the same as the buttons on the other client side template views.  Just like the others it also defines the post url via the ‘data-url’ attribute and the template to switch to on click with the ‘data-template’ attribute.

<span class="inline-editable user-profile-email delete-undo">
	@Html.Raw("{{if IsViewingUser}}") 
	<a href="#" class="inline-editable-button" title="click to undo the delete"
		 data-url="@Url.Action(MVC.UserProfile.EmailDeleteUndo())" 
		 data-template="UserProfileEmailView">
		<span class="ui-icon ui-icon-alert"></span>
		<span>Email address 
			<span class="user-profile-email-address">${Address}</span>
			is deleted.  Click to recover.
		</span>
	</a>
	<br />
	@Html.Raw("{{/if}}")
</span>

‘EmailDelete’ View

The delete view is only used when script is disabled.  It prompts the user if they are sure that they want to delete the item.  If so it posts to the EmailDeleteConfirm action.  This is the same action method as the client side view template delete button.  Look back at the EmailDeleteConfirm controller action method to see how it handles both at the same time.

@model XQuiSoft.Xulgent.MvcWebApplication.Models.UserProfile.UserProfileEmailViewModel
<span class="inline-editable user-profile-email">
@using (Html.BeginForm(MVC.UserProfile.EmailDeleteConfirm()))
{
	<p class="notice">
		Are you sure you want to delete this email address from your profile?</p>
	@Html.HiddenFor(model => model.ID)
	@Html.HiddenFor(model => model.UserID)
	<span class="user-profile-email-address">@Model.Address</span>
	@if (!string.IsNullOrEmpty(Model.EmailType)) { 
	<span class="user-profile-item-type">(@Model.EmailType)</span>
	}
	<div class="">
		<input type="submit" value="Confirm" id="Confirm" name="Confirm" class="link-button ui-state-default ui-corner-all link-button-confirm left-float" />
		<input type="submit" value="Cancel" id="Cancel" name="Cancel" class="link-button ui-state-default ui-corner-all link-button-cancel right-float" />
		@Html.DisplayFor(model => model.Results)
		<span class="msg clear"></span>
	</div>
}
</span>

Custom Command Views

You can define other views to be handled by this AsycnUI script by just defining the necessary controller action methods and then setting the “data-url” and “data-template” attributes on the view buttons. It should be able to handle any custom scenario that you can think of.

The Script

When one of the ‘inline-editable-button’ classed HTML elements is pressed it basically does the following operations in order.

1. Gets the JSON object that represents this item (which was loaded at page load from data-json-var or data-json-url and stored)
2. Updates the JSON object from the form values (by element name), if applicable.  It supports drilling down to sub-properties and into arrays.
3. Looks for a template name in the ‘data-template’ attribute and replaces the current ‘inline-editable’ element with an instance of that template bound to the updated JSON object.  This is why you see the change back to the other view immediately.
4. If “data-url” is not explicitely set to an empty string (as in cancel button) it posts to the url defined by the form and includes the button name as a form variable as well (for the FormPostActionSelector to pick up).  You can override the post url per button with a “data-url” attribute on the button (not shown above).  The button can also define a “url-method” attribute if it wants to use something other than the ‘post’ verb (not shown above).  ”url-method” is more commonly used for buttons in the non-form (read-only) views.
   • On post success if the item was passed back it replaces the template again with the new model.  This is in place for the times when some properties are calculated on the server from other inputs.  The server side also has the option of returning the name of the template to instantiate if the one defined on the button needs to be overridden due to some special case.
   • On a post business rule failure the view can toggle back to the edit view and show the error message in your placeholder for errors.  Note the span with class ‘msg’ in the template above.

I plan on sharing this script via GitHub soon.  For now you can find it on jsFiddle.  If you have any ideas for a name on Github, please let me know.  Update July 26,2012: This script is now available on Github, the repo is named jquery-auto-async. I moved parts of the jsFiddle that were a modification of form2js on github into my own fork.  You will need my fork of form2js as a dependency.

You will also need jQuery, jQueryUI, jQuery Validate, and jQuery Templates.  If you want to use the ‘listbuilder’ widget for one of your inputs you can find that on my fork of jQueryUI and find discussion on inclusion of it within jqueryUI on the jQueryUI development wiki.

The templates in this article currently use the now deprecated jQuery Templates library.  You could just as easily use any other templating solution with a couple line modification to the jquery-auto-async script.  I am still using this template solution for now since the jQuery team is working on a replacement.  It really has little bearing on the functionality of this sample code, so I didn’t take the time to update it to another template library yet.

Styles

In my project I am using the themeroller style of my choice, plus the following structural styles.

.inline-editable .ui-icon { display:inline-block;}
.inline-editable a {text-decoration:none;}
a.inline-editable-button span {font-weight:bold;color:Black;}
span.delete-undo {background-color:#DDDDDD; border:1px solid #BBBBBB; display:inline-block;width:100%;}

Source: (Tumblr)