Login via Usercontrol View + jQuery

Since administration was the next part I wanted to work on.

I decided that for the moment I just want a little login for in the upper corner

I decided to put the login screen view logic into a user control, and added the following user control named Login.ascx and placed it into the Shared

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%if(!Page.User.Identity.IsAuthenticated) {%>
    <form action="/Home/Login" method="post" id="LoginForm">
        <span id="EmailLabel">Username:</span><br />
        <%=Html.TextBox("Username")%><br />
        <span id="PasswordLabel">Password:</span><br />
        <%=Html.Password("Password")%><br />
         <span id="Error">
            <%=ViewData.ContainsDataItem("Message") ? ViewData["Message"] + 
               "<BR />" : ""%>
        </span>
        <%=Html.SubmitButton("Submit", "Login")%>
    </form>
<%}else {%>
        <span>Not <%=Page.User.Identity.Name %><br />    
        <%=Html.ActionLink<DevExamples.Controllers.HomeController>(c => c.Logout()
            , "Logout", new { id = "LogoutLink" })%></span>

<%} %>

 

And added the user control to the masterpage using

<div id="Login"><%=Html.RenderUserControl("~/Views/Shared/Login.ascx") %><div>

 

I was going to use

using (Html.Form<DevExamples.Controllers.HomeController>(c=>c.Login()
   ,System.Web.Mvc.FormExtensions.FormMethod.post,new {id="LoginForm"}))

 

to create the form (because it is a lot cooler), but couldn’t get the html attributes to work and was more interested in getting the dynamic stuff working then looking at the code for the extension method in the MVCToolKit, in other words being lazy.

 

I thought about putting the authentication checking logic into the controller. But handling it this way made it a bit simpler, and more self contained, so until I find a compelling enough reason I will be leaving it this way.

After I had the user control showing up, I decided to hook up the actual authentication. I decided to go with forms authentication, and set it up using the button in the solution explorer.

Next it was time to create the login and logout controller actions, which I decided would best fit in the HomeController, At first I had thought to create two separate views, one for when logged in and one for logged out, then remembered Phil Haack, at least I think it was him, something about being able to use user controls in the RenderView method of the controller.

I ended up with the following two controller actions:

[ControllerAction]
public void Login()
{
    if (!ControllerContext.HttpContext.User.Identity.IsAuthenticated)
    {
        if (Request.RequestType == "POST")
        {
            string userName = Request.Form["Username"];
            string password = Request.Form["Password"];

            if (Membership.ValidateUser(userName, password))
            {
                FormsAuthentication.SetAuthCookie(userName, true);
                //Set cookie and redirect
                RedirectToAction("Login");
            }
            else
            {
                ViewData.Add("Message", "Invalid Username/Password");
            }
        }
    }
    RenderView("Login");
}
[ControllerAction]
public void Logout()
{
    FormsAuthentication.SignOut();
    RedirectToAction("Login");
}

 

Since it was allowing me to just render out the user control, I decided there was no point to refreshing the whole page, so decided to use a AJAXish way of doing it. So I decided it was time to pick a javascript library. And since Phil had provided a link to  Using script.aculo.us with ASP.NET MVC by Chad Myers,I decided to go with jQuery for this (that and it seemed to fit better).

After a bit of reading through their tutorials I added this to the header section of the master page.

<script src="../../Content/jquery.js" type="text/javascript"></script>
<script src="../../Content/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
    var readyFuncs = function() { 
        $('#LoginForm').ajaxForm(function(result) { 
            $('#Login').html(result); 
            $(document).ready(readyFuncs); 
        }); 
        $('#LogoutLink').click(function(){
            $.get('/Home/Logout',function(result){
                $('#Login').html(result);
                $(document).ready(readyFuncs); 
            });
            return false;
        });
    };
    $(document).ready(readyFuncs);
</script>

The only real snag I had run into with this was that each time the Login div was refreshed I had to reregister the events.

.Net based SVN client library

As an exercise to figure out socket programming I have been messing around with creating an SVN client library to use with DevExamples.com, well actually a generic SC client library that would allow me to change what repository site I was working against, SVN just seemed like the simplest of them at the moment.

However, after thinking about it, I think it would be better to use one that is already built if possible. I just have not been able to find a pure .Net client library. It is also seems rare for a source control library to work without a working folder, which is somewhat limiting when I want to check the propagation of examples using this method on the same machine.

Though I think it would be interesting to write a LINQ to Source provider, as a way to learn expression trees better. Plus it would be nice to be able to not only easily switch hosting providers (the reason I am looking for a pure .Net library) but also to have a standard syntax to allow me to easily switch from SVN to SourceGear’s Vault (which I use for my personal development projects) to TFS (which we use at work) as the storage system for the examples.

Though SvnBridge could possibly help with that too.

Technorati Tags: ,,,

Got my nice Urls working

Its amazing how fast things can be done when not fighting bad assumptions. In this case it was that my admin URLs needed to use the nice descriptive URLs, instead of just /[Controller]/[Action]/[id] type routing.

Once I realized I was making things overly complicated I, I ended up with a set of routing functions that are actually a bit less complicated then what I would have come up with if I had been able to extend the RouteTable the way I had planned originally.

I also decided that I didn’t like the idea of having the make every category and example name unique. Most of this was that I’m not the creative, but I also realized that it would be really ugly I wanted to have namespaces as categories. For example, it would not have been possible to have both C/System/Windows/Forms/Control and C/System/Web/UI/Control since Control would have had to be unique.

I also decided that I was going to set a limit to the depth of categories that the site was going to have, though it is easy to update this. First I made a function that would generate routes similar to those previously posted.

protected void CreateRouteSet(string baseRoute, string baseName
    , int maxDepth, object Defaults)
{
    StringBuilder sb = new StringBuilder();
    for (int i = 0; i < maxDepth; i++)
    {
        if (sb.Length > 0)
            sb.Append("/");

        sb.AppendFormat("[{0}{1}]", baseName, i);

        RouteTable.Routes.Add(new Route{
         
            Url = String.Format(baseRoute,sb.ToString()),
            Defaults = Defaults,
            RouteHandler = typeof(MvcRouteHandler)
        });
    }
}

protected void Application_Start(object sender, EventArgs e)
{

    CreateRouteSet("C/{0}", "Category", 6,
        new { Action = "Index", Controller = "Categories" }
        );

    //Other routes using the standard [Controller]/[Action]/[Id]

}

This will setup routes to handle category hierarchies up to 6 deep.  And add Category1,Category2… into the RouteData.Values collection in the controller.

Next I set up the code to allow me to handle the route, which I did in the model, adding a method that takes an IDictionary<string,object>.

public Category GetCategoryFromRouteData(IDictionary<String,object> data)
{
    //Grab just the category data
var navList = from route in data where route.Key.IndexOf("Category") == 0 orderby route.Key select new{Key = route.Key, Value = route.Value.ToString()}; string sqlSelect = @" SELECT {0}.* FROM Category {0} {1} WHERE {0}.Name = {{0}}";
//{{{2}}} will be replaced with {{<param index>}}
string join = @"INNER JOIN Category {0} ON {0}.[Key] = {1}.ParentKey AND {0}.[Name] = {{{2}}} //This is the name of the category I am actually interested in
var mainCat = navList.Last(); //Build a list of category values to for parameterized query
List<string> values = new List<string>(); values.Add(mainCat.Value); StringBuilder sb = new StringBuilder(); string lastCategory = mainCat.Key; int i = 1; foreach (var item in navList.Reverse().Skip(1)) { sb.AppendFormat(join, item.Key, lastCategory,i++); values.Add(item.Value); lastCategory = item.Key; } string sql = String.Format(sqlSelect,mainCat.Key, sb.ToString()); Category cat = this.ExecuteQuery<Category>(sql, values.ToArray()).Single();


//GetDisplayCategory skips over categories that have only 1 subcategory
//and no examples, allowing me to have the planned Url structure without
//
requiring the user to navigate through several empty categories.
return GetDisplayCategory(cat); }

I had planned on having doing it all LINQ to SQL expressions, but it was taking more time then it was worth to figure out how to do the hierarchy lookup from the category names.  I need to add some caching of the key lookups at some point, since the joins look like they might get a bit nasty for deep categories, but that can wait.

I added a few overloads to the HtmlHelper ActionLink extension methods to handle making the nice Url links.

Now I need to figure out how to deploy the usercontrols that will contain the executable part of the example. I have had some problems with compilation sometimes when I had the website directly upload the usercontrols. Plus I would like them to go into source control when I add them.

Technorati Tags:

Initial thoughts on Microsoft MVC

