如何使用 Asp.Net Razor 在按钮单击时呈现部分视图

Question

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

这是我的 PartialView: _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 监控 onclick 事件的 Button：

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

然后On-Click我希望在这个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共享页面移动到Shared文件夹内Pages文件夹。

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

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

   OnGetPartialProject 方法会喜欢：

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