Doubt about the use of the VS2015 SPA Template

Question

I need to do a routine to send email, through a form I made, using the VS2015 SPA Template. I put two buttons, Cancel and Send. The question is not in the code of the email, but how to assign the Click of the button to my code in the Controller and also the fields. I’m using SPA for learning, so I used the VS2015 template and changed according to my needs.

This is Little View(CSHTML)

@model Projeto.Models.ContactEmail
@using (Html.BeginForm("Email", "Email", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Enviar email.</h4>
    <hr />

    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.Nome, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Nome, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Assunto, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Assunto, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Texto, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextAreaFor(m => m.Texto, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-danger" value="Cancelar" />
            <input type="submit" class="btn btn-success" value="Enviar" />
        </div>
    </div>
}

This is the Controller code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;

namespace Projeto.Controllers
{
    public class EmailController : Controller
    {
        // GET: Email
        public ActionResult Email()
        {
            return View();
        }

        [HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> EnviarEmail()
        {
            //Aqui deve ir o código de tudo, enviar email e etc
            return View(model);
        }
    }
}

This is the Email model:

public class ContactEmail
    {
        [Required]
        [Display(Name = "Nome")]
        public string Nome { get; set; }

        [Required]
        [Display(Name = "Email")]
        public string Email { get; set; }

        [Required]
        [Display(Name = "Assunto")]
        public string Assunto { get; set; }

        [Required]
        [Display(Name = "Texto")]
        public string Texto { get; set; }
    }

This is my email sending routine:

[HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public ActionResult EnviarEmail(ContactEmail contactEmail)
        {
            WebMail.SmtpServer = "mail19.redehost.com.br";
            WebMail.SmtpPort = 587;
            //WebMail.EnableSsl = true;
            WebMail.From = contactEmail;
            WebMail.UserName = "[email protected]";
            WebMail.Password = "tested123";
            WebMail.Send(contactEmail.Email, contactEmail.Assunto, contactEmail.Texto);

            return View(contactEmail);
        }

Where contactEmail is the email typed on the page by the users of it. [email protected] -> That’s where I’m sending the email. I already switched it (Inverti) and still can’t send it. With the above configuration, it gives me this error:

Answer 1

See that you have all your form on View inside:

@using (Html.BeginForm("Email", "Email", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    //Seu form
}

So you can do it in your Controller to check whether a Submit is being executed:

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> EnviarEmail()
{
    if (Request.Form["Submit"] != null)
    {
        if (Request.Form["Submit"].ToString() == "Enviar")
        {
            //Aqui deve ir o código de tudo, enviar email e etc
        }
        else
        {
            //Outro tratamento
        }
    return View(model);
}

Answer 2

You can also use a nominated argument:

    [HttpPost]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> EnviarEmail(string submit)
    {
        switch (submit)
        {
            case "Enviar":
               ...
            case "Cancelar":
               ...
            default:
               ...
        }

        //Aqui deve ir o código de tudo, enviar email e etc
        return View(model);
    }

Just make sure each button has the attribute name:

        <input name="submit" type="submit" class="btn btn-danger" value="Cancelar" />
        <input name="submit" type="submit" class="btn btn-success" value="Enviar" />

Answer 3

If you just want to clear the form, I don’t see the need to make one POST for this. You can just refresh the page or "reset" the form would solve your problem.

To refresh the page, you can do something like this on your cancel button:

<a href="@Url.Action("Email", "Email")" class="btn btn-danger"> Cancelar</a>

If you just want to clear the fields, you can reset the form. An example would be to change your cancel button for this:

<input type="button" class="btn btn-danger" value="Cancelar" onclick="this.form.reset();"/>

See an example on . Netfiddle

Answer 4

I’d like to alert him to a possible problem in your Html.BeginForm you defined Action as Email:

@using (Html.BeginForm("Email", "Email", ...

But in your Controller you call Action EnviarEmail:

public async Task<ActionResult> EnviarEmail()

So I assume the right thing would be to cancel:

 <a href="@Url.Action("EnviarEmail", "Email")" class="btn btn-danger"> Cancelar</a>

And the correct form would be:

@using (Html.BeginForm("EnviarEmail", "Email", ...

Which probably caused the mistake in: Send email with contact form in SPA