I needed something similar to the old ASP.NET Script manager and the way that old ASP.NET used the “clientId” instead of the “htmlId” when dealing with html objects. The “clientId” was a generated unique key that prevented duplicated user controls conflicting with one another.

I found quite a few implementations of ScriptManager (http://pietschsoft.com/post/2009/08/13/Simple-ScriptManager-for-ASPNET-MVC.aspx, http://aspmvccombine.codeplex.com/) for MVC, but none of them were solving my unique “htmlId” problem. If you are looking for a ScriptManager for MVC, then the two solutions I provided would be more than enough. If, however, you are in a similar situation as I am with the html controls, please read on…

I decided to combine knowledge obtained from the two ScriptManager implementations, and create my own light-weight solution addressing both problems.
Because I wanted the usage of this to be very simple, I created a fluent interface which I can use in all my parts…

This is what the end result looks like:

<% Html.ScriptManager()
     .CreateClientScript(GetUniqueId())
       .AddParam("SelectId", GetUniqueId("selectList"))
       .AddParam("SourceUrl", Url.Action("Index", "Person"))
       .Ready(() => {%>
            $.getJSON(params.SourceUrl, function(result) {
                $.populate_combobox(result, params.SelectId);
            });
      <%});%>

<% Html.ScriptManager().AddStaticMethod("populate_combobox", () =>{ %>
    jQuery.populate_combobox = function(data, selectId) {
        $.each(data, function() {
            var option = new Option(this.text, this.value);
            var dropdownList = $(selectId)[0];
            if ($.browser.msie) {
                dropdownList.add(option);
            } else {
                dropdownList.add(option, null);
            }
        });
    }
<%});%>

<div id="<%=GetUniqueId() %>_part">
 <select id="<%=GetUniqueId("selectList") %>"></select>
</div>

My “GetUniqueId()” function returns a combination of the PartId, PageId, but you can replace this with anything you fancy.
The javascript that gets generated by this is:

var ContentPart_AboutPage_82 = {
        Init: function(params) {
            $.getJSON(params.SourceUrl, function(result) {
                $.populate_combobox(result, params.SelectId);
            });
        }
}
var ContentPart_AboutPage_83 = {
        Init: function(params) {
            $.getJSON(params.SourceUrl, function(result) {
                $.populate_combobox(result, params.SelectId);
            });
       }
}
var ContentPart_AboutPage_84 = {
        Init: function(params) {
            $.getJSON(params.SourceUrl, function(result) {
                $.populate_combobox(result, params.SelectId);
            });
       }
}
$(document).ready(function() {
    ContentPart_AboutPage_82.Init({
       SelectId:'ContentPart_AboutPage_82_selectList',
       SourceUrl:'/Person'
    });
    ContentPart_AboutPage_83.Init({
       SelectId:'ContentPart_AboutPage_83_selectList',
       SourceUrl:'/Person'
    });
    ContentPart_AboutPage_84.Init({
       SelectId:'ContentPart_AboutPage_84_selectList',
       SourceUrl:'/Person'
    });
});

    jQuery.populate_combobox = function(data, selectId) {
        $.each(data, function() {
        var option = new Option(this.text, this.value);
        var dropdownList = $(selectId)[0];
        if ($.browser.msie) {
            dropdownList.add(option);
        } else {
            dropdownList.add(option, null);
        }
      });
    }

Update: I have gone even further and added the concept of “SharedVariables” to the ScriptManager where the “SourceUrl” above and even the Json request is fired only once!

Here is my ScriptManager Class:

public class ScriptManager
{
    private readonly HtmlHelper _helper;

    public IDictionary<string, ClientScript> ClientScripts
    {
       get
       {
          if (_helper.ViewContext.HttpContext.Items["ClientScripts"] == null)
          _helper.ViewContext.HttpContext.Items["ClientScripts"] = new Dictionary<string, ClientScript>();

          return (IDictionary<string, ClientScript>)_helper.ViewContext.HttpContext.Items["ClientScripts"];
       }
    }

    public IDictionary<string, Action> Methods
    {
      get
      {
         if (_helper.ViewContext.HttpContext.Items["ScriptMethods"] == null)
         _helper.ViewContext.HttpContext.Items["ScriptMethods"] = new Dictionary<string, Action>();

         return (IDictionary<string, Action>) _helper.ViewContext.HttpContext.Items["ScriptMethods"];
      }
    }

   public ScriptManager(HtmlHelper helper)
   {
       _helper = helper;
   }

   public ClientScript CreateClientScript(string key)
   {
      if(!ClientScripts.ContainsKey(key))
       ClientScripts.Add(key, new ClientScript());

      return ClientScripts[key];
   }

   public ScriptManager AddStaticMethod(string key, Action javascript)
   {
     if(!Methods.ContainsKey(key))
       Methods.Add(key, javascript);

     return this;
   }

   public void Render()
   {
     TextWriter writer = _helper.ViewContext.HttpContext.Response.Output;
     writer.WriteLine("<script type=\"text/javascript\">");

     foreach (var clientScript in ClientScripts.Keys)
     {
       writer.WriteLine("var " + clientScript + " = {");
       writer.WriteLine("        Init: function(params) {");
       ClientScripts[clientScript].Value();
       writer.WriteLine("        }");
       writer.WriteLine("}");
     }

     writer.WriteLine("$(document).ready(function() {");
     foreach(var clientScript in ClientScripts.Keys)
     {
       var client = ClientScripts[clientScript];
       writer.WriteLine("    " + clientScript + ".Init({");
       foreach (var param in client.Params)
         writer.WriteLine("       {0}:'{1}'{2}", param.Key, param.Value, IsLast(client.Params, param.Key) ? string.Empty : ",");
         writer.WriteLine("    });");
       }
     writer.WriteLine("});");
     foreach(var method in Methods.Values)
       method();
     writer.WriteLine("</script>");
   }

   private static bool IsLast(IDictionary<string, string> parameters, string key)
   {
     var keys = parameters.Keys.ToList();
     return keys.Count > 0 && keys[keys.Count-1] == key;
   }
}

Here is the ClientScript class:

public class ClientScript
{
   private readonly IDictionary<string, string> _parameters = new Dictionary<string, string>();
   private Action _script;

   public IDictionary<string, string> Params
   {
     get { return _parameters; }
   }

   public ClientScript AddParam(string key, string value)
   {
     Params.Add(key, value);
     return this;
   }

   public ClientScript Ready(Action script)
   {
     _script = script;
     return this;
   }

   public Action Value
   {
     get
     {
       return _script;
     }
   }
}

Here is my extension method:

public static ScriptManager ScriptManager(this HtmlHelper helper)
{
    return new ScriptManager(helper);
}

And then you only need to add this at the end of your master page:

<% Html.ScriptManager().Render(); %>

If you are asking a user “Do you agree with our terms?”, the general consensus is to assume that not clicking the box is “forgetting” to make a selection and warning me that “You have forgotten to tick our terms and conditions”. In this situation the case may be so, but what if I did not agree? What if the question was “Do you want to opt out of us sending you loads and loads of spam?” and simply not spotting this question.

I believe that if you did not make a selection it is a valid state. Thus a yes/no question, in my opinion, has the following states; “yes”, “no” and “did not choose”.
Once again, I don’t simply rant, I also offer a solution… a very simple extension method which I love using for all my yes/no questions instead of checkboxes. In this case I made the “not selected” state 0.

public static string YesNoDropDownList(this HtmlHelper helper, string id, string selectedValue)
        {

            var list = new SelectList(new[]
                              {
                                  new {text = "Select", value = "0"},
                                  new {text = "No", value = "1"},
                                  new {text = "Yes", value = "2"}
                              }, "value", "text", selectedValue);

            return helper.DropDownList(id, list);
        }

PS: It also looks a bit neater and more uniform.

The first thing I worried about was testability. “QUnit” (http://docs.jquery.com/QUnit) seems to be a very powerful testing framework that would probably give me more coverage than what I had before! UnitTesting – Check

So lets look at one of the samples in the codeplex download, specifically the Asp.Net MVC sample…

We start with a “Person” Model:

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

And a “PersonController” class which has a Search action:

public class PersonsController : Controller
{
    public JsonResult Search(string searchString)
    {
        List persons = new List();
        persons.Add(new Person { FirstName = "Kozin", LastName = "Osot" });
        persons.Add(new Person { FirstName = "Setesyci", LastName = "Rynaugh" });
        persons.Add(new Person { FirstName = "Atheck", LastName = "Garash" });

        return Json(persons
            .Where(p => p.FirstName.ToLower().Contains(searchString.ToLower()) ||
                p.LastName.ToLower().Contains(searchString.ToLower())).ToList());
    }
}

Then we create a “SearchViewModel” js file and put this in our “ViewModels” folder like so:

var SearchViewModel = {
    Initialize: function(args, callback) {
        Kaboom.register("Search", SearchViewModel.Search);
        SearchViewModel.SearchResults = new Array();
        callback();
    },

    Ready: function() {
        SearchViewModel.Search();
    },

    SearchString: '',
    SearchResults: null,
    Search: function() {
        $.getJSON('/Person/Search',// You can set this as a hidden field on your View with 'Url.Action(..' and simply do $('#searchSource').val()
            { searchString: SearchViewModel.SearchString },
            SearchViewModel.PopulateSearchResults);
    },

    PopulateSearchResults: function(data) {
        SearchViewModel.SearchResults = data;
        Kaboom.notify(SearchViewModel, "SearchResults");
    }
}

And our “Search” view would hook up to our view model like so…

<head runat="server">
    <title>Search</title>
    <% string version = DateTime.Now.Ticks.ToString(); %>
    <script type="text/javascript" src="../../ViewModels/Persons/SearchViewModel.js?id=<%= version %>"></script>
    <script type="text/javascript" src="Scripts/jquery-1.3.2.js?id=<%= DateTime.Now.Ticks.ToString() %>"></script>
    <script type="text/javascript" src="Scripts/json2.js?id=<%= DateTime.Now.Ticks.ToString() %>"></script>
    <script type="text/javascript" src="Scripts/kaboom.js?id=<%= DateTime.Now.Ticks.ToString() %>"></script>

</head>
<body>
    Quick start shows how to communicate with an aspMVC controller.....<br />
    <input type="hidden" id="viewmodel" viewmodel="SearchViewModel" debug="0" />
    <div id="Debug"></div>
    Search:<br />
    <input type="text" bindto="SearchString" mode="TwoWay" /><br />
    <input type="button" value="Search" command="Search" />
    <br />
    <table bindto="SearchResults">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Options</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>$FirstName</td>
                <td>$LastName</td>
                <td><a href="#" onclick="alert('$FirstName')">Delete</a></td>
            </tr>
        </tbody>
    </table>
</body>

You can bind all your view actions to commands.

<input type="button" command="Save" value="Bound to Save command via jQuery(element).click()" /><br /><br />
<input type="button" command="Save" trigger="dblclick" value="Bound to Save command via jQuery(element).dblclick()" /><br /><br />
<input type="button" command="Save" trigger="blur" value="Bound to Save command via jQuery(element).blur()" /><br /><br />
<input type="button" command="Save" trigger="customaction" value="Bound to Save command via jQuery(element).customaction()" /><br /><br />

… and it has support for other controls and more complex bindings.

<select bindto="Person.Salutation"
         datatextfield="Name"
         datavaluefield="Id"
         datasourceid="Salutations"
         onbind="ProgrammaticallyBindIt" >
   <option value="0">[select]</option>
</select>

There are loads of other examples, including binding to Tables, Divs, Spans, Checkboxes etc. You can download the framework here.

I have searched wide and wild and the only way you could do this is by modifying the “ContentDisposition” like so:

Response.AddHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
// OR
Response.AddHeader("Content-Disposition", "inline; filename=\"" + fileName + "\"");

The “attachment” setting opens a dialog to save the file with the correct name and the “inline” setting doesnt open a dialog, but ignores the filename!
This is not the behaviour I am looking for, so I had a quick coffee and came up with the following very simple solution!

My solution came in the form of a new route in my mappings:

routes.MapRoute(
    "ResourceModulePdf", // Route name
    "ResourceModule/Pdf/{id}.pdf", // URL with parameters
    new
    {
        controller = "ResourceModule",
        action = "Pdf",
        id = "",
        sourceFilename = ""
    } // Parameter defaults
    );

and my ‘pdf’ action:

public ActionResult Pdf(string id, string sourceFilename)
{
    // We do not need to do anything with 'id'. It has served it's purpose already
    return new FileResult(sourceFilename, "application/pdf");
}

… and my FileResult

public class FileResult : ActionResult
{
    public String ContentType { get; set; }
    public byte[] ImageBytes { get; set; }
    public String SourceFilename { get; set; }

    //This is used for times where you have a physical location
    public FileResult(String sourceFilename, String contentType)
    {
        SourceFilename = sourceFilename;
        ContentType = contentType;
    }

    //This is used for when you have the actual image in byte form
    //  which is more important for this post.
    public FileResult(byte[] sourceStream, String contentType)
    {
        ImageBytes = sourceStream;
        ContentType = contentType;
    }

    public override void ExecuteResult(ControllerContext context)
    {
        var response = context.HttpContext.Response;
        response.Clear();
        response.Cache.SetCacheability(HttpCacheability.NoCache);
        response.ContentType = ContentType;

        if (ImageBytes != null)
        {
            var stream = new MemoryStream(ImageBytes);
            stream.WriteTo(response.OutputStream);
            stream.Dispose();
        }
        else
            response.TransmitFile(SourceFilename);
    }
}

All we need to do now is construct our hyperlinks like so:

Doc

By default the “TransmitFile” method will take the name of the filename you used in your hyperlink and the result is exactly what we wanted!

In the past we would normally create a HTTP handler to write to the Response.OutputStream, but with ASP.NET MVC we simply need to create another action on our preferred controller…

First we create an ‘ImageResult’ class which will handle our output.

public class ImageResult : ActionResult
{
    public Image Image { get; set; }
    public string ContentType { get; set; }
    public ImageFormat ImageFormat { get; set; }

    public ImageResult(Image image, string contentType, ImageFormat imageFormat)
    {
        Image = image;
        ContentType = contentType;
        ImageFormat = imageFormat;
    }

    public override void ExecuteResult(ControllerContext context)
    {
        context.HttpContext.Response.Clear();
        context.HttpContext.Response.ContentType = ContentType;
        Image.Save(context.HttpContext.Response.OutputStream, ImageFormat);
    }
}

And then we simply create an action for our specific needs:

public ActionResult ResourceImage(string key)
{
    var resourceItem = _provider.GetResourceItem(key);
    var bitMap = new Bitmap(resourceItem.Stream);

    return new ImageResult(bitMap, resourceItem.ContentType, resourceItem.Format);
}

public ActionResult ResourceFile(string key)
{
    var resourceItem = _provider.GetResourceItem(key);
    return File(resourceItem.Stream, resourceItem.Format, key);
}

All you need to do is create your own provider that would find the key in the database and return the stream and the format of the file.

ASP.NET MVC Action Method

public ActionResult GetUsers()
{
     var data = Service.QueryUsers()
           .Select(x => new {value = x.Id, text = x.Name});

      return Json(data);
}

Usage:

var url = "<%=Url.Action("GetUsers", "UserController") %>";

$.getJSON(url, function(data, textstatus) {
        $.populateSelect("#someSelectBox", data);
});

Global Method:

// JQuery Method
jQuery.populateSelect = function(selectId, data) {
    $.each(data, function() {
        var option = new Option(this.text, this.value);
        var dropdownList = $(selectId)[0];
        if ($.browser.msie) {
            dropdownList.add(option);
        } else {
            dropdownList.add(option, null);
        }
    });
};

Removing all Items from a select list is just as simple:

$("#mySelectList")
   .find("option")
   .remove();

And lastly how to Append or Prepend items to the list:

// Add options to the end of a select
$("#mySelectList")
    .append("New Item");

// Add options to the start of a select
$("#mySelectList")
    .prepend("Select...");