Load partial view into div

矫情吗；* 2022-09-17 13:17 12阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <a title="This question shows research effort; it is useful and clear" rel="nofollow"></a> 
     <span>8</span> 
     <a title="This question does not show any research effort; it is unclear or not useful" rel="nofollow">down vote</a> 
     <a title="This is a favorite question (click again to undo)" href="http://stackoverflow.com/questions/4557021/load-partial-view-into-div#" rel="nofollow">favorite</a> 
     <div> 
      <strong>9</strong> 
     </div> 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <p>I'm trying to load a partial view into a div from a calling view, however the partial view loads into a new page.&nbsp; There isn't much code to it and I've tried various ways from other posts, but it still loads into a new page. So I think I might be missing something fundamental.</p> 
      <p><strong>Controller</strong></p> 
      <pre><code><span>[</span><span>AcceptVerbs</span><span>(</span><span>HttpVerbs</span><span>.</span><span>Get</span><span>)]</span><span> </span><span>public</span><span> </span><span>ActionResult</span><span> </span><span>Index</span><span>()</span><span> </span><span>{ </span><span> </span><span>return</span><span> </span><span>View</span><span>();</span><span> </span><span>}</span><span> </span><span>public</span><span> </span><span>ActionResult</span><span> </span><span>Test</span><span>()</span><span> </span><span>{ </span><span> </span><span>return</span><span> </span><span>PartialView</span><span>(</span><span>"Test"</span><span>);</span><span> </span><span>}</span></code></pre> 
      <p><strong>View</strong></p> 
      <pre><code><span>&lt;script</span><span> </span><span>src</span><span>=</span><span>"../../Scripts/MicrosoftAjax.js"</span><span> </span><span>type</span><span>=</span><span>"text/javascript"</span><span>&gt;&lt;/script&gt;</span><span> </span><span>&lt;script</span><span> </span><span>src</span><span>=</span><span>"../../Scripts/MicrosoftMvcAjax.js"</span><span> </span><span>type</span><span>=</span><span>"text/javascript"</span><span>&gt;&lt;/script&gt;</span><span> @using (Ajax.BeginForm("Test", "Home", new AjaxOptions { InsertionMode=InsertionMode.Replace, UpdateTargetId = "mydiv" })) { @Ajax.ActionLink("Save", "Test", "Home", new AjaxOptions{ }); } </span><span>&lt;div</span><span> </span><span>id</span><span>=</span><span>"mydiv"</span><span>&gt;</span><span> @Html.Partial("Test") </span><span>&lt;/div&gt;</span></code></pre> 
      <p><strong>PartialView</strong> </p> 
      <pre><code><span>&lt;h1&gt;</span><span>Test</span><span>&lt;/h1&gt;</span></code></pre> 
     </div> 
     <div> 
      <a title="" href="http://stackoverflow.com/questions/tagged/ajax" rel="nofollow">ajax</a> 
      <a title="" href="http://stackoverflow.com/questions/tagged/asp.net-mvc" rel="nofollow"> asp.net-mvc</a>&nbsp;&nbsp;&nbsp;&nbsp; 
     </div> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <div> 
          <a title="short permalink to this question" href="http://stackoverflow.com/q/4557021" rel="nofollow">share</a> 
          <span>|</span> 
          <a title="" href="http://stackoverflow.com/posts/4557021/edit" rel="nofollow">improve this question</a> 
         </div> </td> 
        <td align="right"> 
         <div> 
          <div> 
           <a title="show all edits to this post" href="http://stackoverflow.com/posts/4557021/revisions" rel="nofollow">edited <span title="2012-12-12 23:25:19Z">Dec 12 '12 at 23:25</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          </div> 
          <div> 
           <a href="http://stackoverflow.com/users/577167/joulukuusi" rel="nofollow"></a> 
           <div> 
            <img width="32" height="32" alt="" src="https://www.gravatar.com/avatar/e158f6870fc872e1b22766bb1e21eea7?s=32&amp;d=identicon&amp;r=PG"> 
           </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          </div> 
          <div> 
           <a href="http://stackoverflow.com/users/577167/joulukuusi" rel="nofollow">Joulukuusi</a> 
           <br> 
           <span title="reputation score">1,763</span> 
           <span title="3 gold badges"><span></span><span>3</span></span> 
           <span title="11 silver badges"><span></span><span>11</span></span> 
           <span title="27 bronze badges"><span></span><span>27</span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          </div> 
         </div> </td> 
        <td> 
         <div> 
          <div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; asked 
           <span title="2010-12-29 19:10:00Z"> Dec 29 '10 at 19:10</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          </div> 
          <div> 
           <a href="http://stackoverflow.com/users/415394/user415394" rel="nofollow"></a> 
           <div> 
            <img width="32" height="32" alt="" src="https://www.gravatar.com/avatar/e567c772de37770c054c48f0088ba741?s=32&amp;d=identicon&amp;r=PG"> 
           </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          </div> 
          <div> 
           <a href="http://stackoverflow.com/users/415394/user415394" rel="nofollow">user415394</a> 
           <br> 
           <span title="reputation score">103</span> 
           <span title="2 gold badges"><span></span><span>2</span></span> 
           <span title="2 silver badges"><span></span><span>2</span></span> 
           <span title="7 bronze badges"><span></span><span>7</span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          </div> 
         </div> </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td> 
    <div> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <table> 
          <tbody> 
           <tr> 
            <td><span title="number of 'useful comment' votes received">1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> 
            <td>&nbsp;</td> 
           </tr> 
          </tbody> 
         </table> </td> 
        <td> 
         <div style="display:block"> 
          <span>accept one of the answer.</span> –&nbsp; 
          <a title="2200 reputation" href="http://stackoverflow.com/users/79379/floradu88" rel="nofollow"> Floradu88</a> 
          <span><a href="http://stackoverflow.com/questions/4557021/load-partial-view-into-div#comment14273504_4557021" rel="nofollow"><span title="2012-06-07 20:07:54Z">Jun 7 '12 at 20:07</span></a></span> 
         </div> </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> <a title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”." rel="nofollow"></a>&nbsp;&nbsp;&nbsp;&nbsp; </td> 
  </tr> 
 </tbody> 
