I am using nested master pages, which may or may not cause the problem here. My view looks like this;
<asp:Content ID="Content2" ContentPlaceHolderID="AdminAccountsContent" runat="server">
<% using (Html.BeginForm())
{%>
<h3>Christmas Shutdown Administration</h3>
<p>Before entering the Christmas shutdown dates, make sure you have entered in the Christmas bank holidays.</p>
<p>Select the year: <%: Html.DropDownListFor(model => model.SelectedYear, Model.YearList)%></p>
<fieldset>
<legend>Enter the Christmas Shutdown dates here:</legend>
<table>
<tr>
<th>Date</th>
<th>Day</th>
<th>Shutdown?</th>
</tr>
<% foreach (var christmasDate in Model.ChristmasShutdownList)
{ %>
<% Html.RenderPartial("ChristmasShutdownSummary", christmasDate); %>
<% } %>
<tr>
<td align="center" colspan="3" style="padding-top:20px;">
<input type="submit" value="Create" />
</td>
</tr>
</table>
</fieldset>
<% } %>
<script language="javascript" type="text/javascript">
$(function () {
$("#SelectedYear").change(function () {
var year = $("#SelectedYear").val();
$("#wholepage").load("/ChristmasShutdown/Create/" + year);
});
});
</script>
</asp:Content>
The drop down list is in the second paragraph. The div #wholepage is defined in the main master page;
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js" type="text/javascript" language="javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/overcast/jquery-ui.css"
type="text/css" rel="Stylesheet" class="ui-theme" />
<%-- <script src="../../Scripts/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>--%>
<script type="text/javascript">
$(function () {
$(".datePicker").datepicker({ showOn: 'both', dateFormat: 'dd/mm/yy' });
});
</script>
</head>
<body>
<div class="page" id="wholepage">
<div id="header">
<div id="title">
<h1>Staff Holiday Planner (SHP)</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<% Html.RenderPartial("MenuItems"); %>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</di
v>
The nested master page is as follows;
<%@ Master Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewMasterPage" %>
<asp:Content ID="TitleContent1" ContentPlaceHolderID="TitleContent" runat="server">
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
<div id="adminAccounts">
<table>
<tr>
<td> <% Html.RenderPartial("AdminAccountsMenu"); %></td>
<td><asp:ContentPlaceHolder ID="AdminAccountsContent" runat="server" /></td>
</tr>
</table></div>
</asp:Content>
So why is it when I change the selection in the drop down list that the page jumps to the right? How do I stop it?