Jquery Dialog does not open on mvc3 application - asp.net-mvc-3

Question

I have a simple application on mvc3 with razor before i Open the dialog I tried to open an "alert" and it works correctly so function its working on the event but when i comment this alert and
try to open the dialog it just does not work
#model MvcApplication1.Models.LogOnModel
#{
ViewBag.Title = "Create";
}
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<h2>Index</h2>
<script type="text/javascript">
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#contactForm').submit(function (e) {
//alert("entro a funcion");
e.preventDefault();
$('#dialog').dialog('open');
});
});
</script>
#using (Html.BeginForm("Index", "Infracciones", FormMethod.Post, new { id = "contactForm"}))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Infraccion</legend>
</fieldset>
<p>
<input value="Guardar" type="submit" name = "button"/>
</p>
}

Answer 1

You only need to add this:
<div id="dialog">
In the body.

Answer 2

try:
$('#dialog').dialog();
instead of
$('#dialog').dialog('open');