Created
March 18, 2015 14:15
-
-
Save vipervf1/37480249db95df44ea08 to your computer and use it in GitHub Desktop.
HTML Helper in C# to prevent FOUC in Knockout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
namespace MyNamespace.Knockout | |
{ | |
public class BeginKnockoutLoadingContainerWriter : IDisposable | |
{ | |
protected ViewContext _viewContext; | |
public BeginKnockoutLoadingContainerWriter(ViewContext context) | |
{ | |
if (context == null) | |
throw new ArgumentNullException("context"); | |
_viewContext = context; | |
// Write the html | |
_viewContext.Writer.Write("<div>"); | |
_viewContext.Writer.Write("<div data-bind='visible: false'>"); | |
_viewContext.Writer.Write("Loading <img src='/assets/img/ajax-loader.gif' alt='Loading Spinner'/>"); | |
_viewContext.Writer.Write("</div>"); | |
_viewContext.Writer.Write("<div style='display:none' data-bind='visible: true'>"); | |
return; | |
} | |
public void Dispose() | |
{ | |
_viewContext.Writer.Write("</div></div>"); | |
} | |
} | |
public static class LayoutHelpers | |
{ | |
public static BeginKnockoutLoadingContainerWriter BeginKnockoutLoadingContainer(this HtmlHelper html) | |
{ | |
return new BeginKnockoutLoadingContainerWriter(html.ViewContext); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<div data-bind='visible: false'> | |
Loading <img src='loading.gif' alt='Loading Spinner'/> | |
</div> | |
<div style='display:none' data-bind='visible: true'> | |
<!-- Your content --> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@using MyNamespace.Knockout | |
@using (Html.BeginKnockoutLoadingContainer()) { | |
<!-- Your content --> | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment