ASP.NET Core中如何将输入/数据库数据显示到HTML文本域（runat无效）

首先明确：ASP.NET Core不支持ASP.NET Web Forms的runat="server"机制，这就是你之前尝试无效的核心原因——两者底层架构完全不同，Core采用MVC/Razor Pages模式，没有服务器控件那一套。

下面提供两种常用实现方案，覆盖同步提交和无刷新提交场景：

方案一：后端同步提交（Post请求） #

适合不需要页面无刷新的场景，提交后页面重新加载并显示数据。

1. 创建视图模型 #

定义用于传递数据的ViewModel：

public class DataDisplayModel
{
    // 接收文本框输入的内容
    public string InputContent { get; set; }
    // 要显示到文本域的内容
    public string DisplayContent { get; set; }
}

2. 编写Controller逻辑 #

public class DataController : Controller
{
    // 注入数据库上下文（如果需要操作数据库）
    private readonly YourDbContext _dbContext;

    public DataController(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    // 初始加载页面
    public IActionResult Index()
    {
        return View(new DataDisplayModel());
    }

    // 处理提交请求
    [HttpPost]
    public async Task<IActionResult> Index(DataDisplayModel model)
    {
        // 场景1：直接显示文本框输入的内容
        model.DisplayContent = model.InputContent;

        // 场景2：从数据库查询数据并显示（示例）
        // var dbRecord = await _dbContext.YourTable
        //     .FirstOrDefaultAsync(x => x.KeyField == model.InputContent);
        // model.DisplayContent = dbRecord?.TargetContent ?? "未找到匹配数据";

        return View(model);
    }
}

3. 编写Razor视图（Index.cshtml） #

@model DataDisplayModel

<form method="post">
    <div class="form-group">
        <label>输入内容:</label>
        <input type="text" class="form-control" asp-for="InputContent" />
    </div>
    <button type="submit" class="btn btn-primary mt-2">提交</button>

    <div class="mt-3">
        <label>显示结果:</label>
        <textarea class="form-control" rows="6" readonly>@Model.DisplayContent</textarea>
    </div>
</form>

方案二：前端AJAX无刷新提交 #

适合需要页面不刷新、即时显示结果的场景。

1. 视图代码（Index.cshtml） #

<div class="form-group">
    <label>输入内容:</label>
    <input type="text" id="inputContent" class="form-control" />
</div>
<button id="submitBtn" class="btn btn-primary mt-2">提交</button>

<div class="mt-3">
    <label>显示结果:</label>
    <textarea id="resultTextarea" class="form-control" rows="6" readonly></textarea>
</div>

<script>
    document.getElementById('submitBtn').addEventListener('click', async function() {
        const inputVal = document.getElementById('inputContent').value;
        
        try {
            const response = await fetch('/Data/GetDisplayData', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ inputContent: inputVal })
            });

            const result = await response.json();
            document.getElementById('resultTextarea').value = result.displayContent;
        } catch (error) {
            document.getElementById('resultTextarea').value = '数据加载失败';
        }
    });
</script>

2. 添加Controller的API接口 #

[HttpPost]
public async Task<IActionResult> GetDisplayData([FromBody] DataDisplayModel model)
{
    string displayText;

    // 场景1：返回文本框输入内容
    displayText = model.InputContent;

    // 场景2：数据库查询示例
    // var dbData = await _dbContext.YourTable
    //     .FirstOrDefaultAsync(x => x.Id == int.TryParse(model.InputContent, out var id) ? id : 0);
    // displayText = dbData?.Content ?? "无匹配数据";

    return Json(new { displayContent = displayText });
}

注意事项 #

• 如果你用的是Razor Pages，逻辑类似，只需把Controller的代码移到PageModel的OnPost方法中即可。
• 数据库操作务必使用异步方法（如FirstOrDefaultAsync），避免阻塞主线程。
• 若需要验证输入内容，可在ViewModel中添加数据注解（如[Required]），并在视图中用asp-validation-summary显示错误。

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