Razor MVC：如何从视图表单创建对象并添加至博客条目列表？

一、服务端（ASP.NET MVC）提交添加方案 #

这是持久化添加条目的常规方式，步骤如下：

1. 调整表单配置 #

当前表单使用get方法会把参数暴露在URL中，建议改为post提升安全性，同时将提交目标指向专门的处理Action：

<form action="/Home/Eintrag_Hinzufuegen" formmethod="post">
    <!-- 原有表单输入项保持不变 -->
    <input type="submit" value="SEND">
</form>

2. 在HomeController中添加处理逻辑 #

在HomeController里创建接收表单提交的Action，利用MVC模型绑定自动生成Eintrag对象并添加到静态列表：

using MyBlog.Models;
using Microsoft.AspNetCore.Mvc;

public class HomeController : Controller
{
    [HttpPost]
    public IActionResult Eintrag_Hinzufuegen(Eintrag neuerEintrag)
    {
        // 可选：验证表单输入合法性
        if (ModelState.IsValid)
        {
            // 重新生成当前日期，避免模型默认值可能存在的时间差
            neuerEintrag.Date = DateTime.Now.ToShortDateString();
            // 将新条目添加到静态列表
            Eintrag.Eintraege.Add(neuerEintrag);
        }
        // 重定向到条目展示页面
        return RedirectToAction("Eintraege_anzeigen");
    }

    // 展示所有博客条目的Action（需自行实现视图）
    public IActionResult Eintraege_anzeigen()
    {
        return View(Eintrag.Eintraege);
    }
}

注意事项 #

• MVC会自动将表单字段与Eintrag的属性一一绑定，无需手动赋值；
• 静态列表Eintraege存储在服务端内存中，应用重启后数据会丢失，后续可扩展为数据库存储实现持久化。

二、前端即时预览添加方案（提交前视觉反馈） #

如果需要在提交表单前就给用户展示添加效果，可以用JavaScript实现前端临时列表：

1. 修改视图添加预览容器和JS代码 #

@{
    ViewData["Title"] = "Eintrag verfassen";
}

<h1>Eintrag schreiben</h1>
<form id="blogForm" action="/Home/Eintrag_Hinzufuegen" formmethod="post">
    <!-- 原有表单输入项保持不变 -->
    <input type="submit" value="SEND">
</form>

<!-- 临时预览列表容器 -->
<h2>即时预览</h2>
<ul id="previewList"></ul>

<script>
    document.getElementById('blogForm').addEventListener('submit', function(e) {
        // 提取表单数据
        const formData = new FormData(this);
        // 构造临时条目对象
        const tempEntry = {
            blogName: formData.get('BlogName'),
            title: formData.get('Title'),
            subtitle: formData.get('Untertitle'),
            content: formData.get('BlogEintrag'),
            date: new Date().toLocaleDateString()
        };

        // 生成列表项并添加到预览区
        const listItem = document.createElement('li');
        listItem.innerHTML = `
            <h3>${tempEntry.title}</h3>
            <p>${tempEntry.subtitle}</p>
            <small>${tempEntry.date} - ${tempEntry.blogName}</small>
            <p>${tempEntry.content}</p>
        `;
        document.getElementById('previewList').appendChild(listItem);

        // 若仅需前端预览无需提交服务端，可添加 e.preventDefault(); 阻止默认提交行为
    });
</script>

说明 #

• 此方式仅为前端视觉反馈，实际数据仍需通过服务端提交才能存入静态列表；
• 若需前端持久化临时数据，可搭配localStorage存储，但与服务端静态列表相互独立。

关于Eintrag.Eintraege.Add(this)写法的优化 #

你提到的类似写法可以通过给模型添加封装方法实现，让逻辑更内聚：

namespace MyBlog.Models {
    public class Eintrag {
        public static List<Eintrag> Eintraege { get; set; } = new();
        public string BlogEintrag { get; set; } = string.Empty;
        public string BlogName { get; set; } = string.Empty;
        public string Date { get; set; } = DateTime.Now.ToShortDateString();
        public string Title { get; set; } = string.Empty;
        public string Untertitle { get; set; } = string.Empty;

        // 添加静态方法封装添加逻辑
        public static void Hinzufuegen(Eintrag neuerEintrag)
        {
            neuerEintrag.Date = DateTime.Now.ToShortDateString();
            Eintraege.Add(neuerEintrag);
        }
    }
}

之后在Controller中可直接调用Eintrag.Hinzufuegen(neuerEintrag);完成添加，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Utility Monster