0

I am new to MVC and using MVC 2.0 in asp.net.

This is the content of stylesheet1.css:

.h1{color:Red;}

This is the content of display.aspx:

< head runat="server">
<## Heading ##link href="../../Content/StyleSheet1.css" rel="stylesheet" type="text/css" />
< /head> 
<## body>
<## h1 class="h1">Hiiiiiiiiiiiiiiiii  <## /h1>
<## /body>

This is the content of index.aspx:

##<%= Html.ActionLink("Move to display.aspx","display","home",new {id=1}, new 
{@class="h1"}) %>

##<%= Html.ActionLink("Move to display.aspx", "display")%>

My question is whats the use of htmlattributes argument over html.actionlink method because I found both the above link giving same result.

user983854
  • 51
  • 1
  • 7

3 Answers3

1

Problably your action link is rendering something like:

<a href="home/display/1" class="h1">Move to display.aspx</a>

<a href="display">Move to display.aspx</a>

The difference between them is the first one has a css class setted to the h1 style class (not the tag) going to the display action method on the home controller passing the 1 as a id parameter on the url. The second one is going to the display action method (if it is in a view of the home controller it will go to a display action method of the home controller) and it does not have any css class setted. Both action links are rendering a text as Move to display.aspx. The htmlAttributes on this case does not make difference if you does not have a css setted by h1 class.

What could you do

First, create a stylesheet with a valid name in your css file, something like this:

.display {
    color: blue;
    /* other css properties*/
}

In your view, render a link with this stylesheet setted on the class attribute:

<%=Html.ActionLink("Move To Display", "Display", "Home", new { id = 1 }, new { @class="display" }) %>

About htmlAttributes

htmlAttributes parameter is an object that contains the HTML attributes to set for the element. For sample, if you want to add a css class in your output link you could add this attribute by this parameter such as rel, title, tabindex, javascript events such as onclick etc.

You have a lot of overloads in Html.ActionLink method. You are not required to pass this parameter but if you need a overloads that has this parameter you can pass just null and nothing will be output in your html. If you do this:

@Html.ActionLink("Text Link", "Action", "Controller", new { id = 5 }, new { @class = "button", title = "Some Title Content", rel = "10" })

If will be the following signature method:

public static MvcHtmlString ActionLink(
    this HtmlHelper htmlHelper,
    string linkText,
    string actionName,
    Object routeValues,
    Object htmlAttributes
)

It will render

<a href="Controller/Action/5" class="button" title="Some Title Content" rel="10">Text Link</a>
Felipe Oriani
  • 37,948
  • 19
  • 131
  • 194
  • iam sorry but just not got what i want......anyways.....could u please tell me how to get content of display.aspx in blue color......i mean does this should work <%= Html.ActionLink("Move to display.aspx","display","home",new {id=1}, new {@class="h1",color="Blue"}) %> – user983854 Jan 03 '13 at 10:38
  • I edited my anwser. Take a look, I think you will not getting any difference between theses links rendered by the action link method. – Felipe Oriani Jan 03 '13 at 10:44
  • or this is only to add anchor tag attributes – user983854 Jan 03 '13 at 10:45
  • I edit again about what could you do. htmlAttributes like my anwser add in html output the attributes of the html like class, title, rel, etc, about the html tag not the server side. – Felipe Oriani Jan 03 '13 at 10:49
  • ok i tried to change the color of content of display.aspx with no success. This is the content of display.aspx
    hiiiiiiiiiiiiiiiii
    and in index.aspx i did <%= Html.ActionLink("Move to display.aspx", "display", "home", new { id = 1 }, new { @class = "display", color = "Green", title = "Some Title Content" })%> but color of content of display.aspx doesn't change instead color of anchor tag changes to green     – user983854 Jan 03 '13 at 10:57
  • pls tell me how to modify css class color parameter using htmlattributes of actionlink or even is this possible?? If this is then content of display.aspx should change to green – user983854 Jan 03 '13 at 10:59
  • There is no `color` valid attribute on the html anchor tag. That is the reason I saw to your create a css style and set it with the @class attribute. If you need to change the color, change on the css not in the tag. – Felipe Oriani Jan 03 '13 at 10:59
  • I think we are heading towards no mans land......pls read my question carefully becus i don't wana learn how to use htmlattributes as i already know it........anyways thanks for ur effor Man!! – user983854 Jan 03 '13 at 11:06
  • Ohhhhhh.........i just got it.....i was so silly with this.....thanks Felpi for bearing my stupidity(though i just started with this MVC) – user983854 Jan 03 '13 at 11:13
0

There are loads of articles on google if you do a search, such as the following:

Use CSS on Html.ActionLink

ActionLink htmlAttributes

MVC HTML Helpers

Hope these are of some use to you.

Community
  • 1
  • 1
Gaz Winter
  • 2,924
  • 2
  • 25
  • 47
  • i just wana know if we can get the result without using htmlattribute of html.actionlink method then why this is added in MVC framework and pls also read my question carefully ----@Gaz – user983854 Jan 03 '13 at 09:58
  • If u could see the content of index.aspx, there are two html.action method with different arguments and both are giving same result......so i just wana know whats the role of htmlattributes of html.action method...........it seems useless to me.........hope u'll get it know......@Gaz – user983854 Jan 03 '13 at 10:29
0

Your class h1 that you're assigning to the link is being overridden by the browser's default stylesheet. (Read up on css specificity if you want to get into the details of this).

All you need to do is change your css class definition to 

a.h1{color:Red;}

(note the a in front of the definition)

Now the text in this link:

<%= Html.ActionLink("Move to display.aspx","display","home",new {id=1}, new 
{@class="h1"}) %>

will be red.

Forty-Two
  • 7,535
  • 2
  • 37
  • 54