My first thought is, I really wish I could use this at work, but it is working nicely so far for my rewrite of my web site. Writing Classic ASP style again is taking a little getting used to again though, the visual preview from the designers made styling the page a lot nicer.

The lack of control designers also seem like it would hinder having a graphics guy using Expression Web do the UI with MVC based web applications. But I have never worked with a graphics guy on a project that way anyway so I am could be wrong.

 

It would also be nice if the method used by the Route class to parse the Url was virtual, so I could subclass it and allow me to parse something like:

/Example/Simple/Form/MultiPageForm/ShowSource/

to go to the Examples controller, going into the following controller action

[ControllerAction]
public void ShowSource(string[] Categories, string ID)

which would allow me to have a consistent directory scheme for both the ASP.Net examples, along with the Classic ASP examples that are already available.

I could probably do something like /Example/Simple_Form/MultiPageForm/ and use [Controller]/[Category]/[ID]/[Action] but I would prefer it to get to the controller action pre-parsed.

Technorati Tags:

Generic begin/end Html tag extension method

After working on the login usercontrol, I decided that I wanted to add similar functionality to the navigation sections of the site for accounts/roles that didn’t get ads displayed. So I needed a standard way to put dynamic sections into a page.

I liked the syntax used by the form HtmlHelper methods, so decided to base it off of the SimpleForm class and ended up with this

//Based on the SimpleForm class in MvcToolkit 
//Wish I believed I would have ever thought to use
//IDisposable to do this
public class SimpleWrappingTag : IDisposable
{ protected string _beginTagFormat = "<{0} {1}>"; protected string _attributeFormat = "{0}="{1}" "; bool _startTagRendered = false; bool _endTagRendered = false; protected IHttpContext _context; protected object _htmlAttributes = null; //Not letting this be modified outside the class for now //might change later public string TagName { get; protected set; } //Subclassed controls can put their class specific info here public SimpleWrappingTag(string tagName) { this.TagName = tagName; } public SimpleWrappingTag(string tagName, IHttpContext context , object htmlAttributes) { this.TagName = tagName; this._context = context; this._htmlAttributes = htmlAttributes; } /// <summary> /// Creates a StringBuilder and passes it to an overloaded method. /// Override this method for attributes that should be first in tag. /// </summary> /// <returns></returns> protected virtual StringBuilder BuildAttributeList() { return BuildAttributeList(new StringBuilder()); } protected virtual StringBuilder BuildAttributeList(StringBuilder sb) { sb.Append(_htmlAttributes.ToAttributeList()); return sb; } //Method orginally from SimpleForm, but changed to work with //BuildAttributeList instead of BuildFormOpenTag public void WriteStartTag() { if (!this._startTagRendered) { string formTag = String.Format("<{0} {1}>", TagName , BuildAttributeList()); this._context.Response.Write(formTag); } } public void WriteEndTag() { if (!this._endTagRendered) this._context.Response.Write(String.Format("</{0}>", TagName)); } public void Dispose() { WriteEndTag(); } }

Next I made some trivial, but needed extension methods for the HtmlHelper class.

public static class DevExamplesExtensions
{
    public static IDisposable HtmlTag(this HtmlHelper helper, string tagName)
    {
        return helper.HtmlTag(tagName, null);
    }
    public static IDisposable HtmlTag(this HtmlHelper helper
        , string tagName, object htmlAttributes)
    {
        SimpleWrappingTag tag =  new SimpleWrappingTag(tagName
            , helper.ViewContext.HttpContext, htmlAttributes);
        tag.WriteStartTag();
        return tag;
    }
}

And while I’m satisfied with how this turned out, though I’m hoping to be able to delete the code at some point, I don’t like how the code I wrote to implement an Ajax.UpdatePanel method turned out. So I’m not going to post it at the moment.

But it was going to look something like

public static UpdatePanel(this AjaxHelper helper, string panelId, ….)
{
   helper.ViewContext.HttpContext.Write(“update panel js….”);
   IDisposable tag = new HtmlHelper(helper.ViewContext.HttpContext)
        .HtmlTag(“div”,new { id=panelId});

}

Below is a list of things I couldn’t think of a good solution for at the moment

  1. I didn’t like the fact that I was putting the actual JavaScript into the UpdatePanel extension method. Rob Conery said something on the forums about using services to provide the view with site-wide info that seemed interesting, but not sure of a good way to implement this would be.

