You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.NET Core 6中如何将HTML表单数据传递至控制器类

解决.NET Core 6表单提交到控制器的问题

第一步:调整视图(View)的表单设置

修改表单标签指定提交规则,同时确保控件能正确绑定到模型:

@model FeedbackUnivicosa.Models.ViewModels.ProfessorFormViewModel;
@{ 
    ViewData["Title"] = "Enviar feedback";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- 指定POST提交方式和目标控制器方法,添加防伪造令牌 -->
<form method="post" asp-action="SubmitFeedback" asp-antiforgery="true">
    <fieldset>
        <legend>@ViewData["Title"]</legend>
        <div class="form-group">
            <label class="form-label mt-4">Curso</label>
            <select class="form-select" id="cursoSelect"></select>
            <br />
            <label class="form-label mt-4">Professor</label>
            <!-- 绑定到ViewModel的教授Id属性,移除选项value的空格 -->
            <select class="form-select" id="professorSelect" asp-for="ProfId" disabled=true></select>
            <br />
            <div class="form-group">
                <label for="feedbackTextArea">Feedback</label>
                <!-- 绑定到ViewModel的反馈内容属性 -->
                <textarea class="form-control" id="feedbackTextArea" rows="3" placeholder="Digite Seu feedback" asp-for="FeedbackContent"></textarea>
            </div>
            <br />
            <div class="form-group">
                <input type="submit" value="Enviar" class="btn btn-primary" />
            </div>
        </div>
    </fieldset>
</form>

@section Scripts{
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                datatype: "json",
                cache: false,
                url: "/Cursos/GetCursos",
                data: {},
                success: function (data) {
                    var s = '<option value="" disabled selected hidden>Selecione um Curso</option>';
                    for (var i = 0; i < data.length; i++) {
                        // 移除value中的多余空格,避免绑定错误
                        s += '<option value="' + data[i].id + '">' + data[i].nome + '</option>';
                        console.log('id ' + data[i].id + ' nome ' + data[i].nome);
                    }
                    $("#cursoSelect").html(s);
                },
                error: function () {
                    alert('Error !');
                }
            });
        });

        $(function () {
            $("#cursoSelect").on("change", function () {
                var cursooId = $(this).val();
                $("#professorSelect").empty();
                $("#professorSelect").prop('disabled', false);
                var string = '<option value="" disabled selected hidden>Selecione um Professor</option>';
                $.getJSON(`/Professores/GetProfessorByCurso/${cursooId}`, (data) => {
                    $.each(data, function (i, item) {
                        // 移除value中的多余空格
                        string += '<option value="' + item.profId + '">' + item.nome + '</option>';
                        console.log(item.profId, item.nome, item.profEmail);
                    });
                    $("#professorSelect").html(string);
                });
            });
        });
    </script>
}

关键调整说明:

  • 表单添加method="post"和asp-action="SubmitFeedback",明确提交目标
  • 教授下拉框绑定到ProfId属性,移除选项value的空格(避免绑定的Id值带无效空格)
  • 文本域用asp-for="FeedbackContent"绑定,自动生成正确的name属性实现模型绑定
  • 添加asp-antiforgery="true"防止跨站请求伪造

第二步:更新ViewModel(ProfessorFormViewModel)

确保ViewModel包含需要接收的表单字段:

namespace FeedbackUnivicosa.Models.ViewModels
{
    public class ProfessorFormViewModel
    {
        // 接收选中的教授Id
        public int ProfId { get; set; }
        // 接收反馈文本内容
        public string FeedbackContent { get; set; }
        // 保留原有属性(若业务需要)
        public Professor Professor { get; set; }
    }
}

可选验证增强:如果需要强制用户填写反馈,可给FeedbackContent添加验证特性:

using System.ComponentModel.DataAnnotations;

[Required(ErrorMessage = "O feedback é obrigatório")]
public string FeedbackContent { get; set; }

第三步:在控制器中添加表单接收方法

在HomeController中添加POST方法处理提交的数据:

using FeedbackUnivicosa.Models;
using FeedbackUnivicosa.Models.ViewModels;
using FeedbackUnivicosa.Services;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Diagnostics;

namespace FeedbackUnivicosa.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;
        private readonly CursoService _cursoService;
        // 若有教授服务或邮件服务,记得注入
        // private readonly ProfessorService _professorService;
        // private readonly EmailService _emailService;

        public HomeController(ILogger<HomeController> logger, CursoService cursoService)
        {
            _logger = logger;
            _cursoService = cursoService;
            // _professorService = professorService;
            // _emailService = emailService;
        }

        // 原有方法保持不变...

        public IActionResult Feedback()
        {
            ViewBag.Cursos = _cursoService.FindAll().Select(x => new SelectListItem() { Text = x.Nome, Value = x.Nome }).ToList();
            return View();
        }

        // 添加POST方法接收表单数据
        [HttpPost]
        public IActionResult SubmitFeedback(ProfessorFormViewModel model)
        {
            if (ModelState.IsValid)
            {
                // 这里实现业务逻辑:比如根据ProfId获取教授信息、发送邮件
                // var professor = _professorService.FindById(model.ProfId);
                // _emailService.SendFeedbackEmail(professor.Email, model.FeedbackContent);
                
                // 处理完成后重定向到反馈页面并提示成功
                TempData["SuccessMessage"] = "Feedback enviado com sucesso!";
                return RedirectToAction("Feedback");
            }
            // 模型验证失败时返回原视图,保留用户输入并显示错误
            return View("Feedback", model);
        }
    }
}

关键说明:

  • 方法标记[HttpPost],仅接收POST请求
  • 参数为ProfessorFormViewModel,ASP.NET Core会自动完成表单数据到模型的绑定
  • 用ModelState.IsValid检查数据合法性,处理验证失败场景

内容的提问来源于stack exchange,提问作者vinicius01cs

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.06 19:30:34