Как отправить контактную форму-данные в API с помощью mailkit (Angular 7 + .Net core web api) - PullRequest
Новая
       39

Как отправить контактную форму-данные в API с помощью mailkit (Angular 7 + .Net core web api)

0 голосов
/ 04 июня 2019

Я пытаюсь отправить данные контактной формы в конечную точку API с помощью mailkit. У меня есть веб-сайт с контактной страницей, и когда кто-то заполняет контактную форму и нажимает кнопку «Отправить», я хочу, чтобы мой веб-сайт отправлял мне электронное письмо. Я застрял, пытаясь решить эту проблему в течение нескольких недель, к сожалению (новичок в программировании), и решил, что мне понадобится помощь.

Я неоднократно проверял youtube и, похоже, нигде не могу найти полное руководство о том, как это сделать с помощью .NET web api, mailkit и angular 7.

Я начну с HTML-формы (довольно стандартная реактивная форма с проверкой): 

  <form novalidate [formGroup]="contactForm" method="post" (ngSubmit)="onSubmit(contactForm, contactForm.isValid)">
      <div class="form-group">
        <label>Name</label>
        <input  type="text" formControlName="name" class="form-control" placeholder="Enter name">
        <div [hidden]= "contactForm.controls.name.valid || contactForm.controls.name.pristine" class="alert alert-danger">
          <span *ngIf="!contactForm.controls.name.valid"> Name is required!</span>
        </div>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input  type="text" formControlName="email" class="form-control" placeholder="Enter email">
        <div [hidden]= "contactForm.controls.email.valid || contactForm.controls.email.pristine" class="alert alert-danger">
          <span *ngIf="!contactForm.controls.email.valid"> Email is required!</span>
        </div>
      </div>
      <div class="form-group">
        <label>Subject</label>
        <input  type="text" formControlName="subject" class="form-control" placeholder="Enter subject">
        <div [hidden]= "contactForm.controls.subject.valid || contactForm.controls.subject.pristine" class="alert alert-danger">
          <span *ngIf="!contactForm.controls.subject.valid"> Subject is required!</span>
        </div>
      </div>
      <div class="form-group">
        <label>Message</label>
        <textarea rows="3" type="text" formControlName="message" class="form-control" placeholder="Enter message"></textarea>
        <div [hidden]= "contactForm.controls.message.valid || contactForm.controls.message.pristine" class="alert alert-danger">
          <span *ngIf="!contactForm.controls.message.valid"> Message is required!</span>
        </div>
      </div>


      <br>
      <button type="submit" [disabled]="!contactForm.valid" class="btn btn-primary">Submit</button>


    </form>

</div>
</section>

Это файл TS моего контактного компонента: 

userModel = new ContactFormComponent('','','','');
  public submitted: boolean;


  contactForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  onSubmit({value, valid} : {value: ContactForm, valid: boolean}){
    this.submitted = true;
    console.log(value, valid);
  }



  ngOnInit() {
    this.contactForm = this.fb.group({
      name:['',[Validators.required, Validators.minLength(3)]],
      email:['',[Validators.required]],
      subject:['', [Validators.required]],
      message:['', [Validators.required]]
    });
  }

Я зашел достаточно далеко, чтобы получить журнал формы на консоли enter image description here

это в моих файлах API, моя информационная модель электронной почты: 

public class ContactInfo
    {
        [Required]
        public string Name { get; set; }        
        [Required]        
        public string Email { get; set; }
        [Required]
        public string Subject { get; set; }
        [Required]
        public string Message { get; set; } 

    }

Пока это все, что у меня есть в контроллере: 

public class emailController : ControllerBase
    {
        [HttpPost]
        public async Task SendEmail([FromBody] ContactInfo contact)
        {

        }


    }

У меня еще нет созданной конечной точки mailkit, и я также не знаю, как отправить данные формы в конечную точку mailkit.

Не могли бы вы продемонстрировать, как я могу отправить данные этой формы в конечную точку почтового ящика, которая отправит отправленные данные в мой почтовый ящик?

1 Ответ

0 голосов
/ 01 июля 2019

Вы можете использовать этот код внутри SendEmail для отправки электронного письма. Обратите внимание, что вы должны разрешить использование gmail вне домена google, установив smtp на соответствующей вкладке gmail. Вот код для отправки электронной почты в ядре aspnet. 

      var message = new MimeMessage();
      message.To.Add(new MailboxAddress("Recipient Name", "your@site.domaine"));
      message.From.Add(new MailboxAddress("From Name", contact.Email));
      message.Subject = contact.Subject;
      message.Body = new TextPart(TextFormat.Html)
      {
        Text = contact.Message + 
              ". sent by: " + contact.Name + 
              " E-mail: " + contact.Email
      };
      using (var emailClient = new SmtpClient())
      {
        emailClient.Connect("smtp.gmail.com", 587, false);
        emailClient.Authenticate("yougmail@gmail.com", "your_password");
        emailClient.Send(message);
        emailClient.Disconnect(true);
       }

Кроме того, вам нужно использовать инъекцию зависимости, чтобы избавиться от объекта SmtpClient using (var emailClient = new SmtpClient()).

...