How to call the HttpPost ActionResult in MVC5? - html

Question

I have a contact view in my app, and it contains a form, which is defined as below:
<form role="form" style="width:100%; float:left;">
<div class="form-group">
<img src="~/Content/img/zarf.png" class="zarf-pos">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Name and Surname</label>
<input type="text" name="fullName" class="form-control" id="exampleInputEmail1" placeholder="Enter your full name" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">E-Mail</label>
<input type="email" name="emailAddress" class="form-control" id="exampleInputPassword1" placeholder="Enter your e-mail address" required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Write to us</label><br>
<textarea name="message" class="form-control" rows="5" placeholder="How can we help you?" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default reg-position">Send</button>
</div>
</form>
Then, in my controller, I have two ActionResults, one HttpGet, and one HttpPost, defined like this:
[HttpGet]
public ActionResult Contact()
{
return View();
}
[HttpPost]
public ActionResult Contact(string fullName, string emailAddress, string message)
{ // some functionality }
But, when I fill out the form and click the Send button, it redirect to the empty Contact page. The point is that I need to have two Contact methods, while in my Post method I have some code that assumes that the strings are not empty. And if I have just one contact method, I get an error message saying the string is null, and the view is not displayed. So, I decided to have two methods, but don't know how to call the post method when the button is pressed.

Answer 1

Assuming you are using Razor to create your views, define the form like so:
#using( Html.BeginForm() )
{
<div class="form-group">
<img src="~/Content/img/zarf.png" class="zarf-pos">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Name and Surname</label>
<input type="text" name="fullName" class="form-control" id="exampleInputEmail1" placeholder="Enter your full name" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">E-Mail</label>
<input type="email" name="emailAddress" class="form-control" id="exampleInputPassword1" placeholder="Enter your e-mail address" required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Write to us</label><br>
<textarea name="message" class="form-control" rows="5" placeholder="How can we help you?" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default reg-position">Send</button>
</div>
}
This will ensure the correct <form> element is generated to post back to your action.
P.S. Just some nomenclature housekeeping... You don't call an ActionResult, you call Actions and they return ActionResults. It'll help when you're talking to other developers if you're using the correct names for things.