The contact page and create blog are using ajax now.
Here's how I did it:
-Created Contact Model with Name, Email and Message
-Created a controller with two actions Index for the initial view and send(note HttpPost annotation) as follows:
public ActionResult Index()
{
Contact cc = new Contact();
return View(cc);
}
[HttpPost]
public bool Send(Contact c)
{
if (ModelState.IsValid)
{
WebMail.SmtpServer = "smtp server";
WebMail.UserName = "account Used To Send the email";
WebMail.Password = "password";
WebMail.Send("myAddress", "From-mvcdeveloper.net-UserName-"
+ c.Name, c.Message, c.Email, "myCCAddress");
return true;
}
else
throw new Exception("Invalid Email");
//return View(c);
}
-Created Index view page with HTML5 input types
-Here's the fun part. On the view page, I am posting the contents with matching parameters.
MVC finds the matching model(Very cool stuff). It is called model binding and,routing as shown here takes care of it from there.
-
jQuery is as follows:
$('#btnsend').click(function () {if ($("#sendForm").validate().form()) { var contact = { Name: $('#Name').val(), Email: $('#Email').val(), Message: $('#Message').val() }; $.post('/Contact/Send', contact, function () { UserMessage("<h2>The message
is sent. Thank you!");
}).error(function () {
UserMessage("<h2>The message sending failed. : (</h2>");
});
}
else {
return;
}
});
function UserMessage(msg) {
$('#cSet').fadeOut(1000, "", function () {
$('#success').delay(1000).fadeIn(1000, "", function () {
$('#success').html(msg);
});
});
}
One gotcha here is the bug in the version of jQuery validator plugin. Anything below 1.9.0 has a bug. It just doesnt validate the HTML5 input types properly. I spent a lot of time on this. I thought I was doing something wrong.
Try to use my contact page to see the demo.
Hope this helps! :)
Comments