raju
raju

Reputation: 209

asp.net css navigation bar

i want to create a css navigation bar for asp.net links.

<div> 
    @{
        foreach (LangViewModel langViewModel in Model.Langs)
        {
            <p>
                @Html.ActionLink(langViewModel.Name, "Lang", "Home", new { 
         langID = langViewModel.Id }, new { })
            </p>
        }
 </div>

this code generates 3 links which direct me to other pages of my website namely

Numbers
Alpha
Alphanumeric     

now i want have these 3 links generated by asp.net in navigation bar. i was using w3schools as reference. for this to work we need to use <ul> and <li>tags in following way with some css.

<ul>
<li><a class="active" href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
   <li><a href="#about">About</a></li>
</ul>

but my links are generated in ASP.NET code above so what should i write in so that could get a navigation bar.

<li><a class="active" href="WHAT SHOULD DO HERE">Home</a></li>

Upvotes: 0

Views: 1305

Answers (1)

Saineshwar Bageri - MVP
Saineshwar Bageri - MVP

Reputation: 4031

Model

public class Langs
{
    public int ID { get; set; }
    public string Name { get; set; }
}

Controller

public class DemoController : Controller
{
    public ActionResult Index()
    {
        List<Langs> lidemo = new List<Langs>();
        lidemo.Add(new Langs { ID = 1, Name = "Home" });
        lidemo.Add(new Langs { ID = 2, Name = "About Us" });
        lidemo.Add(new Langs { ID = 3, Name = "Contact" });
        lidemo.Add(new Langs { ID = 4, Name = "Page 1" });
        lidemo.Add(new Langs { ID = 5, Name = "Page 2" });
        return View(lidemo);
    }
}

View

View

Output

enter image description here

Link For Markup Link For Mark of Navigation Bars

Upvotes: 1

Related Questions