ViewData 以红色突出显示但我认为是我的模型为空？

Question

我有这个最终会接受信用卡信息的剃须刀页面。 我有一个与剃刀页面相关的模型。 抛出错误

NullReferenceException：未将对象引用设置为对象的实例。 CreditCardEntry.cshtml 中的 AspNetCore.Views_PaymentPage_CreditCardEntry.ExecuteAsync()

@page
@model InTheCloud.Views.PaymentPage.CreditCardEntryModel;
**@{ ViewData["Title"] = "Home Page";}**

如您所见，ViewData 突出显示为问题。 我知道我可能以错误的方式混合使用 MVC 和 Razor Pages 技术，但不确定如何解决？

这是我的模型：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace InTheCloud.Views.PaymentPage
{
    [AllowAnonymous]
    public class CreditCardEntryModel : PageModel
    {
        public async Task OnGetAsync()
        {
            if (!string.IsNullOrEmpty(ErrorMessage))
            {
                ModelState.AddModelError(string.Empty, ErrorMessage);
            }

        }

        public CreditCardEntryModel()
        {

            Information = new Info()
            { 
            FirstName= "",
            LastName = "",
            AddressLine1 = "",
            AddressLine2 = "",
            City = "",
            State = "",
            Zip = "",
            CCNumber = "",
            CCExpiDate = "",
            CVCCode = ""
            };

    }

        [BindProperty]
        public Info Information { get; set; }

        [TempData]
        public string ErrorMessage { get; set; }

        public class Info
        {
            [Required]
            public String FirstName { get; set; }

            [Required]
            public String LastName { get; set; }

            public String AddressLine1 { get; set; }

            public String AddressLine2 { get; set; }

            public String City { get; set; }

            public String State { get; set; }

            public String Zip { get; set; }

            public String CCNumber { get; set; }

            public String CCExpiDate { get; set; }

            public String CVCCode { get; set; }

        }

        public IEnumerable<SelectListItem> StatesList
        {
            get
            {
                return new List<SelectListItem>
                {
                    new SelectListItem { Text = "Alabama", Value = "Alabama"},
                    new SelectListItem { Text = "Alaska", Value = "Alaska"},
                    new SelectListItem { Text = "Arizona", Value = "Arkansas"},
                    new SelectListItem { Text = "California", Value = "California"},
                    new SelectListItem { Text = "Colorado", Value = "Colorado"},
                    new SelectListItem { Text = "Conneticut", Value = "Conneticut"},
                    new SelectListItem { Text = "Delaware", Value = "Delaware"},
                    new SelectListItem { Text = "District of Columbia", Value = "District of Columbia"},
                    new SelectListItem { Text = "Florida", Value = "Florida"},
                    new SelectListItem { Text = "Georgia", Value = "Georgia"},
                    new SelectListItem { Text = "Hawaii", Value = "Hawaii"},
                    new SelectListItem { Text = "Idaho", Value = "Idaho"},
                    new SelectListItem { Text = "Illinois", Value = "Illinois"},
                    new SelectListItem { Text = "Indiana", Value = "Indiana"},
                    new SelectListItem { Text = "Iowa", Value = "Iowa"},
                    new SelectListItem { Text = "Kansas", Value = "Kansas"},
                    new SelectListItem { Text = "Kentucky", Value = "Kentucky"},
                    new SelectListItem { Text = "Louisiana", Value = "Louisiana"},
                    new SelectListItem { Text = "Maine", Value = "Maine"},
                    new SelectListItem { Text = "Maryland", Value = "Maryland"},
                    new SelectListItem { Text = "Massachusetts", Value = "Massachusetts"},
                    new SelectListItem { Text = "Michigan", Value = "Michigan"},
                    new SelectListItem { Text = "Minnesota", Value = "Minnesota"},
                    new SelectListItem { Text = "Missisippi", Value = "Arkansas"},
                    new SelectListItem { Text = "Missouri", Value = "Missouri"},
                    new SelectListItem { Text = "Montana", Value = "Montana"},
                    new SelectListItem { Text = "Nebraska", Value = "Nebraska"},
                    new SelectListItem { Text = "Nevada", Value = "Nevada"},
                    new SelectListItem { Text = "New Hampshire", Value = "New Jersey"},
                    new SelectListItem { Text = "New Mexico", Value = "New Mexico"},
                    new SelectListItem { Text = "New York", Value = "New York"},
                    new SelectListItem { Text = "North Carolina", Value = "North Carolina"},
                    new SelectListItem { Text = "North Dakota", Value = "North Dakota"},
                    new SelectListItem { Text = "Ohio", Value = "Ohio"},
                    new SelectListItem { Text = "Oklahoma", Value = "Oklahoma"},
                    new SelectListItem { Text = "Oregon", Value = "Oregon"},
                    new SelectListItem { Text = "Pennsylvania", Value = "Pennsylvania"},
                    new SelectListItem { Text = "Rhode Island", Value = "Rhode Island"},
                    new SelectListItem { Text = "South Carolina", Value = "South Carolina"},
                    new SelectListItem { Text = "South Dakota", Value = "South Dakota"},
                    new SelectListItem { Text = "Tennessee", Value = "Tennessee"},
                    new SelectListItem { Text = "Texas", Value = "Texas"},
                    new SelectListItem { Text = "Utah", Value = "Utah"},
                    new SelectListItem { Text = "Vermont", Value = "Vermont"},
                    new SelectListItem { Text = "Virginia", Value = "Virginia"},
                    new SelectListItem { Text = "Washington", Value = "Washington"},
                    new SelectListItem { Text = "West Virginia", Value = "West Virginia"},
                    new SelectListItem { Text = "Wisconsin", Value = "Wisconsin"},
                    new SelectListItem { Text = "Wyoming", Value = "Wyoming"}

                };
            }
        }

        public async Task<IActionResult> AsyncOnPost(Info CreditCardEntryInfo)
        {
            if (ModelState.IsValid)
            {
                ModelState.AddModelError("Information.FirstName", "Invalid login");
                Console.Out.Write("Model is fine!");
                return Page();
            }

            return Page();
        }



    }
}