    It would be nice to have service providers kind of like you can use in Windows Workflow Foundation or VS control designers, that would let me add a IScriptService to do the actual JavaScript coding based on the script library I wanted to use.

    Maybe I should just create a script provider for this.

  2. Having to pass in a list of “triggering” controls felt kind of clunky. I’m trying to think of the best way to allow me to specify that a Html.ActionLink should register itself with the “UpdatePanel”.

    Most of what I think of for this, basically requires me to implement my own versions of the stuff already implemented in the MvcToolkit.

  3. I couldn’t come up with a clean way to have the panel in the Usercontrol, but only have it be done if the usercontrol is called from a page instead of as a standalone view. I guess I could have the controller tell it this, but ideally they would just kind of know.

I think I may have already thought of the solution #3, and a workable #2. But I am really hesitant to do anything with #1 (outside the provider maybe) since I doubt I would do it close enough that I wouldn’t need to remove it all to move over to their way, should they implement something like service providers.

I think I’m going to put this aside for a while on another part of the site, this just is a “nice to have” feature, and get some of the other pieces that I actually need to have for the site done.

 

 

 

* 4 actually, but I said how I wished I could implement an interface using an anonymous type.

Routing revisited

It turned out to be a lot easier to work around not being able to override the route parsing method then I had thought it would be last night. Though when they allow me to override that method I will be changing over.

By setting up the following routes I was able to get almost the effect that I was looking for:

RouteTable.Routes.Add(new Route
{
    Url = "Example/[id]/[action]",
    Defaults = new { Controller = "Example" },
    RouteHandler = typeof(MvcRouteHandler)
});

RouteTable.Routes.Add(new Route
{
    Url = "Example/[Category1]/[id]/[action]",
    Defaults = new { Controller = "Example" },
    RouteHandler = typeof(MvcRouteHandler)
});

RouteTable.Routes.Add(new Route
{
    Url = "Example/[Category1]/[Category2]/[id]/[action]",
    Defaults = new { Controller = "Example" },
    RouteHandler = typeof(MvcRouteHandler)
});

Though the execute action just takes the id in

[ControllerAction]
public void Execute(string id)

 

If I find that I actually need access to the Categories found in the path, I can access them using RouteData.Values. It also helps that I had decided that the examples should have a unique ID, that will be a lot like the friendly Urls used in Subtext. That way the directories are there more for aesthetics then utility. Though when the ability to override the route parsing, I will probably be changing it to this if possible later:

[ControllerAction]
public void Execute(string id, string[] categories)

So now that I have the site navigation working the way that I want it, with the exception of a helper method for writing out the longer category listings, its time to work on the maintenance parts of the site.

And so far it seems that this will be a better fit then WebForms was for the last few reworks of the site, since I can make the UserControls containing the examples completely isolated, including having the runat server form in the control. The only one I liked better was the JSON based one, using ASP.Net AJAX Extensions, which would have gone live if AdSense worked with AJAX/JSON sites.

Overall the more I use it the more I like the feel of the framework. Especially now that I realized which of these  I wanted to selected when using a master page.

And so far the best part of the framework is that I don’t have to ignore features to not see this dialog after refreshing the page I just navigated to.

Technorati Tags:

A few simple MVC control suggestions

I finally got around to updating the website to the MVC preview 2, and ran into a couple of things.

  1. TagBuilder being internal. While the implementation of it CreateInputTag, CreateTag and CreateAttributeList. The removal of .ToAttributeList() was actually what made me go looking for this. The HtmlExtensionUtility extension methods would have been nice to have also.

    I guess a better way to say it is it would be nice not to have to reimplement the functionality that CreateAttributeList and ConvertObjectToAttributeList already implement.

  2. It would be nice if SimpleForm inherited from a class, that could be subclassed to make Div and Span tags that have attributes based on routing information.

    Admittedly it is a rather simple to implement what I am talking about but I think it would be nice to have already there.

 

I’m still rummaging through the routing stuff, so don’t have to much input on those it at the moment. But it looks like I will be able to take all the category discovery information out of my controllers, and just have it passed into the action, which will be nice.

On a side note, after looking at the classes that were made into base classes. I cant really say that I would ever have a need for them to be interfaces. As I can’t think of any other class I would want to tack their functionality onto, after all interfaces were the answer to not having multiple inheritance (I still wish I had it multi-inheritance though).

I do however hope that IRouteHandler stays an interface though, because I can see myself taking that behavior onto an object. Just not sure where.

Technorati Tags: