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.