Geek Answers Handbook

ASP MVC3 - How to load a custom layout for a page from a database?

I have an application for creating forms in ASP.NET MVC3 with Razor views. It looks like this: https://examples.wufoo.com/forms/workshop-registration/

I need users to be able to customize the page design. Not only to download custom css, but also to customize the HTML page template. Let them say that users should have full control over the layout of HTML for their custom web form page. The user should be able to edit any HTML on the page, in addition to the form included in the layout.

I'm not sure how to do this with Razor and ASP.NET MVC 3. Is it possible:

  • download location somewhere from the database as a string or whatever
  • replace some custom tags of the FORM1_INCLUDE type with @ Html.Partial ("some_non_customizable_layout_for_form1")
  • use the result as a valid layout file for a custom form page

Maybe 1-3 is not the best way to do what I need. What can you offer for this custom approach to page layout in ASP.NET MVC 3 with Razor views?

UPDATE 1 Using VirtualPathProvider, I was able to load the View from the database, but it just returns the text, for example:

@inherits System.Web.Mvc.WebViewPage <body> @Html.EditorFor(z => z.Customer) </body>

and doesn’t process Razor syntax at all. What could be the problem?

SOLVED:

You must place this line as the first in the Application_Start () method:

 HostingEnvironment.RegisterVirtualPathProvider(new MyVirtualPathProvider());

UPDATE 2 The custom view provider is registered with Global.asax.cs as:

 protected void Application_Start() { HostingEnvironment.RegisterVirtualPathProvider(new MyVirtualPathProvider()); AreaRegistration.RegisterAllAreas(); RegisterGlobalFilters(GlobalFilters.Filters); RegisterRoutes(RouteTable.Routes); }

