I am using smoothscroll navigation, like this:
<li><a href="#home" class="smoothScroll">HOME</a></li>
And I have a contact form, like this:
<section id="contact" class="text-center">
@using (Html.BeginForm("contact","Home", FormMethod.Post, new { @enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<section id="contact" class="text-center">
<div class="container">
<div class="row">
<div class="col-md-12 wow fadeInDown" data-wow-delay="2000">
<h3>CONTACT Microrout.nl</h3>
</div>
<div class="col-md-2"></div>
<div class="col-md-8">
Microrout.nl
<br />frederik hendriklaan 253-b
<br />Den Haag
<br />0641697144
</div>
<div class="col-md-2"></div>
<hr />
<div class="form-group">
@Html.LabelFor(m => m.FromName, new { @class = "col-md-3" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.FromName, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.FromName)
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.FromEmail, new { @class = "col-md-3 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.FromEmail, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.FromEmail)
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Message, new { @class = "col-md-3 control-label" })
<div class="col-md-10">
@Html.TextAreaFor(m => m.Message, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Message)
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<input type="submit" value="SHOOT MESSAGE" class="form-control">
</div>
</div>
</div>
</div>
@*<div class="google_map">
<div id="map-canvas"></div>
</div>*@
</section>
}
</section>
and this are the Contact methods:
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Contact(EmailFormModel model)
{
string message2 = "There are a few errors";
if (ModelState.IsValid)
{
try
{
message2 = "Thanks! We'll get back to you soon.";
var body = "<p>Email From: {0} ({1})</p><p>Message:</p><p>{2}</p>";
var message = new MailMessage();
message.To.Add(new MailAddress("nengelen@online.nl")); //replace with valid value
message.Subject = "Your email subject";
message.Body = string.Format(body, model.FromName, model.FromEmail, model.Message);
message.IsBodyHtml = true;
using (var smtp = new SmtpClient())
{
await smtp.SendMailAsync(message);
}
}
catch (Exception error)
{
Response.Write("Error sending email: " + error.Message + "<br /> StackTrace: " + error.StackTrace);
}
ViewBag.Message = "Thank you for contact us";
//return new RedirectToActionAnchor("Contact", "", "#contact");
}
//if (Request.IsAjaxRequest())
//{
// return new JsonResult { Data = new { success = true, message = message2 } };
//}
//TempData["Message"] = message2;
return View(model);
}
But how to return back to the contact form, after submit, because after the submit the url changed to:
http://localhost:53534/Home/contact
Thank you
I have it now like this:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Contact(EmailFormModel model)
{
string message2 = "There are a few errors";
if (ModelState.IsValid)
{
try
{
message2 = "Thanks! We'll get back to you soon.";
var body = "<p>Email From: {0} ({1})</p><p>Message:</p><p>{2}</p>";
var message = new MailMessage();
message.To.Add(new MailAddress("nengelen@online.nl")); //replace with valid value
message.Subject = "Your email subject";
message.Body = string.Format(body, model.FromName, model.FromEmail, model.Message);
message.IsBodyHtml = true;
using (var smtp = new SmtpClient())
{
await smtp.SendMailAsync(message);
}
}
catch (Exception error)
{
Response.Write("Error sending email: " + error.Message + "<br /> StackTrace: " + error.StackTrace);
}
ViewBag.Message = "Thank you for contact us";
//return new RedirectToActionAnchor("Contact", "", "#contact");
}
//if (Request.IsAjaxRequest())
//{
// return new JsonResult { Data = new { success = true, message = message2 } };
//}
//TempData["Message"] = message2;
return View("Contact",model);
}
but the problem is that it then goes to: http://localhost:53534/Home/contact
But the Url of Contact is:http://localhost:53534/#contact
And this is my navigation:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home" class="smoothScroll">HOME</a></li>
<li><a href="#about" class="smoothScroll">STUDIO</a></li>
<li><a href="#team" class="smoothScroll">TEAM</a></li>
<li><a href="#service" class="smoothScroll">SERVICES</a></li>
<li><a href="#work" class="smoothScroll">WORK</a></li>
<li><a href="#pricing" class="smoothScroll">PRICING</a></li>
<li><a href="#contact" class="smoothScroll">CONTACT</a></li>
@*<li>@Html.ActionLink("Contact", "Contact", "Home")
</li>*@
</ul>
</div>
This is my Home controller:
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your app description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Contact(EmailFormModel model)
{
string message2 = "There are a few errors";
if (ModelState.IsValid)
{
try
{
message2 = "Thanks! We'll get back to you soon.";
var body = "<p>Email From: {0} ({1})</p><p>Message:</p><p>{2}</p>";
var message = new MailMessage();
message.To.Add(new MailAddress("nengelen@online.nl")); //replace with valid value
message.Subject = "Your email subject";
message.Body = string.Format(body, model.FromName, model.FromEmail, model.Message);
message.IsBodyHtml = true;
using (var smtp = new SmtpClient())
{
await smtp.SendMailAsync(message);
}
}
catch (Exception error)
{
Response.Write("Error sending email: " + error.Message + "<br /> StackTrace: " + error.StackTrace);
}
ViewBag.Message = "Thank you for contact us";
//return new RedirectToActionAnchor("Contact", "", "#contact");
}
//if (Request.IsAjaxRequest())
//{
// return new JsonResult { Data = new { success = true, message = message2 } };
//}
//TempData["Message"] = message2;
return View("Home",model);
}
}
it seems that if I use this:return Redirect(Url.RouteUrl("Home") + "#contact"); the anchor(#) will be skipped
Instead of returning a view, return a redirect:
return RedirectToAction("Index");
As you also want to jump to an anchor on the page, you can use the following:
return Redirect(Url.RouteUrl("Index") + "#contact");
This is the Post-Redirect-Get pattern, which ensures you can't double-submit an action. However, in this case you will lose the information in your ViewBag.Message.