I would like to create some HTML helper functions to create some links with generated HTML content. I would follow the default API as much as possible. This gets tricky when I want to pass in a routevalues object. A routevalue object of type RouteValueDictionary is (intentionally?) cumbersome to create in MVC. I would like to pass in an object routevalues as is done with i.e. Html.ActionLink. The tricky part is that I seem to need UrlHelper.CreateUrl which requires a RouteValueDictionary. I checked how ActionLink does this internally, and it uses TypeHelper.ObjectToDictionary. TypeHelper however is an internal class, so I can't access that. I could copy-paste the thing in, but - apart from that firstly i'd be violating the license if I do that and don't license under the Apache 2.0 license or compatible, and secondly copy-paste programming gives me the heeby-jeebies.
The following is what I'd roughly like to do:
public static MvcHtmlString MyFancyActionLink(this HtmlHelper helper,
Foo foo,
object routevalues){
TagBuilder inner = fancyFooContent(foo);
RouteValueDictionary routedict = TypeHelper.ObjectToDictionary(routevalues);
//alas! TypeHelper is internal!
string url = UrlHelper.GenerateUrl(null,
"myaction",
"mycontroller",
routedict,
helper.ViewContext.RequestContext,
true);
TagBuilder link = new TagBuilder("a");
link.MergeAttribute("href", url);
link.InnerHtml = inner.toString();
return MvcHtmlString.Create(link.ToString());
}
RouteValueDictionary has a constructor that accepts an object and uses its properties to populate the dictionary. Unless I am missing something obvious here, you should be able to use that:
RouteValueDictionary routedict = new RouteValueDictionary(routevalues);
Related
I'm learning ASP.NET MVC, and I have some problems, I would like to know what's the advantage of using Html.ActionLink() method instead of a normal Anchor tag, I don't see any obvious advantage yet, mostlyu because I have more problems using ASP's built-in method. Something else I would like to know, is how to add various attributes to Html.ActionLink(), I'm using this:
#Html.ActionLink("About", "About", "Home", new{ area="" }, new Dictionary<string, Object>{ { "class", "about-link" }, { "aria-role", "button" }, { "title", "About us..." } })
I found this in StackOverflow, but it just doesn't work, and I've been trying many things, but nothing.
This is the method signature of most likely interest to you:
public static MvcHtmlString ActionLink(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName,
object routeValues,
object htmlAttributes
)
For your instance, that would result in the following code:
#Html.ActionLink("About", "About", "Home", new { area = "" }, new { #class = "about-link", aria_role = "button", title = "About us..." })
A few things to note:
The first anonymous object is for route values, and the second anonymous object is for HTML attributes to apply to the anchor tag.
Since class is reserved keyword, you must prefix it with # inside anonymous objects. It will still be output as class on the anchor tag.
Similarly, aria-role is invalid C# syntax, so you have to use an underscore instead of a dash: aria_role. The built-in HtmlHelper extensions that accept htmlAttributes process the _ and turn it into a - when rendering the HTML.
Now, in terms of why you want to use this in the first place, #Christos points out correctly that by letting MVC construct the URL, your links continue to work even if your routing changes, while if you hardcoded the URL, it would fail. However, he misses the point that this doesn't require using Html.ActionLink. You can just as easily do something like the following:
<a href="#Url.Action("About", "Home", new { area = "" })" class="about-link" aria-role="button" title="About us...">
About
</a>
This is especially handy when you need something inside the link other than just straight text, like an icon, perhaps. If you find it easier to work directly with the HTML attributes, then you can do that. There's nothing wrong with this and you don't have to use Html.ActionLink. However, do still use Url.Action or one of its siblings, so that your URLs are constructed dynamically based on your route configuration.
The basic advantage of using #Html.ActionLink for creating a link instead of using an anchor element is the fact that the output is derived from the routing configuration. That means if you change something in the routes, automatically this change would be reflected to the links you have created using this helper.
Here you will find a detailed list with all the signatures of this method.
I am using ASP.NET MVC and Razor.
Using Razor, I am able to create helpers that print HTML code. However, I would like to take an object oriented approach, where my helpers have methods to add code.
However, if I just use C# to return HTML, then I am writing HTML in a string, which is difficult to maintain. Is there some best-practice that allows me to combine the best of both worlds?
In MVC you have some classes to help you.
One. HtmlHelper and UrlHelper. HtmlHelper can generate code for you, for example:
HtmlHelper.TextBox()
Two. TagBuilder. TagBuilder enables you to write more custom elements.
TagBuilder builder = new TagBuilder("input");
builder.GenerateId(id);
builder.MergeAttribute("type", "submit");
builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));
string html = builder.ToString(TagRenderMode.SelfClosing);
I need to have all my scripts at the bottom of the page, problem is when I have a Partial View I cannot use the "RenderSection" approach. Found a great example of how to add a HtmlHelper extension which takes the name of a script file, loads into a stack, then another helper renders that out on the base layout:
Razor section inclusions from partial view
That's great - but I don't want to have to create an entire JS file for a little chunk of script, or maybe even HTML, that I want to drop in. And I don't want to pass it all as a string, I want the nice formatting and intellisense, so I want to use a template ie:
#{Html.AddScript("test", #<text>
<script type="text/javascript">
function RefreshPreview() {
$('#AutoReplyHtml_Preview').html(
$('#htmlTemplate').html()
.replace('##MESSAGE_TITLE##', $('#AutoReplySubject').val())
.replace('##PRE_HEADER##', $('#AutoReplyPreHeader').val())
.replace('##MESSAGE_BODY##', $('#AutoReplyHtml').val())
);
$('#AutoReplyPlainText_Preview').html(
$('#plainTextTemplate').html()
.replace('##MESSAGE_BODY##', $('#AutoReplyPlainText').val())
);
}
$(document).ready(function() {
RefreshPreview();
});
</script>
</text>);}
Problem is - how to I get the value of the template into my method, I have this code which complies, but no clue how to get the data out of the "code" parameter:
public static string AddScript(this HtmlHelper htmlHelper, string title, Func<object, object> code) {
var ctx = htmlHelper.ViewContext.HttpContext;
Dictionary<string, string> scripts = ctx.Items["HtmlHelper.AddScript"] as Dictionary<string, string>;
if (scripts == null) {
scripts = new Dictionary<string, string>();
ctx.Items.Add("HtmlHelper.AddScript", scripts);
}
scripts.Add(title, code.ToString()); //Doens't work!
return string.Empty;
}
How do I need to tweak the delegate parameter to get the value inside the template??
The helper architecture is designed so that it can accomodate scenarios where you are providing a template that will operate, for example, on each item in a list. In such a scenario, you'd of course want to be able to pass it the "current" item when iterating through the list.
However, in other scenarios (such as yours), there is no current item. Yet, as you've discovered, you still have to declare a delegate as a parameter to your method that defines a method that consumes one parameter. That's ok -- since you're not consuming that argument in your helper (you don't make use of the somewhat magical item parameter in your template) you can just pass it null in your implementation. Preferably, declare your parameter as a Func<object, IHtmlString> rather than a Func<object, object>, but regardless, just invoke code(null).ToString() to get the HTML-encoded string you need to render.
I am trying to work around the fact that when they wrote asp.net MVC 3 they forgot to include code to add the unobtrusive validation attributes to select lists and their "fix" for this is to include it in MVC 4, which is no bloody use to anyone using MVC 3.
My proposed work around is to use Html.GetUnobtrusiveValidationAttributes() to add them myself, just like any other custom attributes, but i can't work out the correct syntax for calling the method. There are 2 overloads, one takes a string and the other takes a string and a ModelMetaData class. I understand the metadata param, I presume I just pass in ViewData.ModelMetadata but what should the string be? The MSDN documentation says it is "the specified HTML name attribute" which makes no sense to me. The HTML name attribute of what? The select list? Why would it need that and how does that help it know what property on my model i want the validation for? Looking at examples of usage they all seem to pass in the name of the property on my model that i want the validation attributes for, which makes sense. Unfortunately I can't get the method to return anything but an empty collection no matter what i pass in.
My model class is called Event and my property is called EventTypeID. I am using a slightly different viewmodel class as the basis for the view because i need to display a list of Events and also also allow a new event to be entered on the same view so i have a simple viewmodel class as below:
public class EventViewModel
{
public Model.Event NewEvent { get; set; }
public IEnumerable<Model.Event> Events { get; set; }
}
The dropdown list is mapped to the property like: #Html.DropDownListFor(model => model.NewEvent.EventTypeID what do I pass as the string to Html.GetUnobtrusiveValidationAttributes(string) or Html.GetUnobtrusiveValidationAttributes(string, ModelMetadata) to get the attributes for this property. I have tried:
Html.GetUnobtrusiveValidationAttributes("EventTypeID")
Html.GetUnobtrusiveValidationAttributes("EventTypeID",ViewData.ModelMetadata)
Html.GetUnobtrusiveValidationAttributes("NewEvent.EventTypeID")
Html.GetUnobtrusiveValidationAttributes("NewEvent.EventTypeID",ModelMetadata)
They all return an empty collection.
I know that my model is correct because if i change the call from Html.DropDownListFor to Html.TextBoxFor then the validation "just works" without me having to do anything other than add the validation attributes to my model class.
EDIT:
Just tried turning client side validation off, the validation works fine server side for all select lists.
For those still looking for an answer, this works for me:
public static IDictionary<string, object> UnobtrusiveValidationAttributesFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> propertyExpression)
{
var propertyName = html.NameFor(propertyExpression).ToString();
var metadata = ModelMetadata.FromLambdaExpression(propertyExpression, html.ViewData);
var attributes = html.GetUnobtrusiveValidationAttributes(propertyName, metadata);
return attributes;
}
Note that I'm using .Net MVC 4, you don't have the html.NameFor method in MVC 3. However, I believe this can be done in MVC 3 with the following method:
var propertyName = ExpressionHelper.GetExpressionText(propertyExpression);
You can use it inline
Example for select element
<select name="#Html.NameFor(m=> m.MyProperty)"
id="#Html.IdFor(m=> m.MyProperty)"
#Html.Raw(string.Join(" ", Html.GetUnobtrusiveValidationAttributes(Html.NameFor(m => m.MyProperty).ToString()).Select(x => x.Key.ToString() + "=\"" + x.Value + "\"")))
>
Here is a link to an answer I posted, showing an HtmlHelper I wrote to provide unobtrusive validation for dropdownlists: MVC 3 dropdownlist validation not working for complex view model
UPDATE
Are you trying to get the attributes in an HtmlHelper, or in-line in your view?
Assuming you are trying to get the attributes in your view, that is the problem.
First, you need to understand that ModelMetadata does not represent a single object available across your entire model. Rather, it represents the metadata for a particular element, be it your model, or any property within the model. A better descriptive name would be ObjectMetadata, since ModelMetadata is the metadata for a specified object, be it a model, a nested model, or a specific property.
ModelMetadata in the view is only the metadata for the top-level model. You must get the ModelMetadata for the property to which the dropdownlist is bound. If you use a helper, then the helper is passed the correct ModelMetadata as a matter of course. If you use your view, you need to engage in some gymnastics to get the correct ModelMetadata, see for example my answer here: Validating and editing a “Changeable”/optional type in Asp.net MVC 3
I have the following problem: one of the system I'm working in most important features is a search page. In this page I have some options, like records per page, starting date, ending date, and the problematic one: type. One must have the possibility to choose more than one type (most of the time, all of them will be selected). To make that work, i created the following:
<div>
<label>Eventos:</label>
<div>
#Html.ListBox("events", Model.Events, new { style = "width: 100%" })
</div>
</div>
It creates a listbox where I can choose more than one option, and when the form is submited, my query string will look like this:
/5?period=9&events=1&events=3&recordsPerPage=10
There it is possible to see that two events (which is the type I was talking before) are created. The action method to this page takes a List<long> as one of its arguments, which represents that two events values. The problem begins when I want to use that with MVC Contrib. Their pager works just fine, but as I was requested, I created another pager, which displays links to five pages after and before the one the user is at. To do this, in a part of my code I have to do the following (which is very similar to the MVC Contrib pager, that works):
public RouteValueDictionary GetRoute(int page)
{
var routeValues = new RouteValueDictionary();
foreach (var key in Context.Request.QueryString.AllKeys.Where(key => key != null))
{
routeValues[key] = Context.Request.QueryString[key];
}
routeValues["page"] = page;
return routeValues;
}
And then:
#Html.ActionLink(page.ToString(), action, controller, GetRoute(page), null)
The problem is that it is a Dictionary, which makes the second time I set the value for routeValues["events"] erase the previous.
Do you guys have any idea on how to work with it?
Very good question. Unfortunately it is not easy to generate an url which has multiple query string parameters with the same name using the Html.ActionLink helper. So I can see two possible solutions:
Write a custom model binder for long[] that is capable of parsing a comma separated values. This way you can keep your GetRoute method which will generate the following url: period=9&events=1%2C3&recordsPerPage=10&page=5.
public class CommaSeparatedLongArrayModelBinder : DefaultModelBinder
{
public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
var values = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
if (values != null && !string.IsNullOrEmpty(values.AttemptedValue))
{
// TODO: A minimum of error handling would be nice here
return values.AttemptedValue.Split(',').Select(x => long.Parse(x)).ToArray();
}
return base.BindModel(controllerContext, bindingContext);
}
}
which you will register in Application_Start:
ModelBinders.Binders.Add(typeof(long[]), new CommaSeparatedLongArrayModelBinder());
and then the following controller action will be able to understand the previous URL:
public ActionResult Foo(long[] events, int page, int period, int recordsPerPage)
{
...
}
Manually generate this anchor:
abc
Try looking at WinTellect's PowerCollections, allows you to create a MultiDictionary, still can't have duplicate keys, but you can have multiple values per key.
You should write either extension methods that target the routeValue collection or a custom model binder that transforms your Event parameter into a list always. If you view Event always being a list, just a commonly length 1 list will alleviate most of the problems you face.
At this point you will just interact with a list interface. You could then write a custom binder to allow you to directly place that into the route correctly or you could unpack the list back into the query string. There's a software project based on this called Unbinder for unpacking objects into property/value pairs that you can easily use in query strings or other purposes.