Error while loading Partial View based on the Tab selected on ASP.NET MVC page - asp.net-mvc

Question

I am new to MVC and trying to load a partial view based on the tab selected.
Here are the two tabs (Prodcuts and Doc Types) and
Two partial views (NavMenuProduct.ascx and NavMenuDocType.ascx).
The default page is: Index.aspx
My code is not loading the Partial view.
I would appreciate if someone has any code sample for this.
Here is the Javascript:
<script type="text/javascript">
$(function () {
var $tabs = $("#tabs").tabs({
select: function (e, ui) {
hdnTabSelected.value = ui.index;
alert(hdnTabSelected.value);
}
});
});
</script>
Html Code:
<table class="tableNoBorder" width="100%">
<!--Header Dashboard-->
<tr>
<td colspan="2">
<div id="container">
<h1>DocShare</h1>
<div id="welcome">Welcome, <%=new CacheUser().GetLoginUser().CommanName%></div>
</div>
</td>
</tr>
<!--Tabs Section for Products and DocType-->
<tr>
<td colspan=2>
<DIV id=tabs>
<UL>
<LI><A href="#" >Products</A></LI>
<LI>Doc Type</LI>
</DIV>
</td>
</tr>
<!--Left Menu Navigation and Main Content-->
<tr>
<td valign="top" width="200px">
<div >
<input type="hidden" id = "hdnTabSelected" runat="Server" />
<%-- If TabSelected = 0, load Product Menu, otherwise Load DocType Menu--%>
<%if (hdnTabSelected.Value == "0") %>
<% Html.RenderAction("NavMenuProduct","Home"); %>
<% else %>
<% Html.RenderAction("NavMenuDocType","Home"); %>
</div>
</td>
<td valign="top" width ="100%" >
<div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</div>
</td>
</tr>
</table>

Answer 1

What you look to be doing is a standard master page ... I would open up a file new MVC and look at how it does that with the home and about tabs ...
Master :
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
about
<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
About Us
</asp:Content>
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>About</h2>
<p>
Put content here.
</p>
</asp:Content>

Answer 2

Remove the runat="server" from the above hidden input. The problem is that the rendered html and the javascript are not matching.
This should work the first time the page loads, however the rendered id for the hidden input will look like ctl00$MainContent$hdnTabSelected which does not match hdnTabSelected.value in the javascript.
You could change the javascript to this, but I recommend against it
<script type="text/javascript">
$(function () {
var $tabs = $("#tabs").tabs({
select: function (e, ui) {
<%=hdnTabSelected.ClientID %>.value = ui.index;
alert(<%=hdnTabSelected.ClientID %>.value);
}
});
});
</script>

Answer 3

It isn't obvious what is wrong according to you question, but at the first glance I think you should replace your calls to Html.RenderAction to calls to Html.Action.
The difference between the two is that
Html.RenderAction will render the
result directly to the Response (which
is more efficient if the action
returns a large amount of HTML)
whereas Html.Action returns a string
with the result.
Haaked has a blog-post with more details.