skip to Main Content

I’m developing an project using .NET Core 6 that take the text from a form and send it by email to the professor previously selected and now I need to get some informations from my HTML form (specifically the text on "FeedbackTextArea" and the Professor Id) and send it to my Controller class to treat that informations but I don’t have the slightest idea how to do that.

That’s my View

@model FeedbackUnivicosa.Models.ViewModels.ProfessorFormViewModel;
@{
    ViewData["Title"] = "Enviar feedback";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<form>
    <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>
            <select class="form-select" id="professorSelect" asp-for="Professor.Nome" disabled=true></select>
            <br />
            <div class="form-group">
                <label for="feedbackTextArea">Feedback</label>
                <textarea class="form-control" id="feedbackTextArea" rows="3" placeholder="Digite Seu feedback"></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++) {

                        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) {
                        string += '<option value=" ' + item.profId + '">' + item.nome + '</option>';
                        console.log(item.profId, item.nome, item.profEmail);
                    });
                    $("#professorSelect").html(string);
                    

                });
            });
        });
        
    </script>
}

And that is my Controller

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;
        public HomeController(ILogger<HomeController> logger, CursoService cursoService)
        {

            _logger = logger;
            _cursoService = cursoService;
        }

        public IActionResult Index()
        {

            return View();
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
        public IActionResult Cadastro()
        {
            return View();
        }
        public IActionResult Feedback()
        {
            ViewBag.Cursos = _cursoService.FindAll().Select(x => new SelectListItem() { Text = x.Nome, Value = x.Nome }).ToList();
            return View();
        }
        

    }
}

I’m expecting some way to send the informations to the back-end

2

Answers


  1. Not sure how is the parameter like in your action, but model binding system binds the data by name attribute.

    A simple demo about how to pass the data to backend:

    <form asp-action="Test">
        <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>
    
                                                               //add the name attribute...
                <select class="form-select" id="professorSelect" name="Nome" asp-for="Professor.Nome" disabled=true></select>
                <br />
                <div class="form-group">
                    <label for="feedbackTextArea">Feedback</label>
    
                                                                    //add the name attribute...
                    <textarea class="form-control" id="feedbackTextArea" name="feedback" rows="3" placeholder="Digite Seu feedback"></textarea>
                </div>
                <br />
                <div class="form-group">
                    <input type="submit" value="Enviar" class="btn btn-primary" />
                </div>
            </div>
        </fieldset>
    </form>
    

    Action:

    public IActionResult Test(string Nome, string feedback)
    {
        //do your stuff...
    }
    
    Login or Signup to reply.
  2. add an event listner for form submit

        addEventListener('submit', (event) => {
          event.preventDefault();
          const data = JSON.stringify(Object.fromEntries(new FormData(event.target)));
          $.ajax({
            type: 'POST',
            url: 'Home/Test',
            contentType: 'application/json;charset=UTF-8',
            data: data,
            success: function (response) {
                // Do Something with response
            },
            error: function () {
              // Do Something if ajax fails
            }
          });
        });
    
    

    And your controlle should be

    [HttpPost]
    public async Task<JsonResult> Test([FromBody] ProfessorFormViewModel modal)
    {
        // Do Something in controller
    }
    

    And dont forget to add

    builder.Services.AddControllers()
            .AddNewtonsoftJson(jsonOptions =>
            {
                jsonOptions.SerializerSettings.Converters.Add(new StringEnumConverter());
            });
    

    This to your Program.cs or the value will be null

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search