how to generate id for custom helpers in mvc - asp.net-mvc

This is how I tried to create custom HTML helper and generate an id to it
but when I use the tag in my razor, I'm getting the same id for all tags when rendered, some one help me to find solution.
public static MvcHtmlString MyLabel(this HtmlHelper html, string text)
{
var builder = new TagBuilder("myLable");
builder.GenerateId("MyLableId1");
builder.SetInnerText(text);
return MvcHtmlString.Create(builder.ToString(TagRenderMode.Normal));
}
In Razor
#using MvcAppCustomeHtmlHelpers.Helper;
#Html.MyLabel("username")
#Html.TextBox("username")<br/>
#Html.MyLabel("password")
#Html.TextBox("password")
when I render text box the id is username and password for other textbox , but I'm unable to get id like text box for my custome html helper

Just pass one more parameter "id".
public static MvcHtmlString MyLabel(this HtmlHelper html, string text, string id)
{
var builder = new TagBuilder("myLable");
builder.GenerateId(id);
builder.SetInnerText(text);
return MvcHtmlString.Create(builder.ToString(TagRenderMode.Normal));
}
Now, you can use:
#Html.MyLabel("username", "label1")
#Html.MyLabel("username", "label2")

You want TagBuilder.GenerateId:
builder.GenerateId(text);
To be honest, this is nothing that a quick Google couldn't have told you:
http://www.asp.net/mvc/tutorials/older-versions/views/using-the-tagbuilder-class-to-build-html-helpers-cs

Related

Difference between MvcHtmlString.Create() and Html.Raw()

I am creating a MVC-Project. Using MVC 4 and Razor. After building some pages I was wondering: what is the difference between
MvcHtmlString.Create()
and
Html.Raw()
Would be nice if you could help me here to understand that.
Thanks in advance!
This is an excellent opportunity to look at the source code that's available to us for ASP.NET (https://github.com/aspnet/AspNetWebStack/).
Looking at HtmlHelper.cs, this is the code for Html.Raw():
public IHtmlString Raw(string value)
{
return new HtmlString(value);
}
public IHtmlString Raw(object value)
{
return new HtmlString(value == null ? null : value.ToString());
}
And this is the code for the MvcHtmlString class:
namespace System.Web.Mvc
{
public sealed class MvcHtmlString : HtmlString
{
[SuppressMessage("Microsoft.Security", "CA2104:DoNotDeclareReadOnlyMutableReferenceTypes", Justification = "MvcHtmlString is immutable")]
public static readonly MvcHtmlString Empty = Create(String.Empty);
private readonly string _value;
public MvcHtmlString(string value)
: base(value ?? String.Empty)
{
_value = value ?? String.Empty;
}
public static MvcHtmlString Create(string value)
{
return new MvcHtmlString(value);
}
public static bool IsNullOrEmpty(MvcHtmlString value)
{
return (value == null || value._value.Length == 0);
}
}
}
The most significant difference is that Html.Raw() accepts any object, while MvcHtmlString.Create() only accepts strings.
Also, Html.Raw() returns an interface, while the Create method returns an MvcHtmlString object.
Lastly, the Create deals with null differently.
There is no practical difference.
The MvcHtmlString.Create creates an instance of MvcHtmlString, while the Html.Raw method creates an instance of HtmlString, but MvcHtmlString just inherits from HtmlString, so they work the same.
The other answers focus more on the technical differences, if there are any. I think however there is another aspect: They serve different use cases / are used in different situations.
Html.Raw(...) is a method of IHtmlHelper. These are intented for use in razor views. It can be used to render raw HTML strings 'as is', without them getting encoded.
Since rendering user generated HTML content can be a security risk, it is very important to know when a string can contain HTML code, and for it to be sanitized. One of the main sources of security problems with old languages like ASP and PHP is rendering strings un-encoded per default, so you can see why, per default, ASP.NET MVC renders strings encoded. You want the (few) cases where your program renders a raw HTML string to be 'opt-in' and clear to see.
To better indicate these cases, it is good practice to store the HTML strings in a dedicated data type, like HtmlString. These objects will be rendered un-encoded, so you don't need Html.Raw. For this you can use MvcHtmlString.Create(...), or, more simply, new HtmlString(...), even if you don't have access to an IHtmlHelper (for example in a view model).
To illustrate this, consider this example of a view model for an ASP.NET MVC view with a title that does not contain HTML, and a content that does:
class MyViewModel
{
public string Title { get; set; }
public HtmlString SomeHtmlContent { get; set; }
}
This can be rendered on the page like this - notice that you don't need Html.Raw to render the HTML content:
<div>
<h1>#Model.Title</h1>
<div>
#Model.SomeHtmlContent
</div>
<div>

