Contact Form Within Partial View - asp.net-mvc

Question

I have to admit, the transition from Web Forms to MVC is literally blowing my mind. I simply can not seem to wrap my head around how MVC functions as it compares to Web Forms, and I continue to hit roadblock after roadblock when trying to perform seemingly simple tasks. Couple this with a rudimentary knowledge of javascript/jquery, and I'm left scratching my head most days.
I have been working to transition a custom CMS that my company built from Web Forms to MVC. This CMS allows for the creation of pages and the manipulation of the site navigation, which resulted in the creation of a page model, along with related views and controllers.
While the client can edit 99% of the site, some elements are static and are loaded on demand on specific pages. For example, the Contact page exists within the CMS, but the site injects the actual contact form on demand.
When build in Web Forms, this contact form was simply a User Control, with its own logic for handing the postback. I thought the logical transition here would be the creation of a Partial View, but I have run into ridiculous amounts of difficulty in accomplishing this task. While I have been able to create the model, view and controller for this contact form, I simply can't seem to make it work correctly.
After literally 3 days of scouring Stack Overflow for advice, I completed nearly everything to make this work. However, I can't figure out how to perform a seemingly simple redirect from the Partial View to save my life. I have tried numerous approaches, including the one described at Doug.Instance, but haven't had any luck. Upon post, the partial view returns as an entire view, even though the controller uses 'return PartialView'. If I post it again, it returns as it originally displayed, as a partial view. In addition, my Redirect variable is not updating upon success, AND the OnSuccess javascript is not firing.
Below is my code. Please help me, because I'm running out of hair...
PAGE VIEW (SHORTENED FOR BREVITY)
...
#if (Model.ID == 8)
{
//LOAD CONTACT FORM
#Html.Action("Contact","ContactForm")
}...
CONTACT FORM PARTIAL VIEW (SHORTENED FOR BREVITY)
#model NCOWW.Models.ContactForm
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
// Labels over the inputs.
window.addEvent("load", function () {
var myForm = document.id('contactForm');
myForm.getElements('[type=text], textarea').each(function (el) {
new OverText(el);
});
});
function FormComplete() {
if ($("#Redirect").val() != '') {
document.location = $("#Redirect").val();
}
}
</script>
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "contactForm", OnSuccess = "FormComplete" }))
{
#Html.ValidationSummary(true)
<div id="contactForm">
#Html.HiddenFor(model => model.Redirect)
#Html.TextBoxFor(model => model.Name, new { tabindex = 1, #class = "half", Title = #Html.DisplayNameFor(model => model.Name) })
#Html.ValidationMessageFor(model => model.Name)
#Html.TextAreaFor(model => model.Comments, new { tabindex = 13, Title = #Html.DisplayNameFor(model => model.Comments) })
#Html.ValidationMessageFor(model => model.Comments)
<br />
<input type="submit" value="Submit" name="Submit" class="button" />
</div>
}
CONTACT FORM CONTROLLER (SHORTENED FOR BREVITY)
public ActionResult Contact(ContactForm c)
{
try
{
MailMessage message = new MailMessage();
message.IsBodyHtml = true;
message.From = new MailAddress(c.Email);
message.Body += "<b>Name:</b> " + c.FullName + "<br/><br/>";
message.Body += "<b>Questions/Comments:</b><br> " + c.Comments;
SmtpClient client = new SmtpClient();
client.Send(message);
c.Redirect = "/formsuccess";
return PartialView("contactForm", c);
}
catch
{
return PartialView();
}
}

Answer 1

the issue you have is common with ajax.
what you need to note is when ajax renders response it does not know about javascript you have returned.
you need to have some way of registering your javascript in order to get it triggered.
Now how to do this?
I have created one of ways, that works for me:
have javascript function on page that has reload.
function RedirectToLocation(url) {
//your javascript event here
}
your ajax call, I have ajax action link but begin form is almost the same
the part you are interested is AjaxOptions.
And event OnSuccess. this will get triggered when call is successful.
Example for link:
#Ajax.ActionLink("Comments", "AddComment", "Task", new { id =
Model.Task.TaskId, TaskStatus = (int)State.Closed },
new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "showResults", OnSuccess = "RedirectToLocation" }, null)
And here you can read about ajax options more
Just point out issue in your code example for your action result
try
{
MailMessage message = new MailMessage();
message.IsBodyHtml = true;
message.From = new MailAddress(c.Email);
message.Body += "<b>Name:</b> " + c.FullName + "<br/><br/>";
message.Body += "<b>Questions/Comments:</b><br> " + c.Comments;
SmtpClient client = new SmtpClient();
client.Send(message);
c.Redirect = "/formsuccess";
return PartialView("contactForm", c);
}
catch
{
return PartialView(); <-- will render what, better will be if it renderes error mesasge partial view
}

Answer 2

try it by adding Action name in your PARTIAL VIEW
#using (Ajax.BeginForm("Action Name",new AjaxOptions { UpdateTargetId =
"contactForm", OnSuccess = "FormComplete" })) {

Answer 3

I was able to get this to work once I started rethinking about what I was actually trying to achieve. Instead of returning PartialView("contactForm", c);, I ended up returning Json(c);. I then parsed the returned Json and redirected from there. The final working code is as follows.
PAGE VIEW (SHORTENED FOR BREVITY)
...
#if (Model.ID == 8)
{
//LOAD CONTACT FORM
#Html.Action("Contact","ContactForm")
}...
CONTACT FORM PARTIAL VIEW (SHORTENED FOR BREVITY)
#model NCOWW.Models.ContactForm
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
// Labels over the inputs.
window.addEvent("load", function () {
var myForm = document.id('contactForm');
myForm.getElements('[type=text], textarea').each(function (el) {
new OverText(el);
});
});
function FormComplete(result) {
if (result.Redirect != null && result.Redirect != '') {
document.location = result.Redirect;
}
}
</script>
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "contactForm", OnSuccess = "FormComplete" }))
{
#Html.ValidationSummary(true)
<div id="contactForm">
#Html.HiddenFor(model => model.Redirect)
#Html.TextBoxFor(model => model.Name, new { tabindex = 1, #class = "half", Title = #Html.DisplayNameFor(model => model.Name) })
#Html.ValidationMessageFor(model => model.Name)
#Html.TextAreaFor(model => model.Comments, new { tabindex = 13, Title = #Html.DisplayNameFor(model => model.Comments) })
#Html.ValidationMessageFor(model => model.Comments)
<br />
<input type="submit" value="Submit" name="Submit" class="button" />
</div>
}
CONTACT FORM CONTROLLER (SHORTENED FOR BREVITY)
public ActionResult Contact(ContactForm c)
{
try
{
MailMessage message = new MailMessage();
message.IsBodyHtml = true;
message.From = new MailAddress(c.Email);
message.Body += "<b>Name:</b> " + c.FullName + "<br/><br/>";
message.Body += "<b>Questions/Comments:</b><br> " + c.Comments;
SmtpClient client = new SmtpClient();
client.Send(message);
c.Redirect = "/formsuccess";
return Json(c);
}
catch
{
//ERROR CATCH CODE
}
}