I have a large view that needs some conditional logic to decide which of several html chunks to render in the middle of the view. I have a property on my model which can have several different values which determines the html to be output.
I would normally put conditional logic in an html helper, but given that each output is a fair chunk of html, I am not sure that escaping these in a c# file would be great. I could also put the logic in the action and render different views but given that the majority of the view is the same, this does not seem great either. So I am left with multiple if statements in my view (or partial?) which also seems ugly (and is obviously untestable).
What is the best way of doing this?
(I am using MVC3 in case there is something new and funky I can use!)
I usually put separate visual chunks in their own partials. Then my view conditionally calls each partial with Html.Partial. This keeps you main view from bloating.
In general, I try to avoid Html.Helpers that contain more than a single element.
Something like:
#if(Model.HasA)
{
#Html.Partial("widgetdetails-hasa")
}
#if(Model.HasB)
{
#Html.Partial("widgetdetails-hasb")
}
// etc
IMHO logic like this is fine for a view:
#if (Model.ShouldShowSomeSection)
{
... some large chunk of HTML
}
else
{
... some alternative
}
I agree with the answer from #bmancini , but here's what I'd do slightly differently:
I would logically group those 'several html chunks to render' into different partial views :
_partialViewA.cshtml and _partialViewB.cshtml
I then would use extension methods and have my logic in a Helpers folder, then Html sub-folder like this:
using System.Web.Mvc.Html;
public static class SomeViewHelper
{
public static MvcHtmlString OutputHtmlString(this HtmlHelper helper , SomeModel model)
{
if(model.HasA)
{
return helper.Partial("_partialViewA", model)
}
if(model.HasB)
{
return helper.Partial("_partialViewB", model)
}
}
}
This would remove all the logic from the view which would now only have this code:
#Html.OutputHtmlString(Model);
At least this would remove the 'ugliness' and avoid the conditional statements, and also avoid 'escaping the html chinks in C# code'...
Of course I would have to reference the Helpers.Html folder with a #using statement in the view.
Related
I am trying to set up Razor Pages routing to allow different views to be rendered for different tenants.
I have a directory structure as follows:
/Pages
Test.cshtml.cs
/Tenant1
Test.cshtml
/Tenant2
Test.cshtml
Given I am already able to decide which tenant is required, how is it possible to configure the routing to map some path eg localhost:8080/Test to either Tenant1/Test or Tenant2/Test views.
Use dynamic view content (via partial views).
With this solution, the Test page will dynamically load a different view depending on the route used to call it.
This means that you only have a single Test page but inside the cshtml file you will grab content from a partial view (more on that in a second).
First you will need to rename the files like so....
/Pages
Test.cshtml.cs
/Tenant1
_Test.cshtml // note it is prefixed with an underscore!
/Tenant2
_Test.cshtml // prefixed with an underscore too.
The naming convention for a partial view is to prefix the file with an underscore (_). This will immediately identify to someone looking at your project files as a "non-routable" page.
Then you add a little bit of logic to render the partial views...
Test.cshtml
#{
switch(...) // used a switch statement to illustrate the solution
{
case "Tenant1":
await Html.PartialAsync("~/Pages/Tenant1/_Test.cshtml");
break;
case "Tenant2":
await Html.PartialAsync("~/Pages/Tenant2/_Test.cshtml");
break;
default:
throw new NotImplementedException();
}
}
You can read about partial views here.
Extra: Using the same page model.
I also noticed that you had wanted to use the same page model (meaning sharing Test.cshtml.cs for both. This is rather trivial, but for the sake of completeness of the answer here is how you would do that...
/Pages/Test.cshtml.cs
namespace Foo.Pages
{
public class MySharedTestModel : PageModel
{
...
}
}
/Pages/Tenant1/Test.cshtml and /Pages/Tenant2/Test.cshtml
#page
#using Foo.Pages
#model MySharedTestModel
...
Is there a way by which I can do somethin like this inside a Razor view:
<h1>Normal razor code</h2>
#Html.Action("NormalRazorCode")
#Eval(" #Html.Action(\"RuntimeEval\") ")
Basically a text-to-razor compiler at runtime (that doesnt create a whole new view like RazorEngine does for example).
I think you could assume that the views exist at compile time, and create the actual files at runtime, this way the ViewEngine will work the way it does by default
basically you could create a Html.Eval helper that will create the .cshtml file and after Render it using Html.Action or Html.Partial
I wanted to do something similar; I have model data (under my control) stored in a database, and it would simplify my life if I was able to include HTML helpers in those strings that could be "expanded" when included in a page.
Main motivation was to allow me to re-use existing partial views.
There's no eval function, but you can easily write an extension method that will evaluate methods that you choose to allow in advance. In my case, I want to evaluate calls to #Html.Partial(). The example here is pretty simple - it looks specifically for #Html.Partial("somePartialView") calls and replaces it with the actual partial:
public static IHtmlString ExpandHtmlString(
this HtmlHelper htmlHelper,
String html)
{
if (String.IsNullOrEmpty(html))
return new HtmlString(html);
const String IDENTIFY_PARTIAL = #"#Html.Partial\(""([a-zA-Z0-9\-_]*)""\)";
var partialFinder = new Regex(IDENTIFY_PARTIAL);
var matches = partialFinder.Matches(html);
foreach (Match m in matches) {
var matchedStr = m.Value;
var viewName = m.Groups[1].Value;
var partial = htmlHelper.Partial(viewName);
html = html.Replace(matchedStr, partial.ToHtmlString());
}
return new HtmlString(html);
}
And you call it from your Razor page as so:
#Html.ExpandHtmlString((String)Model.SomeStringField)
You could easily expand on this to to evaluate a set of methods or operators that you decide in advance you will accept.
Part of my MVC application includes a wiki. As well as the standard wiki formatting there are a number of special tags for rendering data into templates. When parsing these tags it gets the data from the repository, instantiates a viewmodel and renders it to a partial, this partial then gets inserted into the markup replacing the original tag. The finalised markup itself is rendered as part of a DisplayFor in any properties with the relevant UIHint.
The relevant part of the code is:
private static void MatchSpecial(WikiHelper wh)
{
wh.match = SpecialTagRegex.Match(wh.sb.ToString());
while (wh.match.Success)
{
wh.sb.Remove(wh.match.Index, wh.match.Length);
string[] args = wh.match.Groups[2].Value.Split('|');
switch (wh.match.Groups[1].Value.ToUpperInvariant())
{
case "IMAGE":
string imageid;
imageid = args[0];
Image i = baserepo.imagerepo.GetImage(imageid);
ViewModels.ImageViewModel ivm = new ViewModels.ImageViewModel(i, args);
wh.sb.Insert(wh.match.Index, wh.Html.Partial("ImageViewModel",ivm));
break;
}
wh.match = SpecialTagRegex.Match(wh.sb.ToString(), ws.end);
}
}
The relevant members of WikiHelper are:
wh.sb - StringBuilder containing the markup
wh.html - the HtmlHelper from the main view
wh.match - holds the current regex matches
In MVC2 this worked fine. I'm now in the process of upgrading to MVC3 and the Razor ViewEngine. Despite the fact that Html.Partial is supposed to return the MvcHtmlString of the partial it is instead returning an empty string and writing the content directly into the response, which has the result of all similarly templated elements appearing at the very top of the HTML file (even before anything in my layout file).
Given the symptoms you are describing, I suspect that you are directly writing to the response stream somewhere in your custom helpers. So wherever you are outputing to the response make sure you replace:
htmlHelper.ViewContext.HttpContext.Response.Write("some string");
with:
htmlHelper.ViewContext.Writer.Write("some string");
Writing directly to the response stream worked in WebForms view engine because it is legacy from classic WebForms where this was how things were supposed to work. In ASP.NET MVC though this is incorrect. It worked but is incorrect. All helpers should be writing to ViewContext.Writer instead. Razor writes things into temporary buffers which are then flushed to the response. It uses an inside-out rendering.
I have a partial view that I want to be generic. According to this question, partial views cannot be generic. So I instead made an HtmlHelper extension that handles the pieces for which I want type-safety, then hands off the rest to a real partial view.
Usually my helper is called on page load, which works fine, but sometimes I want to add a row or something through AJAX. When this happens, the controller cannot use my "partial view" since it does not have access to the HtmlHelper.
Apart from having a partial view with a model of type object, is there anything I can do?
I'm using Razor, if that is important.
A simplified version of what I'm doing:
public static MvcHtmlString DoStuff<T>(this HtmlHelper html, IEnumerable<T> data,
Func<T, ViewModelType> StronglyTypedFn, string PartialName)
{
// the pre- and post-processing for the partial view is complex enough I'd like
// to encapsulate it. But I want the encapsulation to include the safety
// benefits that generics give.
var mappedData = data.Select(StronglyTypedFn);
string htmlData = "";
foreach(var model in mappedData){
htmlData += html.Partial(PartialName, model);
}
htmlData += "some boilerplate footer html";
return htmlData;
}
I realize that in this example I have so few lines of code outside the partial view that it seems pointless to have a helper, but in my real example it is more complex.
Now, in an ajax call I want to return Html.DoStuff(). But I can't, because this requires access to the HtmlHelper, and the helper isn't available inside a controller.
You could just have a simple action method that calls the partial for one model instance
public PartialViewResult Single(string partialName) {
return PartialView(partialName);
}
You could use a View with a Dynamic type instead of object.
But... It seems as if there's some misunderstanding here because the Controller shouldn't try to render the view at all. Could you post the Controller code?
The better option is, IMO, returning a JsonResult for your ajax request and adding the row/rows on client side using JS.
The Problem
I have a very nifty menu Html helper written for WebFormViewEngine views. This engine allows your helpers to return void, and still be able to use:
#Html.Theseus
This is great for my helper, because it can then render the menu using HtmlTextWriter, that renders directly to the output stream.
In Razor views, however, the Html helpers are expected to return a value (usually MvcHtmlString) which is what gets added to the output. Small difference, big consequence.
There is a way around this, as pointed out to me by GvS (see ASP.NET MVC 2 to MVC 3: Custom Html Helpers in Razor) as follows:
If the helper returns void, then do the following:
#{Html.Theseus;}
(Essentially, you are just calling the method, rather than rendering into the view).
Whilst still neat, this is not quite the same as #Html.Theseus. So...
My code is complex but works very well, so am loath to go through major edits, ie, replacing the HtmlTextWriter with another writer. A snippet of the code goes like:
writer.AddAttribute(HtmlTextWriterAttribute.Href, n.Url);
writer.AddAttribute(HtmlTextWriterAttribute.Title, n.Description);
writer.RenderBeginTag(HtmlTextWriterTag.A);
writer.WriteEncodedText(n.Title);
writer.RenderEndTag();
// Recursion, if any
// Snip off the recursion at this level if specified by depth
// Use a negative value for depth if you want to render the entire sitemap from the starting node
if ((currentDepth < depth) || (depth < 0))
{
if (hasChildNodes)
{
// Recursive building starts here
// Open new ul tag for the child nodes
// "<ul class='ChildNodesContainer {0} Level{1}'>";
writer.AddAttribute(HtmlTextWriterAttribute.Class, "Level" + currentDepth.ToString());
writer.RenderBeginTag(HtmlTextWriterTag.Ul);
// BuildMenuLevel calls itself here to
// recursively traverse the sitemap hierarchy,
// building the menu as I go.
// Note: this is where I increase the currentDepth variable!
BuildChildMenu(currentDepth + 1, depth, n, writer);
// Close ul tag for the child nodes
writer.RenderEndTag();
}
}
It wouldn't be fun to re write with TagBuilders. As it stands, it renders any type of menu, including the "Incremental Navigation" as described in my 4guysfromrolla article:
Implementing Incremental Navigation with ASP.NET
The Options:
I guess I could return an empty MvcHtmlString, but that is pretty much the definition of a hack...
The only alternative is to head off into the sunset and rewrite the helper using the TagBuilder to build each tag, add that to a StringBuilder, then build the next tag, etc, and then use the StringBuilder instance to create the MvcHtmlString. Seriously ugly, unless I could do something like...
The Question:
Is there a way to:
Stop the HtmlTextWriter rendering to the stream and instead use it like a StringBuilder that at the end of the process I use to create an MvcHtmlString (or HtmlString)?
Sounds unlikely, even as I write...
PS:
The great thing about the HtmlTextWriter is that you can build large quantities of tags, instead of building them one by one as with a TagBuilder.
Contrary to the responses you received for your other question Razor does not require that you return an HtmlString. The problem with your code right now is that you are writing directly to the response stream. Razor executes things inside-out which means that you can mess up the response order (see a similar question).
So in your case you could probably do this (though i haven't tested it):
public static void Theseus(this HtmlHelper html)
{
var writer = new HtmlTextWriter(html.ViewContext.Writer);
...
}
Edit (follow up to address your comments):
Html Helpers are perfectly capable of either returning a HtmlString directly or void and writing to the context writer. For example, both Html.Partial and Html.RenderPartial work fine in Razor. I think what you are confusing is the syntax required to call one version and not the other.
For example, consider an Aspx view:
<%: Html.Partial("Name") %>
<% Html.RenderPartial("Name") %>
You call each method differently. If you flip things around, things will just not work. Similarly in Razor:
#Html.Partial("Name")
#{ Html.RenderPartial("Name"); }
Now it just so happens that the syntax to use a void helper is a lot more verbose in Razor compared to Aspx. However, both work just fine. Unless you meant something else by "the issue is with a html helper not being able to return void".
By the way, if you really want to call your helper using this syntax: #Html.Theseus() you could do this:
public static IHtmlString Theseus(this HtmlHelper html)
{
var writer = new HtmlTextWriter(html.ViewContext.Writer);
...
return new HtmlString("");
}
But that's a bit of a hack.