Creating a site in MVC 3 and I have this code snippet that I use on several parts on the design. It's a designcode that creates a head for modules on the site.
Now wondering if this is the best way to call this code snippet? Should i use Helpers or is there a better way?
Today I do like this:
public static IHtmlString FrameModuleHeader(this HtmlHelper helper, int Type, string Headline)
{
StringBuilder html = new StringBuilder();
html.Append("<div class='module_top'>");
html.Append("<div class='module_top_left'></div>");
html.Append("<div class='module_top_middle_" + Type + "'><div class='module_top_headline'><h4>" + Headline + "</h4></div></div>");
html.Append("<div class='module_top_right'></div>");
html.Append("</div>");
return MvcHtmlString.Create(html.ToString());
}
And then call my HTML helpers in the view through:
#Html.FrameModuleHeader(1,"My headline")
Thanks!
/Mike
I would probably use a partial view or a display template that I would include instead of HTML helper because stuffing so much HTML in a C# code looks ugly.
So for example I would have a view model:
public class SomeViewModel
{
public int Type { get; set; }
public string Headline { get; set; }
}
and a partial:
#model AppName.Models.SomeViewModel
<div class="module_top">
<div class="module_top_left"></div>
<div class="module_top_middle_#(Model.Type)">
<div class="module_top_headline">
<h4>#Model.Headline</h4>
</div>
</div>
<div class="module_top_right"></div>
</div>
and then:
#Html.Partial("Foo", new SomeViewModel { Type = 1, Headline = "My headline" })
This of course doesn't mean that your HTML helper wouldn't work. It's just that normally HTML helpers should be used to generate small fragments of HTML and in this particular example this doesn't seem to be the case. Also you get HTML intellisense if used in a view which might aid you identify unclosed tags, not properly formatted HTML, ... whereas inside C# everything is one big magic string.
And one final remark about your HTML helper if you decide to use it: Make sure you HTML encode this Headline string before putting it inside the string builder or you might get bad XSS surprises.
There is really no recommended way. The way that you are doing it is very clean. So I see no reason to change it.
Another option is to use a Partial View. You can put it in /Views/Shared so it is available to everything. One reason this is nice, is it can be more easily edited without having to push out a new code base. If this output never changes, then perhaps that's not necessary.
You could of course cure the code bloat caused by divitus, by removing the unnecessary html tags.
public static IHtmlString FrameModuleHeader(this HtmlHelper helper, int Type, string Headline)
{
StringBuilder html = new StringBuilder();
html.Append("<div class='module_top'>");
html.Append("<h4 class='module_top_middle_" + Type + "'>" + HtmlEncode(Headline) + "</h4>");
html.Append("</div>");
return MvcHtmlString.Create(html.ToString());
}
Related
How would you use an Html.ActionLink to render the following link -
It may seem silly to do this, but sometimes I need a link that has link functionality (rollover pointers, etc.) but does not go anywhere. And I want to use an Html.ActionLink for code consistency.
I have tried different variations of Html.ActionLink but I keep getting messages about things not allowed to be null.
#Html.ActionLink(" ", "", "", new {href="javascript:void(0)"})
will render as
Instead of forcing ActionLink to do something it isn't made for, consider creating your own helper method:
public static class MyHtmlExtensions
{
public static MvcHtmlString EmptyLink(this HtmlHelper helper, string linkText)
{
var tag = new TagBuilder("a");
tag.MergeAttribute("href", "javascript:void(0);");
tag.SetInnerText(linkText);
return MvcHtmlString.Create(tag.ToString());
}
}
Import the namespace into your view and you'll be able to do this:
#Html.EmptyLink("My link text")
I would like to create a html helper that would receive as a parameter content of the view, like this:
<% Html.MyTextArea("txt1", () => {%>
content of the view
<%=Html.TextBox("Name") %>
...
<% }) %>
Since you've tagged it as MVC, I'm going to propose you could do something like I posted on my blog as a way to get syntax highlighting for templates as the solution would be very similar, IF you don't need to manipulate the inner content and are simply interested in 'wrapping' it in some way (like in a containing element that requires some extra logic).
Using the technique, the HtmlHelper method receives the context of the block. The syntax is slightly different from your suggested technique though.
For example, you could have something like:
#using(Html.MyTextArea("txt1"))
{
<some HTML content here>
}
The context is passed to an IDisposable object which includes a Writer (for writing to the current output stream). There, it can output multiple elements or do other manipulation as needed. The Dispose is used to write a close element (if needed).
So, you could end up with something like this:
<textarea><some HTML content here></textarea>
However, as I mentioned this does not provide the inner content to the function itself.
As Razor pages render inside out, there's not an effective method to grab the output in the way you're wanting. There are some posts around about caching the output of a Partial to a string (which would mean the inner content in your example would be in another file, an .ascx file), so you might want to look at those.
One approach is,
public static MvcHtmlString TextArea(this HtmlHelper htmlHelper, string name, Action<TextWriter> action)
{
var writer = new StringWriter();
action(writer);
// here writer contains the html
return htmlHelper.TextArea(name);
}
<%:Html.TextArea("txt1",(writer) => {
writer.Write("content of the view");
writer.Write(HttpUtility.HtmlEncode(Html.TextBox("Name")));
}) %>
Do you mean something like this?
namespace System.Web.Mvc {
public static class HtmlHelperExtensions {
public static MvcHtmlString MyTextArea(this HtmlHelper htmlHelper, string id, Func<MvcHtmlString> helperFunc) {
return new MvcHtmlString(string.Format("<div id=\"{0}\">{1}</div>", id, helperFunc()));
}
}
}
You can use this way:
<%: Html.MyTextArea("txt1", () => Html.TextBox("Name", "abc")) %>
I have an ASP.NET WebForms control (derived from Control, not WebControl, if it helps) that has a rather complicated Render() function. The control has no viewstate and only uses the Control approach so it can render output directly. I feel it's a fine candidate for working with the MVC approach.
I'd like to use it in an MVC application I'm using, however I don't know what's the best way to go about it.
At first I thought about converting it to a HTML Helper method, but my control renders a large amount of HTML so the Helper method (with it returning strings) isn't too attractive.
The alternative is a PartialView, but those are UserControl derivatives, which wouldn't be appropriate in this case.
I see other HTML Helper methods don't return HtmlString, but actually use HtmlHelper.ViewContext.Writer to write output directly, but according to this question ( HtmlHelper using ViewContext.Writer not rendering correctly ) he was getting strange results. I'd like to avoid that mishap.
EDIT:
I think I've solved it using the HtmlHelper.ViewContext.Writer approach, and I haven't experienced the same problem as the problem I quoted.
Here's the code I wrote:
public static class MiniViewHelper {
public static void RenderMiniView<TModel>(this HtmlHelper html, MiniView<TModel> view, TModel model) {
TextWriter wtr = html.ViewContext.Writer;
HtmlTextWriter hwtr = wtr as HtmlTextWriter;
if( hwtr == null ) hwtr = new HtmlTextWriter( wtr );
view.Render( hwtr );
}
}
public abstract class MiniView<TModel> {
public TModel Model { get; set; }
public abstract void Render(HtmlTextWriter wtr);
}
public class VeryComplicatedMiniView : MiniView<ComplicatedViewModel> {
public override void Render(HtmlTextWriter wtr) {
wtr.WriteLine("VeryComplicatedMiniView ");
}
}
Used like so from my pages:
<% Html.RenderMiniView( new VeryComplicatedMiniView () { Propery1 = foo }, Model.RelevantMiniViewModel ); %>
Any thoughts?
The two approaches you have outlined in your question are correct. You could either try to write a custom HTML helper which will spit the same HTML as the control or use a partial.
I see other HTML Helper methods don't return HtmlString, but actually
use HtmlHelper.ViewContext.Writer to write output directly
ViewContext.Writer should be fine. Returning an IHtmlString from the helper is also fine. Just make sure you are properly encoding it inside since IHtmlString will not be automatically HTML encoded in Razor and it supposes that the helper takes care of this. Using a TagBuilder to generate a DOM tree in a helper is a good approach.
I'm trying to display a view model using an editor template that wraps the model in a fieldset before applying a base Object editor template.
My view:
#model Mvc3VanillaApplication.Models.ContactModel
#using (Html.BeginForm())
{
#Html.EditorForModel("Fieldset")
}
Uses a fieldset template (Views/Shared/EditorTemplates/Fieldset.cshtml):
<fieldset>
<legend>#ViewData.ModelMetadata.DisplayName</legend>
#Html.EditorForModel()
</fieldset>
Which in turn uses a basic template for all objects (Views/Shared/EditorTemplates/Object.cshtml):
#foreach (var prop in ViewData.ModelMetadata.Properties.Where(x =>
x.ShowForEdit && !x.IsComplexType && !ViewData.TemplateInfo.Visited(x)))
{
#Html.Label(prop.PropertyName, prop.DisplayName)
#Html.Editor(prop.PropertyName)
}
That's my intent anyway. The problem is that while the page renders with a fieldset and a legend, the Object template isn't applied so no input controls are displayed.
If I change the view to not specify the "Fieldset" template then my model's properties are rendered using the Object template, so it's not that my Object template can't be found.
Is it possible to pass the same model through multiple templates?
For what it's worth, the view model looks like this:
namespace Mvc3VanillaApplication.Models
{
[System.ComponentModel.DisplayName("Contact Info")]
public class ContactModel
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
}
I implemented what you have, and was able to reproduce it. I set a break point in Object.cshtml so I could inspect it and I was caught off guard to realize that it wasn't even hitting the object template when the fieldset template was being used. Then I stepped through the fieldset template and saw it was calling the template just fine, so something must be happening in the code which prevents it from displaying the object template.
I opened up the MVC3 source code, searched for EditorForModel and found the correct function.
public static MvcHtmlString EditorForModel(this HtmlHelper html) {
return MvcHtmlString.Create(TemplateHelpers.TemplateHelper(html, html.ViewData.ModelMetadata, String.Empty, null /* templateName */, DataBoundControlMode.Edit, null /* additionalViewData */));
}
Obviously this wasn't it, so I pressed F12 on TemplateHelpers.TemplateHelper, and once there again I pressed F12 on single line call which brings you to the meat of the function. Here I found this short bit of code starting on line 214 of TemplateHelpers.cs:
// Normally this shouldn't happen, unless someone writes their own custom Object templates which
// don't check to make sure that the object hasn't already been displayed
object visitedObjectsKey = metadata.Model ?? metadata.RealModelType;
if (html.ViewDataContainer.ViewData.TemplateInfo.VisitedObjects.Contains(visitedObjectsKey)) { // DDB #224750
return String.Empty;
}
Those comments are actually in the code, and here we have the answer to your question: Can one model be passed through multiple editor templates?, the answer is no*.
That being said, this seems like a very reasonable use case for such a feature, so finding an alternative is probably worth the effort. I suspected a templated razor delegate would solve this wrapping functionality, so I tried it out.
#{
Func<dynamic, object> fieldset = #<fieldset><legend>#ViewData.ModelMetadata.DisplayName</legend>#Html.EditorForModel()</fieldset>;
}
#using (Html.BeginForm())
{
//#Html.EditorForModel("Fieldset")
//#Html.EditorForModel()
#fieldset(Model)
}
And viola! It worked! I'll leave it up to you to implement this as an extension (and much more reusable) method. Here is a short blog post about templated razor delegates.
* Technically you could rewrite this function and compile your own version of MVC3, but it's probably more trouble than it's worth. We tried to do this on the careers project when we found out that the Html.ActionLink function is quite slow when you have a few hundred routes defined. There is a signing issue with the rest of the libraries which we decided was not worth our time to work through now and maintain for future releases of MVC.
In first cshtml template we can recreate ViewData.TemplateInfo (and clear VisitedObjects list)
var templateInfo = ViewData.TemplateInfo;
ViewData.TemplateInfo = new TemplateInfo
{
HtmlFieldPrefix = templateInfo.HtmlFieldPrefix,
FormattedModelValue = templateInfo.FormattedModelValue
};
now we can call another template with same model
#Html.DisplayForModel("SecondTemplate")
I have an HtmlHelper extension that currently returns a string using a string builder and a fair amount of complex logic. I now want to add something extra to it that is taken from a render partial call, something like this ...
public static string MyHelper(this HtmlHelper helper)
{
StringBuilder builder = new StringBuilder();
builder.Append("Hi There");
builder.Append(RenderPartial("MyPartialView"));
builder.Append("Bye!");
return builder.ToString();
}
Now of course RenderPartial renders directly to the response so this doesn;t work and I've tried several solutions for rendering partials to strings but the all seem to fall over one I use the HtmlHelper within that partial.
Is this possible?
Because this question, although old and marked answered, showed up in google, I'm going to give a different answer.
In asp.net mvc 2 and 3, there's an Html.Partial(...) method that works like RenderPartial but returns the partial view as a string instead of rendering it directly.
Your example thus becomes:
//using System.Web.Mvc.Html;
public static string MyHelper(this HtmlHelper helper)
{
StringBuilder builder = new StringBuilder();
builder.Append("Hi There");
builder.Append(helper.Partial("MyPartialView"));
builder.Append("Bye!");
return builder.ToString();
}
I found the accepted answer printed out the viewable HTML on the page in ASP.NET MVC5 with for example:
#Html.ShowSomething(Model.MySubModel, "some text")
So I found the way to render it properly was to return an MvcHtmlString:
public static MvcHtmlString ShowSomething(this HtmlHelper helper,
MySubModel subModel, string someText)
{
StringBuilder sb = new StringBuilder(someText);
sb.Append(helper.Partial("_SomeOtherPartialView", subModel);
return new MvcHtmlString(sb.ToString());
}
You shouldn't be calling partials from a helper. Helpers "help" your views, and not much else. Check out the RenderAction method from MVCContrib (if you need it now) or MVC v2 (if you can wait a few more months). You'd be able to pass your model to a standard controller action and get back a partial result.