而且，这是我的 Razor 页面：

@page
@model InTheCloud.Views.PaymentPage.CreditCardEntryModel;
@{ ViewData["Title"] = "Home Page";}

<head>
    <link rel="stylesheet" type="text/css" href="~/css/indexstylesheet.css">
</head>
<div class="row">
    <div class="col" style="border-right:solid; border-right-width:thin; border-right-color:lightgray; width: 20%;">
        <div class="salesitems">
            <span style="font-family:cursive; font-size:xx-large;">$0.99</span> <span style="font-family:cursive; font-size:x-large;">/mo.</span><br />
            <div style="background-color:#fecc06;" width="100%"><span style="font-family:cursive ;font-size:xx-large; color:white;">50 GB</span></div>
            <div style="text-align: left !important; padding-left:5pt; padding-right:5pt; min-height:133pt;">
                <span style="text-align:left; font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif">
                    -Optional File Encryption<br />
                    -Secure File Transfers<br />
                    -Apps for Access from any Device<br />
                    -Simplest to Use<br />
                    -Redundancy for Data Recovery
                </span>
            </div>
            <div style="position:absolute; height:40pt; padding-top:4pt; width:100%; background-color:lightgray; font-family:cursive; font-size:xx-large; text-align:center; color:black; border-bottom-left-radius:5pt; border-bottom-right-radius:5pt;">Choose</div>
        </div>
    </div>
    <div class="col" style="margin: 10pt;">
        <form method="post" id="Information">
            <div class="form-group row">
                <label asp-for="Information.FirstName" class="col-sm-2 col-form-label"></label>
                <div class="col-sm-10">
                    <input asp-for="Information.FirstName" class="form-control" />
                </div>
                <div class="col-sm-10">
                    <span asp-validation-for="Information.FirstName" class="text-danger">Hello</span>
                </div>
            </div>
            <div class="form-group row">
                <label asp-for="Information.LastName" class="col-sm-2 col-form-label">Last Name</label>
                <div class="col-sm-10">
                    <input asp-for="Information.LastName" class="form-control" placeholder="Last" />
                </div>
            </div>
            <div class="form-group row">
                <label asp-for="Information.AddressLine1" class="col-sm-2 col-form-label">Street</label>
                <div class="col-sm-10">
                    <input asp-for="Information.AddressLine1" class="form-control" placeholder="Street and Number" /><br />
                    <input asp-for="Information.AddressLine2" class="form-control" placeholder="" />
                </div>
            </div>
            <div class="form-group row">
                <label asp-for="Information.City" class="col-sm-2 col-form-label">City</label>
                <div class="col-sm-10">
                    <input asp-for="Information.City" class="form-control" placeholder="City" />
                </div>
            </div>
            <div class="form-group row">
                <label asp-for="Information.State" class="col-sm-2 col-form-label">State</label>
                <div class="col-sm-10">
                    @Html.DropDownListFor(model => model.Information.State, Model.StatesList, new { @class = "form-control" });

                </div>
            </div>
            <div class="form-group row">
                <label asp-for="Information.CCNumber" class="col-sm-2 col-form-label">Credit Card Number</label>
                <div class="col-sm-10">
                    <input asp-for="Information.CCNumber" class="form-control" placeholder="Card Number" />
                </div>
            </div>
            <div class="form-group row">
                <label asp-for="Information.CCExpiDate" class="col-sm-2 col-form-label">Expiration Date</label>
                <div class="col-sm-10">
                    <input asp-for="Information.CCExpiDate" class="form-control" placeholder="mm/yy" />
                </div>
            </div>
            <div class="form-group row">
                <label asp-for="Information.CVCCode" class="col-sm-2 col-form-label">CVC</label>
                <div class="col-sm-10">
                    <input asp-for="Information.CVCCode" class="form-control" placeholder="CVC" />
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label"></label>
                <div class="col-sm-10">
                    <button type="submit" class="btn primary-btn">submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

请让我知道我做错了什么。

Answer 1

我想到了！ 我认为这是我的方法有点时髦。 我将页面重新设计到一个包含 @section Scripts { } 的新区域中以执行验证并严格保持 Razor Pages 并且一切正常。 页面（），而不是视图（）。 事实证明，客户端验证需要 jQuery 不显眼的验证器文件才能运行，该文件可以在 _ValidationScriptPartial 中找到。 谢谢！