DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

How does AI transform chaos engineering from an experiment into a critical capability? Learn how to effectively operationalize the chaos.

Data quality isn't just a technical issue: It impacts an organization's compliance, operational efficiency, and customer satisfaction.

Are you a front-end or full-stack developer frustrated by front-end distractions? Learn to move forward with tooling and clear boundaries.

Developer Experience: Demand to support engineering teams has risen, and there is a shift from traditional DevOps to workflow improvements.

Related

  • GDPR Compliance With .NET: Securing Data the Right Way
  • How to Enhance the Performance of .NET Core Applications for Large Responses
  • Developing Minimal APIs Quickly With Open Source ASP.NET Core
  • Revolutionizing Content Management

Trending

  • Java Enterprise Matters: Why It All Comes Back to Jakarta EE
  • Safeguarding Cloud Databases: Best Practices and Risks Engineers Must Avoid
  • Mastering Fluent Bit: Controlling Logs With Fluent Bit on Kubernetes (Part 4)
  • What Is Plagiarism? How to Avoid It and Cite Sources
  1. DZone
  2. Coding
  3. Frameworks
  4. Creating an Email Form With ASP.NET Core Razor Pages

Creating an Email Form With ASP.NET Core Razor Pages

In this post, we take a look at how to create a simple form with ASP.NET Core Razor Pages and use it to send off emails! Because who doesn't like getting an email?

By 
Juergen Gutsch user avatar
Juergen Gutsch
·
Jul. 27, 17 · Tutorial
Likes (2)
Comment
Save
Tweet
Share
20.2K Views

Join the DZone community and get the full member experience.

Join For Free

in the comments of my last post, i got asked to write about how to create an email form using asp.net core razor pages. the reader also asked about a tutorial about authentication and authorization. i'll write about this in one of the next posts. this post is just about creating a form and sending an email with the form values.

creating a new project

to try this out, you need to have the latest preview of visual studio 2017 installed (i use 15.3.0 preview 3) and you need .net core 2.0 preview installed (2.0.0-preview2-006497 in my case).

in visual studio 2017, use "file... new project" to create a new project. navigate to ".net core," chose the "asp.net core web application (.net core)" project, and choose a name and a location for that new project.

in the next dialogue, you probably need to switch to asp.net core 2.0 to see all the new available project types (i will write about the other ones in the next post). select the "web application (razor pages)" and press "ok."

that's it. the new asp.net core razor pages project is created.

creating the form

it makes sense to use the contact.cshtml page to add the new contact form. the contact.cshtml.cs is the pagemodel to work with. inside this file, i added a small class called contactformmodel . this class will contain the form values after the post request was sent.

public class contactformmodel
{
  [required]
  public string name { get; set; }
  [required]
  public string lastname { get; set; }
  [required]
  public string email { get; set; }
  [required]
  public string message { get; set; }
}

to use this class, we need to add a property of this type to the contactmodel :

[bindproperty]
public contactformmodel contact { get; set; }

this attribute does some magic. it automatically binds the contactformmodel to the view and contains the data after the post was sent back to the server. it is actually the mvc model binding but provided in a different way. if we have the regular model binding, we should also have a modelstate . and we actually do:

public async task<iactionresult> onpostasync()
{
  if (!modelstate.isvalid)
  {
    return page();
  }



  return redirecttopage("index");
}

this is an async onpost method, which looks pretty much the same as a controller action. this returns a task of iactionresult, checks the modelstate, and so on.

let's create the html form for this code in the contact.cshtml . i use bootstrap (just because it's available) to format the form, so the html code contains some overhead:

<div class="row">
  <div class="col-md-12">
    <h3>contact us</h3>
  </div>
</div>
<form class="form form-horizontal" method="post">
  <div asp-validation-summary="all"></div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label asp-for="contact.name" class="col-md-3 right">name:</label>
        <div class="col-md-9">
          <input asp-for="contact.name" class="form-control" />
          <span asp-validation-for="contact.name"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label asp-for="contact.lastname" class="col-md-3 right">last name:</label>
        <div class="col-md-9">
          <input asp-for="contact.lastname" class="form-control" />
          <span asp-validation-for="contact.lastname"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label asp-for="contact.email" class="col-md-3 right">email:</label>
        <div class="col-md-9">
          <input asp-for="contact.email" class="form-control" />
          <span asp-validation-for="contact.email"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label asp-for="contact.message" class="col-md-3 right">your message:</label>
        <div class="col-md-9">
          <textarea asp-for="contact.message" rows="6" class="form-control"></textarea>
          <span asp-validation-for="contact.message"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <button type="submit">send</button>
    </div>
  </div>
</form>

this also looks pretty much the same as in common asp.net core mvc views. there's no difference.

btw: i'm still impressed by the tag helpers. this guys even makes writing and formatting code snippets a lot easier.

accessing the form data

as i wrote some lines above, there is a model binding working for you. this fills up the property contact with data and makes it available in the onpostasync() method if the attribute bindproperty is set.

[bindproperty]
public contactformmodel contact { get; set; }

actually, i expected to have a model passed as an argument to the onpost, as i saw it the first time. but you are able to use the property directly, without any other required actions:

var mailbody = $@"hallo website owner, this is a new contact request from your website: name: {contact.name} lastname: {contact.lastname} email: {contact.email} message: ""{contact.message}"" cheers, the websites contact form";

sendmail(mailbody);

that's nice, isn't it?

sending the emails

thanks to the pretty awesome .net standard 2.0 and the new apis available for .net core 2.0, it get's even nicer:

// irony on

finally in .net core 2.0, it is now possible to send emails directly to an smtp server using the famous system.net.mail.smtpclient() :

private void sendmail(string mailbody)
{
  using (var message = new mailmessage(contact.email, "[email protected]"))
  {
    message.to.add(new mailaddress("[email protected]"));
    message.from = new mailaddress(contact.email);
    message.subject = "new e-mail from my website";
    message.body = mailbody;

    using (var smtpclient = new smtpclient("mail.mydomain.com"))
    {
      smtpclient.send(message);
    }
  }
}

isn't that cool?

// irony off

it definitely works and this is actually a good thing.

in .net core preview versions, it was recommended to use an external mail delivery service like sendgrid. this kind of service usually provides a rest based api, which can be used to communicate with that specific service. some of them also provide various client libraries for the different platforms and languages to wrap these apis and makes them easier to use.

i'm a huge fan of such services, because they are easier to use and i don't need to handle message details like encoding. i don't need to care about smtp hosts and ports, because it is all https. i don't really need to care as much about spam handling, because this is done by the service. using such services i just need to configure the sender mail address, maybe a domain, but the dns settings are done by them.

sendgrid could be bought via the azure marketplace and contains huge numbers of free emails to send. i would propose to use such services whenever it's possible. the smtpclient is good in enterprise environments where you don't need to go threw the internet to send mail. but maybe the exchanges api is another or better option in enterprise environments.

conclusion

the email form is working and there is actually not much code written by me. that's awesome. for such scenarios, the razor pages are pretty cool and easy to use. there's no controller to set-up, the views and the pagemodels are pretty close, and the code to generate one page is not distributed over three different folders as in mvc. to create bigger applications, mvc is for sure the best choice, but i really like the idea of keeping small apps as simple as possible.

ASP.NET Core Form (document) ASP.NET

Published at DZone with permission of Juergen Gutsch, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • GDPR Compliance With .NET: Securing Data the Right Way
  • How to Enhance the Performance of .NET Core Applications for Large Responses
  • Developing Minimal APIs Quickly With Open Source ASP.NET Core
  • Revolutionizing Content Management

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: