MVC3 Razor script reloading issue even with unobtrusive - asp.net-mvc-3

Question

Even using the unobtrusive ajax library, the scripts loaded into this page from the _Login.cshtml file are loaded when the form is submitted and I do not know how to prevent this. An even stranger effect is when an onclick event is applied to any element, when the form is submitted the script gets executed by the number of times the element was clicked.
Edit
On further testing, I realized that the unobtrusive ajax library basically re-loads the whole page inside the UpdateTargetId element, which is VERY counterproductive. This means if I submit the page 4 times, the page is loaded subsequently within each UpdateTargetId element, on each page within the page. What am I doing wrong? Is that what it's supposed to do?
#using MinervaMvc.App_Data
#model MinervaMvc.Models.LogOnModel
#{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Login.cshtml";
}
<div id="loginContainer">
<h2>
Login</h2>
<div id="loginForm">
#{Html.EnableClientValidation();}
#using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST" }))
{
<table style="margin: 0px auto;">
<tr>
<td>
#Html.LabelFor(m => m.ServerName, new { #class = "label" })
</td>
<td>
#Html.TextBoxFor(m => m.ServerName, new { #class = "text" })
</td>
</tr>
<tr>
<td align='right'>
#Html.LabelFor(m => m.UserName, new { #class = "label" })
</td>
<td>
#Html.TextBoxFor(m => m.UserName, new { #class = "text" })
</td>
</tr>
<tr>
<td align='right'>
#Html.LabelFor(m => m.Password, new { #class = "label" })
</td>
<td>
#Html.PasswordFor(m => m.Password, new { #class = "text" })
</td>
</tr>
<tr>
<td align="right" colspan="2">
<div id='errorShade' class='shade'>
<div id='errorBox'>Password or Username is incorrect. Please try again.</div>
</div>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<div id='loginShade' class='shade'>
<input type='submit' class='button' id='btn' value='Login' /></div>
</td>
</tr>
</table>
<div id='ajaxUpdate' style='position: absolute; visibility: hidden;'>
#{if (ViewBag.Failed != null && ViewBag.Failed)
{
<script type="text/javascript">
pulseState.stopPluse = true;
hideShowLogin(true, 'errorShade', 20);
hideShowLogin(false, 'loginShade', 33);
</script>
}}
</div>
}
</div>
</div>
<br />
<div id="copywrite">
#{ Html.RenderPartial("Copyright"); }
</div>

Answer 1

First things first you don't need the following line:
#{Html.EnableClientValidation();}
Simply enable client validation in your web.config (should be by default):
<appSettings>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
<add key="ClientValidationEnabled" value="true"/>
</appSettings>
Then make sure that you have included the following script into your page:
jquery-1.5.1.js
jquery.validate.js
jquery.validate.unobtrusive.js
jquery.unobtrusive-ajax.js (this is for all the Ajax.* helpers to work, it has nothing to do with validation)
As far as the whole page reloading is concerned, when you specify an UpdateTargetId element in the AJAX options, this element is updated with the results of the AJAX request returned by the server (often a partial).