Stefan's Tech Notes

Parallel processing of concurrent Ajax requests in Asp.Net MVC

stefan — Sat, 11 Feb 2012 16:34:09 +0000

If you develop web applications that relies on JavaScript to update the interface and you use several Ajax calls inside a single page, then you should know that all those calls are not executed in parallel on the server. On a default controller, each call to an action locks the user’s Session object for synchronization purposes, so even if you trigger three calls at once from the browser, these calls will get queued and executed one by one.

In order to speed up the requests processing you should reduce the number of actions that needs to write in the Session object or TempData to a minimum and make a dedicated controller for them. The rest of the actions can now be executed in parallel using controllers that are only reading values from Session.

If you want to enable a certain controller to process requests in parallel from a single user, you can use an attribute named SessionState that was introduced in MVC since version 3. It’s not necessary to use a session-less controller in order to achieve parallelism, the Ready-only option of the SessionStateBehavior will let you pass security checks you may have implemented based on Session data.

ParallelController.cs

    [SessionState(System.Web.SessionState.SessionStateBehavior.ReadOnly)]
    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
    public class ParallelController : Controller
    {
        public JsonResult Get1()
        {
            //read from session
            var x = Session["call"];
            Thread.Sleep(5000);
            return Json(new { obj = "p1" }, JsonRequestBehavior.AllowGet);
        }

        public JsonResult Get2()…
        public JsonResult Get3()…
    }

The serial controller has the same actions but writes data in the session object:

SerialController.cs

    [SessionState(System.Web.SessionState.SessionStateBehavior.Required)]
    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
    public class SerialController : Controller
    {
        public JsonResult Get1()
        {
            //write to session
            Session["call"] = "call";
            Thread.Sleep(5000);
            return Json(new { obj = "s1" }, JsonRequestBehavior.AllowGet);
        }

        public JsonResult Get2()…
        public JsonResult Get3()…
    }

Calling both controllers from jQuery at document ready:

Index.cshtml

$(document).ready(function () {

start = new Date().getTime();

        for (i = 1; i <= 3; i++) {
            $.ajax('Parallel/Get' + i, {
                cache: false
            }).done(logParallel);
        }

        for (i = 1; i <= 3; i++) {
            $.ajax('Serial/Get' + i, {
                cache: false
            }).done(logSerial);
        }

});

In Firebug you can see on the Network tab, that all six calls are fired at once and all calls made to the parallel (SessionStateBehavior.ReadOnly) controller returns in 5 seconds along with the first call that reached the serial (Read-Write Session) controller. The Get2 call to the serial controller will wait for Get1 to complete, and Get3 will wait for Get2, lasting 10 seconds longer overall. The Firebug timeline is more accurate then my js date diff.

The result showed here where taken with the project hosted on a dedicated Webserver. On my home pc, sometimes, the results got messed up because the browser can fire some calls too late or, on the server side, the call is queued inside the ThreadPull for a thread that is already busy. Azure would be a good place to host this test.

Prerequisites & Download

In order to easily install all the prerequisites you can use the Web Platform Installer version 4.

User friendly CAPTCHA for Asp.Net MVC

stefan — Sun, 29 Jan 2012 23:27:38 +0000

In this post I will show you how to add CAPTCHA functionality to a html form in an Asp.Net MVC 4 project. My goal is to make the CAPTCHA problem easy enough for all to solve, like a simple sum operation, and easier to read then the standard CAPTCHA text. An easy to read image is more vulnerable to smart bots that have an ORC system but I prefer to scare less clients then to provide the strongest anti-bot protection. And one more feature, when clicked the image should, change giving the users a new chance to respond correctly.

Implementing CAPTCHA in C# and MVC 4 takes these steps:

Create an Action that returns a CAPTCHA image and stores in the user session the right answer
Add to your Model a string property named Captcha
Add to your View the textbox for Captcha and the image placeholder
Validate answer inside your own Action

Render CAPTCHA image

CaptchaController.cs

        public ActionResult CaptchaImage(string prefix, bool noisy = true)
        {
            var rand = new Random((int)DateTime.Now.Ticks);

            //generate new question
            int a = rand.Next(10, 99);
            int b = rand.Next(0, 9);
            var captcha = string.Format("{0} + {1} = ?", a, b);

//store answer
Session["Captcha" + prefix] = a + b;

//image stream
FileContentResult img = null;

            using (var mem = new MemoryStream())
            using (var bmp = new Bitmap(130, 30))
            using (var gfx = Graphics.FromImage((Image)bmp))
            {
                gfx.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
                gfx.SmoothingMode = SmoothingMode.AntiAlias;
                gfx.FillRectangle(Brushes.White, new Rectangle(0, 0, bmp.Width, bmp.Height));

                //add noise
                if (noisy)
                {
                    int i, r, x, y;
                    var pen = new Pen(Color.Yellow);
                    for (i = 1; i < 10; i++)
                    {
                        pen.Color = Color.FromArgb(
                        (rand.Next(0, 255)),
                        (rand.Next(0, 255)),
                        (rand.Next(0, 255)));

                        r = rand.Next(0, (130 / 3));
                        x = rand.Next(0, 130);
                        y = rand.Next(0, 30);

                        gfx.DrawEllipse(pen, x – r, y – r, r, r);
                    }
                }

//add question
gfx.DrawString(captcha, new Font("Tahoma", 15), Brushes.Gray, 2, 3);

                //render as Jpeg
                bmp.Save(mem, System.Drawing.Imaging.ImageFormat.Jpeg);
                img = this.File(mem.GetBuffer(), "image/Jpeg");
            }

return img;
}

If you want to use multiple CAPTCHAs you can use the prefix to store the answer for each form. Much can be improved regarding the rendered image, for example I could use different font and size for each number in the equation, replace the noise with text distortion.

Include CAPTCHA validator in Model and View

Models.cs

    public class SubscribeModel
    {
        //model specific fields

        [Required]
        [Display(Name = "How much is")]
        public string Captcha { get; set; }
    }

In the View, beside a label, textbox and validator span you’ll need to add an image placeholder for the CAPTCHA.

Index.cshtml

@*form specific fields*@

<div class="editor-label">
    @Html.LabelFor(model => model.Captcha)
    <a href="@Url.Action("Index")">
        <img alt="Captcha" src="@Url.Action("CaptchaImage")" style="" />
    a>
div>
<div class="editor-field">
    @Html.EditorFor(model => model.Captcha)
    @Html.ValidationMessageFor(model => model.Captcha)
div>

Validate CAPTCHA on the server side

Inside your post action where the form submits you can validate the answer by comparing with the session value.

CaptchaController.cs

[HttpPost]
public ActionResult Index(SubscribeModel model)
{
    //validate captcha
    if (Session["Captcha"] == null || Session["Captcha"].ToString() != model.Captcha)
    {
        ModelState.AddModelError("Captcha", "Wrong value of sum, please try again.");
        //dispay error and generate a new captcha
        return View(model);
    }

return RedirectToAction("ThankYouPage");
}

Instead of validating the CAPTCHA on post, you can use an Ajax call to validate and refresh the image asynchronous, more details on how you can send forms data over Ajax read this blog post.

Prerequisites & Download

In order to easily install all the prerequisites you can use the Web Platform Installer version 4.

A front-end developer specs in the ASP.NET MVC world

stefan — Tue, 27 Sep 2011 00:31:41 +0000

I am writing this article because I want to explain the basics of a front-end developer job at the company I work for. In my opinion, a front-end developer who wants to be part of an ASP.NET MVC project should be, first of all, well informed regarding the web industry evolution and revolutions. Sometimes the front-end developer acts as a proxy for the final user, this means he or she must have extensive knowledge of usability, user centered design and information architecture.

Must have skills

UI Design – HTML5

It’s easy to say ‘I know html’ but in fact building a good html layout that’s simple and compact, ready for ajax updates, that sticks to the standards is a challenging task. A front-end designer should focus on what’s the purpose of a certain front-end interface and how the usage flow should be suggested to the user in terms of usability and ease of access to data. A good HTML layout today doesn’t mean you have to create the whole thing in Photoshop and slice it up, beside an icons collection everything that’s design related must be written in HTML code and CSS. Sure, you can use Photoshop or Illustrator to sketch the concept design if that’s your tool of choice.

If you are not familiar with HTML5 then you can start with the Semantic Markup, Form Fields and Link Relations, what i really recommend is Dive into HTML5, a free book by Mark Pilgrim. Oh, and don’t worry about IE not being able to handle HTML5 markup, ASP.NET MVC uses a JavaScript library called Modernizr that can make most of the code compatible with older IE versions.

UI Design – CSS3

CSS3 is an important step to more responsive and intuitive user interfaces, same html code can work nicely on most devices with help from CSS3’s media queries and pseudo-elements, check out more CSS3 new features at css3.info.

CSS code tends to get huge when working on a big scale ASP.NET MVC project made for the enterprise market. For that we are using the Sassy CSS extension. It’s odd at the beginning for a web designer but SASS can make a big difference when it comes to efficiency in front-end developing. Using Visual Studio 2010 with the Web Workbench from mindscape, the SASS code gets easily compiled into CSS, and it’s fully integrated within the IDE (source control and code behind).

UI Development – jQuery Basics

A front-end developer should be able to deliver a UI design that has all the different views of an interface, like a view mode and an edit mode – from plain text to edit inline, that involves good knowledge of jQuery selectors, effects, css and manipulation.

Great to have skills

JavaScript programming

Beside the jQuery basics an experience front-end developer should know how to make good use of js scopes, namespaces, prototypal inheritance model, closures and references. You can improve your js skills by reading the JavaScript-Garden documentation. JSON and AJAX calls should be on the menu too, and for handling ajax request I strongly recommend the Amplify.js library.

Knowing the patterns

A front-end developer should understand the Model-View-Controller pattern (Wikipedia article) and the .NET implementation (ASP.NET MVC3), also the Publish/Subscribe messaging pattern (Wikipedia article) and the JS implementation (Amplify.js).

Database architecture

A front-end developer should understand a database diagram and the sql data types in such a way that he can choose the right UI form elements for an ‘edit view’ or to be able to present the information in a logical way for the user – easy to read and understand.

Object-Oriented programming

Any OOP language will do, if you understand C++ or Java it will be easy to read C#. Lambda and regular expressions are always needed in programming; so, at some point you’ll have to learn them.

Any experience with the IDE

The main tool used to develop, test and deploy is of course the best programming IDE in the world: Visual Studio. Visual Studio can validate your HTLM5 and CSS3 code, can help you with JQuery Intellisense and Sass. Any developer must work using source control and in VS.NET 2010 the source control add-on named TFS is intuitive and easy to use.

If you are looking for a job in Bucharest and you have these skills please contact me.

RSS capabilities in Asp.Net MVC

stefan — Wed, 20 Jul 2011 22:35:51 +0000

Exposing a RSS feed on a Asp.Net MVC website can be easily done using the FileResult base class and Windows Communication Foundation SyndicatedFeed.

Write RSS feeds

In order to use the WCF SyndicatedFeed first you’ll have to add a reference in your MVC project to the System.ServiceModel assembly, then create a new class derived from FileResult like this:

