Setup and usage

Project set up

To use EAS in your ASP.NET MVC 3 project all you have to do is:

1. add a reference to EditAnyString.dll, Autofac.dll, Autofac.Integration.Mvc.dll, Newtonsoft.Json.dll and either implement your own IEASStorageProvider or use built in MemoryStorageProvider or EFStorageProvider (in this case you should also add proper assemblies). It might be a good idea to first try the MemoryStorageProvider to have everything set up with minimal effort, without the need of creating additional tables in db. When you are ready, then you can easily switch to storage provider that uses database as a backend.
2. set base page type of your view files to EditAnyString.MVC.EASWebViewForm - edit web.config file(s) in Views folders of your application:
<pages pageBaseType="EditAnyString.MVC.EASWebViewForm">
<!-- other settings -->
</pages>

Remember to set this also in areas views folders, if necessary.
3. copy the TT folder with T4EAS.tt and T4EAS.tt.settings.t4 from source code (I will put them in released binaries next time) to your web project and include it in project. This T4 template scans through all view files and extracts "tokens".
4. to enable actual editing on the website you'll also have to add some scripts, css and a controller. The simplest way is to get them from EditAnyString.Web project.
The EAS admin pages uses:
  • css and images from Content/eas.admin.css, Content/datatables, Content/fancybox
  • scripts from Scripts/eas.admin.js, Scripts/dataTables.min.js, Scripts/jquery.dataTables.columnFilter.js, Scripts/jquery.fancybox.js
  • controller and views to edit and administrate data: Areas/admin/EASController with DataTable binder and associated views. Just copy them from EditAnyString.Web to your project.

5. In Global.asax add initialization of Autofac:
public static void InitializeContainer()
{
    var builder = new ContainerBuilder();
    // do some standard Autofac initialization
    builder.RegisterControllers( Assembly.GetExecutingAssembly() );
    // register your services and providers...
    // register EAS providers
    //builder.RegisterEASStorageProvider<EditAnyString.MemoryStorage.Providers.MemoryStorageProvider>();
    builder.RegisterEASStorageProvider<EditAnyString.EFStorage.Providers.EFStorageProvider>();
    builder.RegisterEASEditAuthenticationProvider<EditAnyString.Providers.AnyLoggedUserEditAuthorizationProvider>();
    builder.RegisterEASCacheProvider<EditAnyString.MemoryCache.Providers.MemoryCacheProvider>();
    // build container and set resolver
    _container = builder.Build();
    DependencyResolver.SetResolver( new AutofacDependencyResolver( _container ) );
}

Don't forget to add namespaces:
using Autofac;
using Autofac.Integration.Mvc;
using EditAnyString.Extensions;
using System.Reflection;

and invoke InitializeContainer(); from Application_Start() method.
Now we have all set up in code and the rest is the modification of your view files.

Modify view files

1. start with _Layout.cshtml - add conditional inclusion of scripts and css:
 @if( CanEditEAS )
    {
    <link href="@Url.Content( "~/Content/eas/eas.admin.css" )" rel="stylesheet" type="text/css" />
    <link href="@Url.Content( "~/Content/eas/fancybox/jquery.fancybox.css" )" rel="stylesheet" type="text/css" />
    <link href="@Url.Content( "~/Content/eas/datatables/dataTables.css" )" rel="stylesheet" type="text/css" />
    <script src="@Url.Content( "~/Scripts/eas/dataTables.min.js" )" type="text/javascript"></script>
    <script src="@Url.Content( "~/Scripts/eas/jquery.dataTables.columnFilter.js" )" type="text/javascript"></script>
    <script src="@Url.Content( "~/Scripts/eas/jquery.fancybox.js" )" type="text/javascript"></script>
    <script type="text/javascript">
        // setup globals
        var InlineGetEASStringUrl = "@Url.Action( "GetStringInfo", "EAS", new { area = "admin" } )";
        var InlineSaveEASStringUrl = "@Url.Action( "SaveStringInfo", "EAS", new { area = "admin" } )";
    </script>
    <script src="@Url.Content( "~/Scripts/eas/eas.admin.js" )" type="text/javascript"></script>
    }


this way, when user is not authorized to edit strings (ie user is just regular visitor, not admin or editor), he/she won't see any trace of EAS. Don't forget to add also jQuery before.
2. start marking all the strings in all views that should be editable. You mark string as editable using one of the following constructions:
@S("This returns IHtmlString so it allows you to insert html formatting")
@R("This returns raw string so any html will be encoded")
@S("If there are two identical strings in one view file and you would like them to be edited separately, then you should specify an 'index' as a second argument to @S", 1 )
@S("If there are two identical strings in one view file and you would like them to be edited separately, then you should specify an 'index' as a second argument to @S", 2 )
@S("Finally if you want to have args, then use the third argument. Now is {0}", null, DateTime.Now )

So for instance, replace:
<title>Page title</title>

with:
<title>@R("Page title")</title>

Replace:
<h2>Welcome to our website!</h2>

@if( User.Identity.IsAuthenticated )
{
    <p>@( "You are logged as: " + User.Identity.Name )</p>
    <p>@Html.ActionLink("log off", "LogOff", "Account" ) | @Html.ActionLink( "go to your profile", "Profile", "Account" )</p>
    
    <p>@Html.ActionLink( "Go to admin area", "Index", "Home", new { area = "admin" }, null )</p>
}
else
{
    <p>You are not logged in, please @Html.ActionLink( log on, "LogOn", "Account" ) to edit texts</p>
}

with:
<h2>@S("Welcome to our website!")</h2>

@if( User.Identity.IsAuthenticated )
{
    <p>@S( "You are logged as: {0}", null, User.Identity.Name )</p>
    <p>@Html.ActionLink( R( "log off" ), "LogOff", "Account" ) | @Html.ActionLink( R( "go to your profile" ), "Profile", "Account" )</p>
    
    <p>@Html.ActionLink( R( "Go to admin area" ), "Index", "Home", new { area = "admin" }, null )</p>
}
else
{
    <p>@S( "You are not logged in, please" ) @Html.ActionLink( R( "log on" ), "LogOn", "Account" ) @S( "to edit texts" )</p>
}

As you can see, the changes are not that big. You can also try to use code snippets included in source package to make your life easier (just select desired text and "surround with" proper snippet).
3. run the T4 template. You can also leave it open so it will be executed each time project is build.
4. when there are new strings (not yet present in storage) they have to be initially stored. Take a look at EASController.LoadEASToStorage() - it takes processed texts and stores them in storage. You have to do it only when strings have changed, not when application starts. You can view and edit all the stored data in EASController.ViewEASData() .
5. on the website you should see dotted border around each editable string and when hover mouse over it, then small "edit" label should appear - click on it to edit this string. On save, the change will be sent to storage. You can also edit strings on EASController.ViewEASData() . Note that inline editing (via "edit" label) is available only for strings marked with @S("..") - those marked with @R("..") can be edited only in EASController.ViewEASData() .
Congratulations! You can now edit almost every string on your website with minimal effort. Of course you can change the storage class and authorization provider to further restrict string editing.
If you have any questions and problems, please use discussions tab or issue tracker.

Last edited Apr 1, 2013 at 2:47 PM by KZmorzynski, version 3

Comments

No comments yet.