MyVirtualPathProvider Code:

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Hosting; using System.IO; using System.Text; namespace new_frontend { public class MyVirtualPathProvider : VirtualPathProvider { public override bool FileExists(string virtualPath) { var td = FindTemplate(virtualPath); if (td == null) { return true; //return base.FileExists(virtualPath); } else { return true; } } public override VirtualFile GetFile(string virtualPath) { var td = FindTemplate(virtualPath); if (td == null) { return new MyVirtualFile(virtualPath, ""); //return base.GetFile(virtualPath); } else { return new MyVirtualFile(virtualPath, td.ContentStep1); } } private Facade.Dto.TemplateData FindTemplate(string virtualPath) { string prefix = "Template#"; int id = 0; Facade.Dto.TemplateData td = null; string fileName = System.IO.Path.GetFileNameWithoutExtension(virtualPath); if (fileName.StartsWith(prefix)) Int32.TryParse(fileName.Substring(prefix.Length), out id); if (id > 0) td = Facade.FrontEndServices.GetTemplate(id); return td; } } public class MyVirtualFile : VirtualFile { private byte[] data; public MyVirtualFile(string virtualPath, string body) : base(virtualPath) { // 'System.Web.WebPages.ApplicationStartPage string _body = /*body +*/ @" @inherits System.Web.Mvc.WebViewPage @using (Ajax.BeginForm(""Submit"", new AjaxOptions { UpdateTargetId = ""main"" })) { } <!-- <PERSONAL_INFO> --> <div id=""personal_info"" class=""op2-block""> </div> <!-- <PERSONAL_INFO> -->"; this.data = Encoding.UTF8.GetBytes(_body); } public override System.IO.Stream Open() { return new MemoryStream(data); } } }

And now for the Razor view code defined as the line above, I get this exception:

"Compiler error message: CS1061:" System.Web.Mvc.AjaxHelper "does not contain a definition for" BeginForm "and no extension method" BeginForm "that takes the first argument of the type" System.Web.Mvc.AjaxHelper ", (you did not specify use directive or assembly link?) "

And when I changed the Razor View code to:

 string _body = /*body +*/ @" @using System.Web.WebPages; @using System.Web.Mvc; @using System.Web.Mvc.Ajax; @using System.Web.Mvc.Html; @using System.Web.Routing; @inherits System.Web.Mvc.WebViewPage<dynamic> @using (Ajax.BeginForm(""Submit"", new AjaxOptions { UpdateTargetId = ""main"" })) { } <!-- <PERSONAL_INFO> --> <div id=""ppg_op2_personal_info"" class=""op2-block""> </div> <!-- <PERSONAL_INFO> -->";

I have another error:

The type "ASP._Page__appstart_cshtml" is not inherited from "System.Web.WebPages.ApplicationStartPage"

When i change

@inherits System.Web.Mvc.WebViewPage

to

@inherits System.Web.WebPages.ApplicationStartPage

to fix the error above, I get a new one:

"Compiler error message: CS0103: The name" Ajax "does not exist in the current context"

Update3: I tried using base.XXX:

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Hosting; using System.IO; using System.Text; namespace new_frontend { public class MyVirtualPathProvider : VirtualPathProvider { public override bool FileExists(string virtualPath) { var td = FindTemplate(virtualPath); if (td == null) { //return true; return base.FileExists(virtualPath); } else { return true; } } public override VirtualFile GetFile(string virtualPath) { var td = FindTemplate(virtualPath); if (td == null) { //return new MyVirtualFile(virtualPath, ""); return base.GetFile(virtualPath); } else { return new MyVirtualFile(virtualPath, td.ContentStep1); } } private Facade.Dto.TemplateData FindTemplate(string virtualPath) { string prefix = "Template#"; int id = 0; Facade.Dto.TemplateData td = null; string fileName = System.IO.Path.GetFileNameWithoutExtension(virtualPath); if (fileName.StartsWith(prefix)) Int32.TryParse(fileName.Substring(prefix.Length), out id); if (id > 0) td = Facade.FrontEndServices.GetTemplate(id); return td; } } public class MyVirtualFile : VirtualFile { private byte[] data; public MyVirtualFile(string virtualPath, string body) : base(virtualPath) { // 'System.Web.WebPages.ApplicationStartPage string _body = /*body +*/ @" @inherits System.Web.Mvc.WebViewPage<PPG.Facade.Dto.NewOrderPageData> @using (Ajax.BeginForm(""Submit"", new AjaxOptions { UpdateTargetId = ""main"" })) { } <!-- <PERSONAL_INFO> --> <div id=""personal_info"" class=""op2-block""> </div> <!-- <PERSONAL_INFO> -->"; this.data = Encoding.UTF8.GetBytes(_body); } public override System.IO.Stream Open() { return new MemoryStream(data); } } }

In this case, I get a view that is not parsed at all, this is what I get in a web browser:

 @using System.Web.WebPages; @using System.Web.Mvc; @using System.Web.Mvc.Ajax; @using System.Web.Mvc.Html; @using System.Web.Routing; @inherits System.Web.Mvc.WebViewPage<PPG.Facade.Dto.NewOrderPageData> @using (Ajax.BeginForm("Submit", new AjaxOptions { UpdateTargetId = "main" })) { } <!-- <PERSONAL_INFO> --> <div id="ppg_op2_personal_info" class="op2-block"> </div> <!-- <PERSONAL_INFO> -->
+7
source share
4 answers

You must create a virtual path provider that retrieves your custom views from the database.

There are a few questions here. Just find VirtualPathProvider

Updates (from my comments on the discussion of the issue)

  • VirtualPathProvider must be registered in Application_Start using HostingEnvironment.RegisterVirtualPathProvider(new MyVirtualPathProvider());

  • The base class MUST be called for all files that you cannot serve right now. This is necessary since there can only be one VirtualPathProvider . (Otherwise, you will see many strange errors)

  • @model directive does not work in the files you serve. Instead, you should use @inherits System.Web.Mvc.WebViewPage<YourNameSpace.YourModelName> .

  • IIRC you also need to override GetCacheDependency and return null for your own resources.

+7
source

depending on the degree of flexibility and customization you want to give, can be a very simple and very time-consuming task.

If you want users to simply customize the HTML on the page, you can use the WYSIWYG editor and store the raw html in the database.

In view use

 @Html.Raw(Model.body) // Where body is the field containing the wysiwyg content

This will make the markup as is.

To enable a custom tag / replacement, you will need to define a list of string constants that can be inserted using the WYSIWYG editor. Then they can be replaced when displayed.

For example, in your controller or model:

 model.body.replace("$[form1]", "<form action='something' method='post' name='form1'></form>");

Of course, depending on the nature of your application, you might want to rephrase this as a tag => markup, which allows you to add additional custom tags and their corresponding real HTML markup.

Hope this helps, Cheers!

0
source

I think you should use something like this:

http://vibrantcode.com/blog/2010/11/16/hosting-razor-outside-of-aspnet-revised-for-mvc3-rc.html

0
source

I did something similar, and you can understand very well that XML is very useful. You save the layout definition as XML in the database. This means that it is easy to manipulate, either directly or serialize / deserialize into an object model.

If you want to render the page, use XSLT to convert your XML to HTML, applying styles, etc. to the exit.

0
source

More articles:


All Articles