Introducing to AutoF5 Nuget Package: Live Editing in ASP.NET

  • [アーティクル]

The problem:

It is always annoying to switch between Visual Studio and browser back and forth when implementing a simple UI change. Especially editing an MVC project, there is no designer at all.

Imagine that you want to adjust the size of an image, you have to do this:

1. Edit in CSS file

2. Save

3. Switch to Browser

4. F5 or click refresh button to see the changes

Then if you are not satisfied with the adjustment. You have to go through step 1-4 again. This method is very inefficient.

Another method is to :

1. Use IE development tool / Firebug to adjust the CSS changes in browser until you are satisfied

2. Switch to Visual Studio and you should remember all the changes you have made and edit them in CSS file

3. Save

4. Switch back to browser

5. F5 or click refresh button to see the changes

This is better since you can view your changes immediately in browser, but it is still not good enough, because you have to remember all the changes and save them back to the CSS file.

The solution is AutoF5 nuget package

I came out this idea to use ajax long polling to dynamically refresh browser, whenever a save operation is detected.

To install AutoF5, you can simply type command in PM Console on your website project:

PM> Install-Package AutoF5

After installation, you will immediately see your changes whenever you save the content file in Visual Studio.

You can view changes in IE, Firefox, Chrome at same time just by Ctrl+S. Here is a quick demo

[View:https://www.youtube.com/watch?v=jVjVbr8mjfo&hd=1]

The package supports all popular browsers and all asp.net project templates. WebMatrix should also be supported. 

Nuget Package: https://nuget.org/List/Packages/AutoF5.

Source: https://github.com/hongyes/AutoF5.

Please let me know if you find any issue. Thanks.

Comments

  • Anonymous
    November 02, 2011
    Love it, one big issue for me (devving AJAX apps) is that if I edit CSS it doesn't just reload CSS as you'd want it to but rather it reloads the current URL in the browser.

  • Anonymous
    November 03, 2011
    Thanks for the feedback, Scott. Currently, it only supports to reload the whole page. But I plan to add support to reload CSS or JS file dynamically. I have logged an issue for this and will update my blog when it's done.

  • Anonymous
    November 04, 2011
    I just updated the package and now it supports CSS dynamically loading. For detail, please check: blogs.msdn.com/.../autof5-1-3-published-support-dynamically-loading-css-files.aspx. Thanks.