title: How To Render A PartialView On ButtonClick with Asp.Net Razor
body: <p>I am new to Jquery and creating partial views. I have a "Create Project" button where I am trying to make it so that if the user clicks it the page renders a partial view that contains a form post inside a  where the user can input data and can execute OnPost() in the code behind the razor page.  </p>
  
  <p>Here is my <strong>PartialView:</strong> _CreateProject.cshtml</p>
  
  <pre><code>@page
  @model Visportfolio.Pages.CreatePortfolioModel
  @*
      For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
  *@
  
  
      &lt;form enctype="multipart/form-data" method="post" id="partial"&gt;
  
  
          &lt;label asp-for="Category"&gt;Category:  &lt;/label&gt;
          &lt;select asp-for="Category" asp-items="Model.categorylist"&gt;
              &lt;option value=""&gt;---Select Category---&lt;/option&gt;
          &lt;/select&gt;
  
  
          &lt;label asp-for="SubCategoryId"&gt;Subcategory:&lt;/label&gt;
          &lt;select asp-for="SubCategoryId"&gt;&lt;option value=""&gt;---Select Subcategory---&lt;/option&gt;&lt;/select&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;label asp-for="ProjectName"&gt;&lt;/label&gt;
                  &lt;input asp-for="ProjectName" class="form-control" /&gt;
                  &lt;span class="alert-danger" asp-validation-for="ProjectName"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;label asp-for="ProjectDescription"&gt;&lt;/label&gt;
                  &lt;input asp-for="ProjectDescription" class="form-control" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="for-group-row"&gt;
              &lt;label asp-for="FileUpload" class="col-sm-2 col-form-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;div class="custom-file"&gt;
                      &lt;input asp-for="FileUpload" class="form-control custom-file-input" /&gt;
                      &lt;label class="custom-file-label"&gt;Choose File&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group row"&gt;
              &lt;div class="col-sm-10"&gt;
                  &lt;button type="submit" class="btn btn-primary"&gt;Create&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>This is the <strong>Button</strong> that I monitor onclick event with jquery:</p>
  
  <pre><code>&lt;button class="btn btn-default" id="call_partial"&gt;New Project&lt;/button&gt;
  
  </code></pre>
  
  <p>Then <strong>On-Click</strong> I want the partial view to be rendered within this div:</p>
  
  <pre><code>&lt;div id="partial"&gt;
          //the form post from partial here
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Jquery</strong> that checks for on-click</p>
  
  <pre><code>$('#call_partial').click(function () {
                          $('#partial').load("~/Pages/Portfolio/CreatePortfolio/OnGetPartialProject");
                      });
  </code></pre>
  
  <p>Note: I have also tried: @Html.Raw(Url.Action("OnGetPartialProject")) instead of what is in the parameter for load() above.</p>
  
  <p>Finally, this is the method where I try to render the partial view</p>
  
  <pre><code>public IActionResult OnGetPartialProject()
          {
              return Partial("~/Pages/Portfolio/_CreateProject.cshtml");
          }
  </code></pre>
  
  <p>I have tried to follow examples that use MVC and tried to manipulate it with Razor but I am unsure what to fix.  I know that the Jquery isn't calling the handler method that is supposed to render the partial view because the breakpoint that I have placed there is never reached.  Therefore it leaves me to believe that the Jquery is incorrect but am unsure why. If after fixing that would the rest of the syntax for calling a partial view that I have made here work for my scenario of loading that partial view into the  with id="partial" ?</p>