I have a simple email capture form as part of my home page, however when I return the partial view the model value for the Editor for form is not getting updated:
The Model
public class Contact
{
[Key]
public int Id { get; set; }
[Required]
public string Email { get; set; }
[NotMapped]
public string Message { get; set; }
}
The Views
@model TestApp.Models.Contact
@{
ViewBag.Title = "Home Page";
}
<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 src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>
<script type="text/javascript" >
$(function () {
// ajax form post
$("#EmailForm").ajaxForm(function (result) {
$("#EmailForm").html(result); // post results
});
});
</script>
@using (@Html.BeginForm("SaveEmail", "Home", FormMethod.Post, new { id = "EmailForm" }))
{
@Html.Partial("SaveEmail", Model);
}
The Partial
@model TestApp.Models.Contact
<span class="editor-label">
@Html.LabelFor(m => m.Email) :
</span>
<span class="editor-field">
@Html.EditorFor(m => m.Email)
</span>
<input type="submit" value="Submit" />
<div id="message">
@Html.ValidationMessageFor(m => m.Email)
@Html.DisplayFor(m => m.Message)
</div>
<br/>
The Controller
[HttpPost]
public PartialViewResult SaveEmail(Contact contact)
{
if (ModelState.IsValid)
{
//TODO: save e-mail to database
contact.Message = "You e-mail has been added to our database - Thank y ou";
contact.Email = "";
return PartialView(contact);
}
return PartialView();
}
This returns model errors as expected, returns the message when model state is valid, but the email text box value in the response is not updating
The response form firebug when posting e-mail a@b.com
<span class="editor-label">
<label for="Email">Email</label> :
</span>
<span class="editor-field">
<input class="text-box single-line" id="Email" name="Email" type="text" value="a@b.com" />
</span>
<input type="submit" value="Submit" />
<div id="message">
You e-mail has been added to our database - Thank you
</div>
<br/>
I've tried creating a new model and passing that in, I've tried ModelState.Clear(), I can fix the problem with a little jquery
$("#Email").val(''); // clear the email address
But this seem a little hacky and I would like to understand what is going on.