FeedResult.cs

    public enum FeedType
    {
        Rss,
        Atom
    }

    public class FeedResult : FileResult
    {
        private readonly SyndicationFeed feed;
        private FeedType type;

        public FeedResult(SyndicationFeed feed, FeedType type)
            : base("application/rss+xml")
        {
            this.feed = feed;
            this.type = type;
        }

        protected override void WriteFile(HttpResponseBase response)
        {
            using (XmlWriter writer = XmlWriter.Create(response.OutputStream))
            {
                switch (this.type)
                {
                    case FeedType.Rss:
                        this.feed.GetRss20Formatter().WriteTo(writer);
                        break;
                    case FeedType.Atom:
                        this.feed.GetAtom10Formatter().WriteTo(writer);
                        break;
                }
            }
        }
    }

Next I will show you how I’ve add a RSS 2.0 Feed to my Post-To-Wall app that will fetch the latest ten notes from the database and create for each one a valid SyndicatedItem. On the main controller I’ve added a new action that will return a FeedResult like this:

TextNotesController.cs

public FileResult Rss2Feed()
{
    List<SyndicationItem> rssItems = new List<SyndicationItem>();
    SyndicationFeed feed =
        new SyndicationFeed("My Web Notes",
                            "Post To Wall app",
                            new Uri(Request.Url.ToString()),
                            "ptwID",
                            DateTime.Now);
    var list = (from x in db.TxtNotes orderby x.Created descending select x).Take(10).ToList();
    var url = Request.Url.AbsoluteUri.Replace("Rss2Feed", string.Empty);
    foreach (var item in list)
    {
        //shorten title to 5 words
        var shortTitle = item.Title.Split(' ').Take(5).Aggregate((x, y) => x + " " + y);
        var rssItem = new SyndicationItem(shortTitle,
            item.Title,
            new Uri(url + "ViewNote/" + item.Id),
            item.Id.ToString(),
            item.Created.Value);
        rssItems.Add(rssItem);
    }

feed.Items = rssItems;

return new FeedResult(feed, FeedType.Rss);
}

Now that we have the RSS action ready we can expose it in the HTML Head tag so any browser can auto-detect the link:

_NotesLayout.cshtml

Note that I using URL helper with http as protocol, this way it will generate the absolute url not a relative one.

Read RSS Feeds using an AsyncController

In Post-To-Wall app I’ve added a new page that shows updates from my blog by displaying the blog’s RSS feed. Because the server needs to download the xml file from my blog I’ve decided to use an AsyncController so I can avoid blocking the IIS server if the fetching takes time.

RssReaderAsyncController.cs

public class RssReaderAsyncController : AsyncController
{
readonly object locker = new Object();

    [OutputCache(Duration = 60 * 10 /* 10min */, VaryByParam = "url")]
    public void GetFeedAsync(string url)
    {
        url = string.IsNullOrEmpty(url) ? "http://www.stefanprodan.eu/?feed=rss2" : url;
        AsyncManager.OutstandingOperations.Increment(1);
        var req = WebRequest.Create(url);
        req.BeginGetResponse(result =>
        {
            var webResponse = req.EndGetResponse(result);
            XmlReader reader = XmlReader.Create(webResponse.GetResponseStream());
            SyndicationFeed feed = SyndicationFeed.Load(reader);

            //thread safe
            lock (locker)
            {
                AsyncManager.Parameters["feed"] = feed;
            }
            AsyncManager.OutstandingOperations.Decrement();

}, null);
}

    public ActionResult GetFeedCompleted(SyndicationFeed feed)
    {
        return View("Feed", feed);
    }
}

If you want to cache an AsyncController’s action you have to add the OutputCache attribute on the Async method. In order to get the Feed view, on the url you’ll have to specify the action name without Async or Completed, just GetFeed:

Index.cshtml

@Html.ActionLink("Updates", "GetFeed", "RssReaderAsync")

Download project source code

Before running the project make sure you have VS.NET 2010 SP1, MVC 3 Tool Update and IIS 7.5 Express installed.

Post-to-Wall app previous posts