</table>

## 4 Answers ##

[active][] [oldest][] [votes][]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> &nbsp;&nbsp;&nbsp;&nbsp; 
     <a title="This answer is useful" rel="nofollow"> up vote</a> 
     <span>20</span> 
     <a title="This answer is not useful" rel="nofollow">down vote</a> 
    </div> </td> 
   <td> 
    <div> 
     <p>Couple of remarks about your code:</p> 
     <ul> 
      <li><code>Ajax.*</code> helpers in ASP.NET MVC 3 RC2 no longer use MS AJAX which has been deprecated in favor of jQuery, so your script inclusions are wrong. You need to include jquery</li> 
      <li>You have an ajax form without a submit button and an ajax link inside this form. This makes no sense. Either use an ajax form or an ajax link.</li> 
     </ul> 
     <p>So your code might look something among the lines:</p> 
     <pre><code><span>&lt;script</span><span> </span><span>src</span><span>=</span><span>"@Url.Content("</span><span>~</span><span>/</span><span>scripts</span><span>/</span><span>jquery-1</span><span>.4.4.</span><span>js</span><span>")"</span><span> </span><span>type</span><span>=</span><span>"text/javascript"</span><span>&gt;&lt;/script&gt;</span><span> @Ajax.ActionLink("Save", "Test", "Home", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mydiv" }) </span><span>&lt;div</span><span> </span><span>id</span><span>=</span><span>"mydiv"</span><span>&gt;</span><span> @Html.Partial("Test") </span><span>&lt;/div&gt;</span></code></pre> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[active]: http://stackoverflow.com/questions/4557021/load-partial-view-into-div?answertab=active#tab-top
[oldest]: http://stackoverflow.com/questions/4557021/load-partial-view-into-div?answertab=oldest#tab-top
[votes]: http://stackoverflow.com/questions/4557021/load-partial-view-into-div?answertab=votes#tab-top