在 Net Core 3.1 MVC 中的多个选项卡上使用表单

Question

在我的 Net Core 3.1 MVC 项目中，我希望在一个页面上创建两个选项卡，每个选项卡上都有一个用于编辑数据的表单。做到这一点的最佳方法是什么？最好使用延迟加载，以便在选项卡处于活动状态时加载表单数据。

我尝试过使用 Pages 和 PartialViews 但这不能正常工作，现在我想知道在 Net Core MVC 中是否有一种直接的方法来实现这一点。

到目前为止我的代码：

basicprofile.cshtml

@page
@model VideoGallery.Presentation.Pages.Account.BasicUserProfile.InputModel
@{
}
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="basicprofile-tab" data-toggle="tab" href="#basicprofile" aria-controls="basic" aria-selected="true">Account</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="extendedprofile-tab" data-toggle="tab" href="#extendedprofile" aria-controls="extended" aria-selected="false">Profile</a>
    </li>
</ul>
<div class="tab-content p-3 border-right border-left">
    <div class="tab-pane fade show active" id="basicprofile" role="tabpanel" aria-labelledby="basicprofile-tab">
        
    </div>
    <div class="tab-pane fade" id="extendedprofile" role="tabpanel" aria-labelledby="extendedprofile-tab"></div>
</div>

@section scripts{
    <script>
        var basicprofileLoaded = false;
        var extendedprofileLoaded = false;
        console.log("active");
        $(function () {
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                switch ($(e.target).attr('aria-controls')) {

                    case "basic":
                        if (!basicprofileLoaded) {
                            $('#basicprofile').load("@Url.Page("basicuserprofile", pageHandler:"PartialForm" )");
                            basicprofileLoaded = true;
                        }
                        break;
                    case "extended":
                        if (!extendedprofileLoaded) {
                            console.log("inside switch/ IF extended part");
                            $('#extendedprofile').load('/account/extendedprofile')
                            ordersLoaded = true;
                        }
                        break;
                }
            });
        });
    </script>
}

基本用户配置文件.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System;
using System.ComponentModel.DataAnnotations;
using System.Threading.Tasks;
using VideoGallery.Presentation.Services;

namespace VideoGallery.Presentation.Pages.Account
{
    public class BasicUserProfile : PageModel
    {

        [BindProperty]
        public InputModel Input { get; set; }

        public class InputModel
        {
            public string LoginName { get; set; }

            public string Password { get; set; }

        }
        
        // both methods don't even get called, even when the page renders with an empty form.
        public async Task<IActionResult> OnGetAsync()
        {
            Input.Password = "test inpu";
            Input.LoginName = "other input";
            return Page();
        }

        public async Task<PartialViewResult> OnGetPartialForm()
        {
            Input.LoginName = "some name";    
            return Partial("_BasicProfilePartial", Input);
        }
    }
}

我有几个问题：

1. 我的处理程序 OnGet() 和 OnGetPartialForm() 没有被触发。断点不会被击中。
2. 在加载 BasicUserProfile 页面时，基本选项卡应该处于活动状态，并在第一个选项卡上显示表单。它具有活动类，但未加载数据。
3. BasicProfile 选项卡加载整个 Page 对象，在我单击基本选项卡后（例如，当我在扩展选项卡上时）。它会加载整个页面，尽管没有命中任何后端断点。

我想做的事： 在加载初始页面时，应加载第一个选项卡（加载时激活）的表单数据，无论是否有数据。然后，如果用户切换到第二个选项卡，则该表单数据应加载并显示在第二个选项卡下。显然，稍后，我想通过 post 请求处理数据。

Answer 1

我的处理程序 OnGet() 和 OnGetPartialForm() 没有被触发。断点不会被击中。

那是因为你使用了@model VideoGallery.Presentation.Pages.Account.BasicUserProfile.InputModel ，它不是PageModel。

改为：

@page
@model VideoGallery.Presentation.Pages.Account.BasicUserProfile

<input asp-for="Input.Password" />
<input asp-for="Input.LoginName" />

$('#basicprofile').load("@Url.Page("basicuserprofile", pageHandler:"PartialForm" )");

确保 url 已成功呈现。您可以按F12 并单击Sources 面板在浏览器中查看js 源。在您的场景中，它似乎是：$('#basicprofile').load("@Url.Page("/Account/basicuserprofile", pageHandler:"PartialForm" )");。

[绑定属性] 公共 InputModel 输入 { 获取；放; }

需要记得初始化InputModel，否则点击Input.Password = "test inpu";会报错：

[BindProperty]
public InputModel Input { get; set; } = new InputModel();