ASP MVC Bootstrap-project - activate email-button - asp.net

Question

I've just implemented a bootstrap-theme in an empty ASP MVC-project. In the bootstrap there is an email-form. I want to activate the "send"-button and make it send an e-mail to me. I've seen different kind of sollutions when I've read about it:
Just use:
<a href="mailto:EMAILADDRESS">
or
form method="post" action="mailto:youremail#youremail.com" >
<input type="submit" value="Send Email" />
</form>
Or the more complicated way, to use jQuery and write things in both the model and controller.
So my question is: Why should I use the (to me) more complicated way?
Here is the code that came with the bootstrap:
<!-- Contact Section -->
#*<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Contact Me</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
<!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
<form name="sentMessage" id="contactForm" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>*#
<!-- Footer -->

Answer 1

Assuming you plan to add more to your email-sending app in the future, you should prefer the seemingly complicated way because in the long run, it will actually make things simpler. This complicated way is based on a concept called 'Separation of Concerns'.
In short, breaking your code into a model and controller is more complicated if you only want a button that sends you an email. But as your program grows in complexity and you add more to it, this technique will make it easier to reuse or update particular aspects of your program.