.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
相关产品推荐
相关产品推荐