Load on demand and Session Sync with JQuery and Asp.Net MVC
Edit data in dialog form with JQuery and Asp.Net MVC
Async operations with jQuery Ajax and Asp.Net MVC
Starting a new app with Asp.Net MVC 3 & JQuery UI

Load on demand and Session Sync with JQuery and Asp.Net MVC

stefan — Sat, 18 Jun 2011 11:54:02 +0000

In this post I will show you how to make a load on demand link that will fetch older entries from the database and how to synchronize newly added entries across multiple browser sessions using a JQuery timer.

Load on demand

In order to show the “load older entries” link on the page we need to know if in the database there are more notes then displayed. For this feature to work, I’ve modified the GetNotes action to return a json parameter named IsMore, every time the user clicks on this link an Ajax call is made to the server that will fetch five more notes or will hide the link if there are no more notes to display:

TextNotesController.cs

[HttpPost]
public JsonResult GetOlderNotes(int id, int count = 5)
{
    string message = string.Empty;
    bool isMore = true;
    var list = new List<TxtNote>();
    try
    {
        list = (from x in db.TxtNotes where x.Id < id orderby x.Created descending select x).Take(count).ToList();
        isMore = (from x in db.TxtNotes where x.Id < id select x.Id).Take(count + 1).Count() – count > 0;
    }
    catch (Exception ex)
    {
        message = ex.Message;
    }

    return Json(new
    {
        Html = this.RenderPartialView("_NotesList", list),
        IsMore = isMore,
        Message = message
    }, JsonRequestBehavior.AllowGet);
}

The JQuery code that handles the click event will look for the oldest note ID displayed and calls the above action, if the interface is in search mode then it will call a similar action that will fetch more results.

Index.cshtml

//load more results
$(function () {
    $("#loadOlder").click(function (e) {
        e.preventDefault();
        //find oldest id displayed
        var Id = $("ol#update li.item:last");
        if (Id[0]) {
            Id = Id.attr("id").replace("bar-", "");
        } else {
            Id = 0;
        }
        //load more search results
        if (searchMode) {
            var boxval = $("#content").val();
            if (boxval == '') {
                showError("You must type something before searching");
            } else {
                $.ajax({
                    type: "POST",
                    url: "TextNotes/SearchOlderNotes",
                    data: { keyword: boxval, id: Id, count: defaultCount },
                    cache: false,
                    dataType: "json",
                    success: function (data) {
                        date = new Date();
                        if (data.Html) {
                            $("ol#update").append(data.Html);
                            $("ol#update li").slideDown("slow");
                            if (data.IsMore) {
                                $("ol#footer li").slideDown("slow");
                                $("#loadOlder").show();
                            } else {
                                $("#loadOlder").hide();
                            }
                        } else {
                            showError(data.Message);
                        }
                        $("#loaderAnim").hide();
                    }
                });
            }
        //load older notes
        } else {
            $.ajax({
                type: "POST",
                url: "TextNotes/GetOlderNotes",
                data: { id: Id, count: defaultCount },
                cache: false,
                dataType: "json",
                success: function (data) {
                    date = new Date();
                    if (data.Html) {
                        $("ol#update").append(data.Html);
                        $("ol#update li").slideDown("slow");
                        if (!data.IsMore) {
                            //hide loader if there are no more notes
                            $("#loadOlder").hide();
                        }
                    } else {
                        showError(data.Message);
                    }
                    $("#loaderAnim").hide();
                }
            });
        }
        return false;
    });
});

Synchronization across multiple sessions

I’ve added a background thread (JQuery Timer) that will check if there are any recent notes that have been inserted from another browser session.

Index.cshtml

var threadId = 1;
var date = new Date();

$(document).ready(function () {

    //lunch sync thread
    threadId = setInterval(function () {
        loadNotes();
    }, 15000); //thread sleep 15 sec
});

Every 15 seconds the timer will make an Ajax call to the GetLatestNotes action using the latest note ID inserted and date:

TextNotesController.cs

[HttpPost]
public JsonResult GetLatestNotes(int id, DateTime? lastDate)
{
    string message = string.Empty;
    var list = new List<TxtNote>();
    try
    {
        if (lastDate.HasValue)
            list = (from x in db.TxtNotes where x.Created > lastDate.Value orderby x.Created descending select x).ToList();
        else
            list = (from x in db.TxtNotes where x.Id > id orderby x.Created descending select x).ToList();
    }
    catch (Exception ex)
    {
        message = ex.Message;
    }

    return Json(new
    {
        Html = this.RenderPartialView("_NotesList", list),
        Message = message
    }, JsonRequestBehavior.AllowGet);
}

If the server gets offline the timer will stop making calls :

Index.cshtml

if (searchMode) return;
//sync notes with other sessions
$("#loaderAnim").show();
var Id = $("ol#update li:first");
if (Id[0]) { //get last inserted id on this session
    Id = Id.attr("id").replace("bar-", "");
} else {
    Id = 0;
}
$.ajax({
    type: "POST",
    url: "TextNotes/GetLatestNotes",
    data: { id: Id, lastDate: dateFormat(date, 'isoUtcDateTime') },
    cache: false,
    dataType: "json",
    success: function (data) {
        date = new Date();
        if (data.Html) { //show latest notes
            $("ol#update").prepend(data.Html);
            $("ol#update li").slideDown("slow");
        }
        $("#loaderAnim").hide();
    },
    error: function () {
        //stop thread – server is offline
        clearInterval(threadId);
        $("#loaderAnim").hide();
    }
});

This way I try to keep notes synchronized on all browsers that the user may be using at the same time, or are opened on different devices.

Download project source code

Before running the project make sure you have VS.NET 2010 SP1, MVC 3 Tool Update and IIS 7.5 Express installed.

Post-to-Wall app previous posts

Edit data in dialog form with JQuery and Asp.Net MVC
Async operations with jQuery Ajax and Asp.Net MVC
Starting a new app with Asp.Net MVC 3 & JQuery UI

WYSIWYG HTML Editors for Asp.Net MVC

stefan — Mon, 13 Jun 2011 21:12:06 +0000

I was looking for a good What-You-See-Is-What-You-Get HTML editor that works on the Asp.Net MVC platform, after extensive searching and testing I came up with two solutions: CLEditor as a lightweight ultrafast editor, ideal for basic text operations and TinyMCE as the full featured editor suitable for CMS applications. Both editors are cross browser(IE 6.0+, FF, Safari, Chrome, Opera) and can be used as a JQuery plugin.

CLEditor

CLEditor is an open source jQuery plugin that has the standard text formatting features plus text color and highlight color. It’s a perfect replacement for the textarea control if you need basic text editing, CLEditor renders fast and has only 16KB minified(9KB gzip). The plugin is dual licensed MIT and GPL, that means that it can be used in any kind of application, open or closed source.

You can add CLEditor to your MVC 3 project using this NuGet package or by downloading from the plugin website. If you want CLEditor to produce Transitional XHTML compliant source, download this js file.

Using CLEditor with Asp.Net MVC 3 and JQuery 1.6.1

Index.cshtml

<div>
<textarea id="input" name="input">textarea>
div>

CLEditor will synchronize the editor’s xhtml content with the textarea value, meaning that jquery form serialization over ajax will work just fine. You can easily update the editor by calling updateFrame() function after changing the textarea value.

TinyMCE

TinyMCE is one of the best JavaScript powered word processor on the web and it’s used by millions of users in Facebook, WordPress, Joomla, Umbraco and many more. In order to use it in Asp.Net MVC you’ll have to download the special jQuery build of TinyMCE and the jQuery integration plugin from the official website.

Using TinyMCE with Asp.Net MVC 3

Index.cshtml

<div>
<textarea id="editor" name="editor">textarea>
div>

