I am trying to create a menu using <ui><li></li></ui> tags. I am reading from an XML file and storing it in a List of(menu) object.
Menu Object:
Public Class MenuVM
#Region "Properties"
Public Property ID As Integer
Public Property Description As String
Public Property Comments As String
Public Property UserControlName As String
Public Property AssemblyName As String
Public Property ModelName As String
Public Property SortOrder As Integer
Public Property IsSelected As Boolean
#End Region
End Class
HomeController Class:
Public Class HomeController
Inherits System.Web.Mvc.Controller
Function Index() As ActionResult
Dim oMenuHelper As New MenuHelper
Return View("index", oMenuHelper.BuildMenu())
End Function
<HttpPost()> _
Function Index(ByVal iSelect As Integer) As ActionResult
Dim oMenuHelper As New MenuHelper
Return View("index", oMenuHelper.BuildMenu())
End Function
Function About() As ActionResult
Return View()
End Function
End Class
ASPX PAGE:
<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of List(OF MVCApp.MenuVM))" %>
<%@ Import Namespace ="MVCApp" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<div id="menu" class="block">
<% Using Html.BeginForm("Index", "Home")%>
<ul id="menuItems">
<% For Each item As MVCApp.MenuVM In Model%>
<li><%: Html.ActionLink(item.Description, "Index", "Home", New With {item.ID}, Nothing)%></li>
<%Next%>
</ul>
<% End Using %>
</div>
</asp:Content>
The output:

When You click on view source the output is as follow:
<!DOCTYPE html>
<html>
<head><title>
Home Page
</title><link href="Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ <a href="/Account/LogOn">Log On</a> ]
</div>
<div id="menucontainer">
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="menu" class="block">
<form action="/" method="post">
<ul id="menuItems">
<li><a href="/Home/Index/1">Ballot Language</a></li>
<li><a href="/Home/Index/2">Assisting Absentee Voter</a></li>
<li><a href="/Home/Index/3">Instructions</a></li>
<li><a href="/Home/Index/4">Ballot Questions</a></li>
</ul>
</form>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
ERROR: When I Click on the link I am getting following error:

Could any one help with it. My intension is to pass menu id to controller and load appropriate usercontrol. I cannot use Javascript or jquery in this project as user might have javascript disabled on machine.
You should remove “controller” word from the links. The url should be:”/Home/Index/1″.
To do so, modify the ActionLink code: