CODEWITHSUNDEEP
javascriptc#cssasp.net-mvcasp.net-mvc-4
Owais Ahmed
Owais Ahmed

Reputation: 1438

Asp.Net MVC overriding Class CSS

I have an H1 tag and inside that, there is anchor tag which is generating from the code 

<div class=".slide-title">
    <H1>    
    @RenderLinkTracking(m => m.btn, Model.bTnTitle)    
    </H1>
</div>

The RenderLinkTracking creates anchor tag 

<a href="/home/" data-id="Image Title<">Image Title</a>

CSS of the anchor tag is 

.slide-title a
{
color : red;
}

I am trying to override the CSS of the anchor tag. This is how I am doing and working fine 

<style>
@if (Model.Param.H1CSS!= null)
{
<text>
.slide-title a
  {
 @Html.RenderCSSAndJSAttributes(Model.Param.H1CSS).ToString().Replace("style=","")
  }
 </text>
}
</style>

The method Html.RenderCSSAndJSAttributes is generating a style color:#001595 !important;font-family:Book Antiqua !important;Text-align:10px;Text-align:Center Is there any better way to override the class CSS or append the inline CSS using jquery? Any suggestion would be appreciated.

Thanks in advance

Upvotes: 2

Views: 1197

Answers (2)

Hary
Hary

Reputation: 5818

Simple Solution is by creating another CSS Style for the anchor hierarchy .slide-title h1 a

.slide-title a
{
  color:#001595!important;
}

.slide-title h1 a
{
  color: green!important;
}
<div class="slide-title">
    <h1>    
    <a href="/home/" data-id="Image Title<">H1 Anchor</a>    
    </h1>
    
    <a href="/home/" data-id="Image Title<">Simple Anchor</a>
</div>

Upvotes: 0

Hossein
Hossein

Reputation: 3113

Change custom helper could look like this:

namespace System.Web.Mvc {
    public static class HtmlHelperExtensions {
        public static MvcHtmlString RenderLinkTracking(this HtmlHelper helper, string url, string linkText, string style) {
            //...
            return MvcHtmlString.Create(String.Format("<a href='{0}' style='{1}'>{2}</a>", url, style, linkText));
        }
    }
}

So You can pass style for each custom link like this:

<div class=".slide-title">
    <H1>    
    @RenderLinkTracking(m => m.btn,Model.yourUrl, Model.bTnTitle, Model.Param.H1CSS)    
    </H1>
</div>

Upvotes: 3

Related Questions