The very first project I did using MVC 3 went live and we made the news! :)

posted @ 6:40 PM | Feedback (0)

Developing a search form should be one of the simplest Web development tasks in the world. I can do it in a few minutes with ASP.NET WebForms, but for some reason with MVC it kicked my ass! Then I remembered back to the good old 90s when contract rates were high, the economy was great, and I was 20lbs lighter.

...oh and classic ASP forced you to create forms where you could either do a POST or a GET. Remember GET? Yeah it's beeen a while if you've been an ASP.NET developer. But welcome back! That is...if you are using MVC.

It is actually pretty simple. If, unlike me, you by chance bump into the blog post instead of trying to find the (IMO) really BAD answers on stackoverflow.com (at least to-date) and various corners of the Interwebz googling things with Bing or binging things with Google....but I digress.

Here's the answer:

1. Make your form do an HTTP GET.
2. Use Nuget to download PagedList
3. Use Model Binding in your controller action method.
4. Use RouteValueDictionary in the PagedList Pager HTML helper.
5. ???
6. Profit!

Here's the code for the ViewModel class, controller, and View (in that order):

using System.Linq;

The magic is that MVC coerces the querystring back into the model and vice versa.

Hope this helps anyone trying to figure this out.

posted @ 9:43 PM | Feedback (3)

Once you get past all of the cool MVC simple-mode demos which always have things like typing dates into textboxes, no Ajax, etc...you start to dig into what I personally find to be the most work with MVC: enriching the UI. WebForms can kind of spoil us with things like update panels, Ajax control toolkit, or 3rd party solutions such as Telerik Ajax Controls. I've burned many hours with UI enhancements using jQuery. Yes, this is a confession not a complaint. For example, autocomplete is a fairly simple concept; however, this also involves changing up style sheets, or adding additional behavior to examples you might find on Google such as what I've illustrated below: filtering the autocomplete list by employee title.

 I'm used to cranking out WebForms apps very quickly, whereas MVC has been a bit more tedious. So I thought I'd post some things I worked on yesterday that will hopefully save other people some time. jQuery Autocomplete and Dropdownlist replacements are very nice plugins. Here's some code that leverages both of them.

The View

@model AdventureWorks.Common.SearchEmployeeViewModel
<h2>Search Employees</h2>
<link href="@Url.Content("~/Content/jquery.autocomplete.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jquery.dropdownReplacement-0.5.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.scrollTo-1.4.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.bgiframe.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.dropdownReplacement-0.5.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.autocomplete.min.js")" type="text/javascript"></script>

<!-- this should go in its own js file... -->
<script type="text/javascript">
    $(document).ready(function () {
        $("#Title").dropdownReplacement({ selectCssWidth: 600 });
        $("input#LastName").autocomplete('@Url.Action("Find")', { cacheLength: 0, delay: 500, extraParams: { title: function () { return $("#Title").val(); } } });
    });
</script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>SearchEmployeeViewModel</legend>
            <div class="editor-label">@Html.LabelFor(model => model.LastName)</div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.LastName, htmlAttributes: new { style = "width: 300px " })
                @Html.ValidationMessageFor(model => model.LastName)
            </div>
            <div class="editor-label">@Html.LabelFor(model => model.Title)</div>
            <div class="editor-field">
                @Html.DropDownListFor(model => model.Title, new SelectList(Model.TitleList))
                @Html.ValidationMessageFor(model => model.Title)
            </div>
            <p><input type="submit" value="Search" /></p>
    </fieldset>
}

The Controller

using System.Web.Mvc;
using AdventureWorks.BusinessInterface;
using AdventureWorks.Common;

namespace MvcDemo.Controllers {
    public class EmployeeController : Controller {
        EmployeeBusinessInterface _employeeBusinessInterface = new EmployeeBusinessInterface();

