title: unable to open view in model popup mvc 3
body: <p>I want to render a view when user clicks on "Add New" button on the index page. I have an Action in the controller which handles Create post. Problem here is that i am not able to load the View. When i click "Add New" button, nothing happens. Can someone please point out what am i missing here?</p>
  
  <p>This is how my Index view looks like:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(function () {
          $('#dialog').dialog({
              autoOpen: false,
              width: 400,
              resizable: false,
              title: 'Add New Item',
              modal: true,
              open: function (event, ui) {
                  $(this).load('@Url.Action("Country/Create")');
              },
              buttons: {
                  "Close": function () {
                      $(this).dialog("close");
                  }
              }
          });
  
          $('#AddNew').click(function () {
              alert('Hello');
              $('#dialog').dialog('open');
          });
      });
  &lt;/script&gt;
  
  &lt;button id="AddNew" type="button"&gt;Add New&lt;/button&gt;
  
  &lt;div id="dialog" style="overflow: hidden;"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Script references:</p>
  
  <pre><code>&lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Layout.cshtml</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
  
  
      &lt;link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
      @RenderBody()
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>--Solution--</p>
  
  <p>I was missing jquery.ui.all.css reference.</p>
  
  <pre><code>&lt;link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" /&gt;
  </code></pre>