如何从index.cshtml向包含List<Point>的Graf类中添加Point对象？

首先得确认你的Graf类和Point类的基础定义，我先假设它们大概是这样的（如果你的结构不同，调整即可）：

public class Graf
{
    // 一定要初始化列表，避免空引用异常！
    public List<Point> Points { get; set; } = new List<Point>();
}

public class Point
{
    public int X { get; set; }
    public int Y { get; set; }
}

接下来分几种常见场景给你具体实现方式：

1. 服务器端直接添加（页面加载/后台逻辑中） #

如果只是在页面的服务器端代码里直接生成并添加Point，直接在Razor的@code块或者页面顶部的代码段里操作就行：

@page
@{
    // 创建Graf实例
    var myGraf = new Graf();
    // 添加一个Point对象
    myGraf.Points.Add(new Point { X = 15, Y = 30 });
}

<!-- 验证结果，在页面上显示点数 -->
<p>Graf中当前有 @myGraf.Points.Count 个Point对象</p>

@code {
    // 这里可以定义Graf和Point类，或者引用外部类库中的定义
    public class Graf
    {
        public List<Point> Points { get; set; } = new List<Point>();
    }

    public class Point
    {
        public int X { get; set; }
        public int Y { get; set; }
    }
}

2. 通过表单提交添加（用户输入后提交到服务器） #

如果需要用户输入X/Y坐标，提交后添加到Graf实例（并在页面上展示），可以用Razor Pages的Model绑定来实现：

@page
@model IndexModel

<form method="post">
    <div>
        <label>X坐标：</label>
        <input type="number" asp-for="NewPoint.X" required />
    </div>
    <div>
        <label>Y坐标：</label>
        <input type="number" asp-for="NewPoint.Y" required />
    </div>
    <button type="submit">添加Point</button>
</form>

<h3>已添加的Point列表</h3>
<ul>
    @foreach (var point in Model.MyGraf.Points)
    {
        <li>X: @point.X, Y: @point.Y</li>
    }
</ul>

@code {
    // 用BindProperty让表单数据自动绑定到属性
    [BindProperty]
    public Graf MyGraf { get; set; } = new Graf();

    [BindProperty]
    public Point NewPoint { get; set; } = new Point();

    // 处理表单POST请求
    public void OnPost()
    {
        if (ModelState.IsValid)
        {
            MyGraf.Points.Add(NewPoint);
            // 如果你需要持久化这个Graf实例（比如页面刷新后不丢失），可以存到Session或数据库
            // 示例：存到Session
            HttpContext.Session.Set<Graf>("StoredGraf", MyGraf);
        }
    }

    // 页面加载时从Session恢复Graf实例（可选）
    public void OnGet()
    {
        MyGraf = HttpContext.Session.Get<Graf>("StoredGraf") ?? new Graf();
    }

    public class Graf
    {
        public List<Point> Points { get; set; } = new List<Point>();
    }

    public class Point
    {
        public int X { get; set; }
        public int Y { get; set; }
    }
}

3. 客户端无刷新添加（结合JavaScript） #

如果想要用户点击按钮后无需刷新页面就添加Point，同时同步到服务器，可以用JavaScript + Fetch API实现：

@page
@model IndexModel

<div>
    <input type="number" id="xInput" placeholder="输入X坐标" />
    <input type="number" id="yInput" placeholder="输入Y坐标" />
    <button onclick="addPoint()">添加Point</button>
</div>

<h3>客户端展示的Point列表</h3>
<ul id="pointList"></ul>

<script>
    // 客户端模拟Graf结构
    let clientGraf = { points: [] };

    function addPoint() {
        const x = parseInt(document.getElementById('xInput').value);
        const y = parseInt(document.getElementById('yInput').value);
        
        // 验证输入有效性
        if (!isNaN(x) && !isNaN(y)) {
            const newPoint = { X: x, Y: y };
            // 添加到客户端Graf
            clientGraf.points.push(newPoint);
            
            // 更新页面显示
            const listItem = document.createElement('li');
            listItem.textContent = `X: ${x}, Y: ${y}`;
            document.getElementById('pointList').appendChild(listItem);
            
            // 同步到服务器（可选）
            fetch('/Index', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(newPoint)
            })
            .then(response => response.ok)
            .catch(err => console.error('同步到服务器失败：', err));
            
            // 清空输入框
            document.getElementById('xInput').value = '';
            document.getElementById('yInput').value = '';
        }
    }
</script>

@code {
    public class Graf
    {
        public List<Point> Points { get; set; } = new List<Point>();
    }

    public class Point
    {
        public int X { get; set; }
        public int Y { get; set; }
    }

    // 处理客户端的POST请求，接收Point并添加到服务器端Graf
    [HttpPost]
    public IActionResult OnPost([FromBody] Point newPoint)
    {
        var storedGraf = HttpContext.Session.Get<Graf>("StoredGraf") ?? new Graf();
        storedGraf.Points.Add(newPoint);
        HttpContext.Session.Set<Graf>("StoredGraf", storedGraf);
        
        return Ok();
    }
}

关键注意点 #

• 避免空引用：一定要确保Graf类的Points列表已经初始化（比如用= new List<Point>()），不然添加Point时会抛出NullReferenceException。
• 状态持久化：HTTP是无状态的，如果需要页面刷新后保留Graf实例，要把它存储到Session、数据库或者其他持久化存储中。
• 输入验证：无论是表单提交还是客户端输入，都要做基本的有效性验证，避免无效数据被添加。

内容的提问来源于stack exchange，提问作者Kirill Zorin