In order to retrieve the editor HTML content you need to call tinyMCE.get(‘editor’).getContent() function.

If you want to enable file upload in TinyMCE checkout this project on codeplex: TinyMCE with FCKEditor File Upload Manager in ASP.NET MVC 3.

What kind of programming will be suitable for Windows 8?

stefan — Mon, 06 Jun 2011 21:42:45 +0000

There are allot of discussions these days about Microsoft pushing forward with HTML5 and JavaScript as the way to code apps for the new Windows 8 interface. The community is confused because everybody was expecting XAML and C# to be mentioned, or WPF and Silverlight, or even a word on the Jupiter project(native Silverlight apps). I am sure that Microsoft will talk about all these technologies in September at the BUILD conference.

I bet all the existing apps that are working rite now on Windows 7 x64 will also run on Windows 8, they will not have a tile in the touch home screen but will still be accessible. I don’t expect a CRM written in Windows Forms 2.0 to be handled by touch, but a mouse or a pen will do and I am quite certain that the classic desktop PC will stick around for some time at least in the business sector.

Programming in 2012?

I see myself developing applications for the enterprise market using Asp.Net MVC v.next with HTML5 and JavaScript, I think that MVC 3 is mature enough and with the help of JQuery and JQuery Mobile I can produce reliable complex web apps. Of course I will try to make the most of my Windows 8 tile space, or even coding a WPF client to handle time critical notifications and instant messaging.

I see myself in 2012 creating apps for smartphones and pads using Silverlight v.next on the client side and WCF hosted by Windows Azure on the server side.

What I expect from Microsoft in 2012?

First of all I expect that developers from Romania to be allowed to create accounts on Windows 8 app store, I hate to say it but I’ve quit developing with Silverlight because I can’t deploy my apps legally on Wp7 since, as a Romanian, I can’t register on the App Hub site.

Second I expect that WPF will finally become ready for enterprise applications like Windows Forms 2.0 was, and if it’s possible a merge between Silverlight and WPF or at least a way to compile the same code for both technologies. With HTML5 and JQuery on the horizon I can’t imagine why Microsoft wants to invest both in WPF and Silverlight. Maybe the Jupiter project will deliver a solid XAML designer with C# in the code behind and there will be no more need for WPF or the current version of Silverlight and it’s limitations. I really hope that Jupiter, the new XAML powered interface, will work on Windows 7.

References

Windows 8 official preview on YouTube
Building “Windows 8″ – Video #1

BUILD Conference
Build Windows – 13 September 2011

Silverlight Forum discussions
Open Plea by Silverlight / WPF Devs for Full Windows 8 Support in Addition to HTML5

Mary-Jo Foley on Jupiter Project
Microsoft needs to tell Windows 8 developers now about ‘Jupiter’ and Silverlight

Improve Visual Studio with JQuery Intellisense and Code Outlining

stefan — Sat, 28 May 2011 22:02:05 +0000

Every .NET programmers is used to brace matching, code collapsing and Intellisense because Visual Studio got them from the beginning, I expect to have these helpers when I write jscript inside a cshtml file too.

Intellisense

For Intellisense in .js files add this:

index.js

///
///

In order to enable JQuery Intellisense for Asp.NET MVC projects that are using Razor syntax, you’ll need to insert in every cshtml this piece of code:

Index.cshtml

@if (false)
{
<script src="../../Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript">script>
}

It’s important to add the script reference inside a If(false) clause, in this way at runtime your html code will not contain the vsdoc reference. After adding the code you’ll have Intellisense with comments support:

Notice that I am using the latest version of JQuery, in order to update your MVC project please follows the steps described in this post.

NuGet Package: JQuery

Better JScript Editor

On the Visual Studio Gallery website there is great plugin that will add outlining, brace matching, code collapsing, word highlighting and tag support. You can install it via this link and you’ll benefit from these feature inside