title: Jquery Mobile - MVC call dialog box
body: <p>I have the following code. What I am doing is to show data and then I have a delete button.
   I cannot get the jquery dialog box to come up. I am not sure what I am doing wrong.</p>
  
  <pre><code>    @model data_Input
  
      &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.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  
  
      &lt;div data-role="page" data-theme="b"&gt;
       &lt;div id="main" data-role="content"&gt;   
  
        &lt;div style = "padding-bottom: 10px; padding-top: 20px" class="editor-label"&gt;
           @Html.Label("Type"):  @Html.DisplayFor(m =&gt; m.data_Name) 
        &lt;/div&gt;
  
        &lt;div class="editor-label"&gt;
          @Html.Label("Value"): @Html.DisplayFor(m =&gt; m.Date) 
        &lt;/div&gt;
  
        &lt;p&gt;
  
          &lt;a href="#dialog" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop"&gt;Open dialog&lt;/a&gt;
        &lt;/p&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
  
       &lt;!-- Start of second page --&gt;
      &lt;div data-role="page" id="dialog"&gt;
       &lt;div data-role="header"&gt;
        &lt;h1&gt;
          Bar
        &lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
      &lt;div data-role="content"&gt;
       &lt;p&gt;
          I'm second in the source order so I'm not shown as the page initally.
       &lt;/p&gt;
       &lt;p&gt;
          &lt;a href="#foo"&gt;Back to foo&lt;/a&gt;
       &lt;/p&gt;
      &lt;/div&gt;&lt;!-- /content --&gt;
      &lt;div data-role="footer"&gt;
      &lt;h4&gt;
          Page Footer
      &lt;/h4&gt;
  &lt;/div&gt;&lt;!-- /footer --&gt;
  </code></pre>
  
  <p></p>