asp.net css navigation bar

Question

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>

Change your div and p tag to use ul and li. What is the problem you are having ? — Shyju
– Shyju, Commented Oct 30, 2017 at 1:36
what should i do in href tag i cannot keep a link as my links are dynamic — raju
– raju, Commented Oct 30, 2017 at 3:12

Saineshwar Bageri - MVP · Accepted Answer · 2017-10-30 06:29:53Z

1

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

Output

Link For Markup Link For Mark of Navigation Bars

answered Oct 30, 2017 at 6:29

Saineshwar Bageri - MVP

4,0317 gold badges46 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

asp.net css navigation bar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related