        public ActionResult Search() {
            var model = new SearchEmployeeViewModel();
            model.TitleList = _employeeBusinessInterface.GetTitleList();
            return View(model);
        }

        public ActionResult Find(string q, int limit, string title) {
            string[] lastNames = _employeeBusinessInterface.FindLastNames(q, title, limit);
            return Content(string.Join("\n", lastNames));
        }
    }
}

The Model

using System.Collections.Generic;
using System.Linq;

namespace AdventureWorks.BusinessInterface {
    public class EmployeeBusinessInterface {
        DataAccess.AdventureWorksEntities _adventureWorksEntities = new DataAccess.AdventureWorksEntities();
        public string[] FindLastNames(string q, string title, int limit) {
            return _adventureWorksEntities.Employees.Where(e => e.Title == title && e.Contact.LastName.StartsWith(q))
                                                    .Select(e => e.Contact.LastName)
                                                    .Distinct()
                                                    .Take(limit)
                                                    .ToArray();
        }

        public List<string> GetTitleList() {
            return _adventureWorksEntities.Employees.Select(e => e.Title).Distinct().OrderBy(name => name).ToList();
        }
    }
}

The ViewModel

using System.Collections.Generic;

namespace AdventureWorks.Common {
    public class SearchEmployeeViewModel {
        public string LastName { get; set; }
        public string FirstName { get; set; }
        public string Title { get; set; }
        public List<string> TitleList { get; set; }
    }
}

So now we have a really nice dropdown where you can set the height and scroll unlike a regular HTML Select control.

And our Autocomplete assists the user with the search.

As an aside, I'm starting to change my mind about needing a Common, BI, DAL, but I definitely think the ViewModel and MVVM pattern is the way to go using only strongly-typed Views. I'm also playing around with putting some of the current logic for Common, BI into the ViewModel class with the goal of keeping the Controller code as clean as possible. This means the ViewModel class will be encapsulating the logic necessary to call into the Entity Framework (in this case) classes to fill itself with data, handle validation with annotations, etc eliminating the need to have a bunch of library projects. In this example the Controller calls to the BI to fill the ViewModel class with data, the jQuery Autocomplete Controller method basically does the same thing to get a list of names. Seems to work pretty well so far.

posted @ 10:02 AM | Feedback (6)

Since MVC 3 is driving me more into client scripting, I started playing around with calling WCF services from JavaScript, but what I didn't know is that you can actually create a proxy by going to the .svc URL followed by “/js”. For example, if I create the following service:

namespace MvcApplication1 {
    [ServiceContract(Namespace="")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class SimpleMath {
        [OperationContract]
        public int Add(int x, int y) {
            return x + y;
        }
    }
}

...and a quick servicemodel entry to my .config

<system.serviceModel>
    <behaviors>
        <endpointBehaviors>
            <behavior name="MvcApplication1.SimpleMathAspNetAjaxBehavior">
                <enableWebScript/>
            </behavior>
        </endpointBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
    <services>
        <service name="MvcApplication1.SimpleMath">
            <endpoint address="" behaviorConfiguration="MvcApplication1.SimpleMathAspNetAjaxBehavior" binding="webHttpBinding" contract="MvcApplication1.SimpleMath"/>
        </service>
    </services>
</system.serviceModel>

Now my JavaScript can call into the service. To verify, you can open a browser and look at the proxy:

//SimpleMathStuff.js
function Add(x, y) {
    var svc = new SimpleMath();
    svc.Add(x, y, function (result) {
        alert(result);
    });
}

In my .cshtml file I call the Add() function defined above. As you can see, the second script reference is pointing at the service /js

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="SimpleMath.svc/js" type="text/javascript"></script>
<script src="../../Scripts/SimpleMathStuff.js" type="text/javascript"></script>

<input type="button" onclick="Add(2,2)" value="Add 2 + 2" />

Voilà! You now have a completely useless math function...but being the smart developer that you are, I'm sure you can find more interesting and realistic solutions using the same tools. And seriously, Add is so much cooler than “hello world” isn't it?  :)

