如何在按钮上渲染部分视图使用 Asp.Net 剃须刀单击

Question

我是Jquery的新手，正在创建部分视图。我有一个"创建项目"按钮，我正在尝试制作它，以便如果用户单击它，页面会呈现一个部分视图，其中包含一个表单帖子，用户可以在其中输入数据并可以在 razor 页面后面的代码中执行 OnPost((。

这是我的部分视图：_CreateProject.cshtml

@page
@model Visportfolio.Pages.CreatePortfolioModel
@*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@

<form enctype="multipart/form-data" method="post" id="partial">

<label asp-for="Category">Category:  </label>
<select asp-for="Category" asp-items="Model.categorylist">
<option value="">---Select Category---</option>
</select>

<label asp-for="SubCategoryId">Subcategory:</label>
<select asp-for="SubCategoryId"><option value="">---Select Subcategory---</option></select>
<div class="row">
<div class="col-md-4">
<label asp-for="ProjectName"></label>
<input asp-for="ProjectName" class="form-control" />
<span class="alert-danger" asp-validation-for="ProjectName"></span>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label asp-for="ProjectDescription"></label>
<input asp-for="ProjectDescription" class="form-control" />
</div>
</div>
<div class="for-group-row">
<label asp-for="FileUpload" class="col-sm-2 col-form-label"></label>
<div class="col-md-4">
<div class="custom-file">
<input asp-for="FileUpload" class="form-control custom-file-input" />
<label class="custom-file-label">Choose File</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Create</button>
</div>
</div>
</form>

这是我使用 jquery 监视点击事件的按钮：

<button class="btn btn-default" id="call_partial">New Project</button>

然后单击我希望在此div中呈现部分视图：

<div id="partial">
//the form post from partial here
</div>

检查点击的Jquery

$('#call_partial').click(function () {
$('#partial').load("~/Pages/Portfolio/CreatePortfolio/OnGetPartialProject");
});

注意：我也尝试过：@Html.Raw(Url.Action("OnGetPartialProject"((，而不是上面 load(( 参数中的内容。

最后，这是我尝试呈现部分视图的方法

public IActionResult OnGetPartialProject()
{
return Partial("~/Pages/Portfolio/_CreateProject.cshtml");
}

我试图遵循使用 MVC 的示例并尝试使用 Razor 对其进行操作，但我不确定要解决什么。 我知道 Jquery 没有调用应该呈现分部视图的处理程序方法，因为我在那里放置的断点从未到达。 因此，它让我相信Jquery是不正确的，但不确定为什么。如果在修复后，我在此处调用分部视图的其余语法是否适用于我将该分部视图加载到 id="partial "中的场景？

Answer 1

请尝试以下步骤：

1. _CreateProject.cshtml共享页面移动到Pages文件夹中Shared文件夹。

2. 假设您在Pages文件夹中Portfolio文件夹，并且其中有CreatePortfolio.cshtml页面。将您的 jquery 网址修改为 ：

   $('#call_partial').click(function () {
   $('#partial').load("/Portfolio/CreatePortfolio?handler=PartialProject");
   });
   

   OnGetPartialProject方法如下所示：

   public IActionResult OnGetPartialProject()
   {
   return Partial("_CreateProject");
   }