Creating html helpers without encoding

I'm trying to create an html helper to render a button. As an example this needs to contain -
<button onClick="window.location='/Users/Edit/admin'">
I have tried to do this using TagBuilder but am having issues because MergeAttribute is encoding the html.
e.g.
buttonBuilder.MergeAttribute("onClick", "window.location='" + url.Action(action, controller, routeValues));
gives me -
<button onClick="window.location='/Users/Edit/admin">
Is there a way I can do this so it's not encoded? Or should I be using another method other than TagBuilder?
--EDITED
I almost forget, use the HtmlDecode:
public static class ButtonHelper
{
public static IHtmlString Button(this HtmlHelper html)
{
TagBuilder button = new TagBuilder("button");
button.MergeAttribute("onClick", "window.location='/Users/Edit/admin'");
return new HtmlString(System.Web.HttpUtility.HtmlDecode(button.ToString()));
}
}
Or look it: http://forums.asp.net/t/1377957.aspx/1

how to add content to html.label in javascript asp.net mvc

I have a label as
<%= Html.Label("");%>
i want to add content to label at runtime, unfortunately it doesn't take any other parameter to create id property for it. can't i create id property for it just similar to asp:label
thanks,
michaeld
No need to use the HtmlHelper functions always and everywhere if they don't fit your need. They're just supposed to make your life easier, not harder. Use good ole HTML here:
<label id="id_for_label"></label>
If you want to keep using HtmlHelper functions you can always create your own extension methods.
For example:
public static class LabelHelper
{
private static string HtmlAttributes(object htmlAttributes)
{
var builder = new StringBuilder();
foreach (PropertyDescriptor descriptor in
TypeDescriptor.GetProperties(htmlAttributes))
{
builder.AppendFormat(" {0}=\"{1}\" ", descriptor.Name,
descriptor.GetValue(htmlAttributes));
}
return builder.ToString();
}
public static MvcHtmlString MyLabel(this HtmlHelper htmlHelper,
string labelText, object htmlAttributes)
{
var attributes = HtmlAttributes(htmlAttributes);
return MvcHtmlString.Create(
String.Format("<label for=\"{0}\" {1}>{0}</label",
labelText, attributes.Trim()));
}
}
Then you can add a label to a view in the following manner:
<%: Html.MyLabel("Hello, World!", new { #id = "myLabel" })%>
The generated HTML is:
<label for="Hello, World!" id="myLabel">Hello, World!</label>
For MVC 3 such a helper function is already available:
http://msdn.microsoft.com/en-us/library/gg538318(v=VS.99).aspx

MVC ValidationMessageFor

I want to show a image instead of text when validation fails but ValidationMessageFor encodes my 'validationMessage'.
I'm trying to specify a validationMessage using a plain img tag declaration
How can i do that?
Thanks
You will need to create your own HTMLHelper.
Something like:
public static MvcHtmlString ValidationImage(this HtmlHelper htmlHelper)
{
if (!htmlHelper.ViewData.ModelState.IsValid)
{
//todo: strip out the information you need from the model and return <img/> tag(s).
}
return null;
}
you can declare a const string containing image formatted in html like:
const string ERROR_IMAGE = "<img src=\"...\" alt=\"\" />";
in the View Action you can do something like this:
if(Something is Ine error)
ModelState.AddModelError(Something, ERROR_IMAGE);

RouteLink in HtmlHelper?

How can I make up a RouteLink in a custom HtmlHelper? I know how to make it in a partial view but I want to build up a new link in a custom htmlhelper extension method with the use of a RouteLink. How to accomplish this?
Update: I noticed HtmlHelper.GenerateRouteLink. But what do I need to put in as parameters?
Here's an example. Let's suppose that you want to wrap the links into a div tag with some given class so that your resulting html looks like this:
<div class="foo">Some text</div>
You could write the following extension method:
public static class HtmlExtensions
{
public static MvcHtmlString CustomRouteLink(
this HtmlHelper htmlHelper,
string className,
string linkText,
object routeValues
)
{
var div = new TagBuilder("div");
div.MergeAttribute("class", className);
div.InnerHtml = htmlHelper.RouteLink(linkText, routeValues).ToHtmlString();
return MvcHtmlString.Create(div.ToString());
}
}
which could be used like this:
<%= Html.CustomRouteLink("foo", "Some text",
new { action = "index", controller = "home" }) %>
and this will produce the desired markup. Any other overloads of RouteLink could be used if necessary.
Once you get an instance of the UrlHelper you should be able to do whatever you want to do in your HtmlHelper method
UrlHelper url = new UrlHelper(helper.ViewContext.RequestContext);

Resources