Happy coding!

posted @ 5:25 PM | Feedback (4)

MVC 3 was released just recently and I'm starting to get some strong feelings about what looks ugly and what looks clean for an MVC app. First of all, the Razor view engine is very slick and looks much cleaners than MVC 2. However, you can pretty easily make an MVC app look ugly - which IMO is 90% of the gripe the anti-WebForms people complain about. I still really love WebForms for LOB applications, and they certainly promote RAD. The complaint is that code-behind files can end up with a lot of code. So, to avoid the same issues with MVC:

• Use ViewModel classes and avoid ViewData like the plague
  MVC is supposed to support separation of concerns? So why let your EF objects bleed through to the view?
• Keep your business logic in your model.
  If code-behinds are ugly in WebForms, business logic in your controllers are going to make your code look even worse in MVC.
• In order to avoid that icky feeling I get with EF used directly in my MVC Web app, create a real model.
  So far what seems cleanest is to create your EDMX (if you are not using code-first) in a DataAccess library. Create a BusinessInterface layer which the UI references along with a common library to hold your DTOs, or in this case ViewModel classes.

To clarify I'll show some example code using the AdventureWorks database for the EDMX, and display a list of employees in a WebGrid with Ajax paging and sorting. The EDMX will be the only thing in the DataAccess layer so I will not show that code. Let's start with the DTOs:

namespace AdventureWorks.Common {
    public class GridExampleEmployee {
        public int EmployeeID { get; set; }
        public int ContactID { get; set; }
        public string FullName { get; set; }
        public string LastName { get; set; }
        public string FirstName { get; set; }
        public string MiddleName { get; set; }
        public string Title { get; set; }
    }
}

My BusinessInterface method will simply LINQ query the EDMX object model in the DataAccess DLL and return results within a DTO defined above.

using System.Linq;
using AdventureWorks.Common;
using AdventureWorks.DataAccess;

namespace AdventureWorks.BusinessInterface {
    public class GridExampleSystem {
        public GridExampleViewModel GetGridExampleViewModel(int page, int records, string sort) {
            var fnResult = new GridExampleViewModel();
            var edmx = new AdventureWorksEntities();
            var queryResults = from c in edmx.Contacts
                                join emp in edmx.Employees
                                on c.ContactID equals emp.ContactID
                                select new GridExampleEmployee {
                                    EmployeeID = emp.EmployeeID,
                                    ContactID = c.ContactID,
                                    FullName = c.LastName + ", " + c.FirstName + " " + c.MiddleName,
                                    LastName = c.LastName,
                                    FirstName = c.FirstName,
                                    MiddleName = c.MiddleName,
                                    Title = emp.Title
                                };

             fnResult.TotalRecords = queryResults.Count();
             switch (sort) {
                case "Title":
                    queryResults = queryResults.OrderBy(r => r.Title);
                    break;
                default:
                    queryResults = queryResults.OrderBy(r => r.LastName);
                    break;
            }

            fnResult.Employees = queryResults.Skip(page * records).Take(records).ToList();
            return fnResult;
        }
    }
}

Now my controller class doesn't get messed up with any logic that should really be in my model (calculations, extra data fields such as “FullName” in this case, data access logic, etc).

using System.Web.Mvc;
using AdventureWorks.BusinessInterface;
using AdventureWorks.Common;

namespace MvcDemo.Controllers {
    public class GridExampleController : Controller {
        public const int PageSize = 10;
        
        public ActionResult Index(int? page, string sort) {
            var sys = new GridExampleSystem();
            var startPage = 0;
            if (page.HasValue && page.Value > 0) {
                startPage = page.Value - 1;
            }
            GridExampleViewModel list = sys.GetGridExampleViewModel(startPage, PageSize, sort);
            return View(list);
        }
    }
}