I'm having an issue with a form in MVC5 at the moment:
Upon submiting the form, i'm sending an ajax request to the controller which should take care of the CRUD operation then return a view.
If the ModelState is valid, it should return an empty form, otherwise, it should return the form with the validation error messages.
My problem is that when my view is returned, if the ModelState is valid, the form isn't emptied despite returning an empty model.
Here is the actual ajax call part:
$.ajax({
url: urlAction,
type: 'POST',
data: formData,
dataType: 'html',
success: function(code_html) {
$("#addUserForm").html(code_html);
}
});
And the controller code:
[HttpPost]
public ActionResult CreateUserAndContinue(AjoutUtilisateurViewModel data)
{
if (ModelState.IsValid)
{
// INSERT In DB.
return PartialView("AjoutUtilisateurPartial", new AjoutUtilisateurViewModel());
}
return PartialView("AjoutUtilisateurPartial", data);
}
The main view code related:
<div id="addUserForm">
@Html.Partial("AjoutUtilisateurPartial")
</div>
The partial view:
<div id="AddUserADForm">
@using (Html.BeginForm("CreateUserAndContinue", "Habilitation", FormMethod.Post, new { @id = "addUserAD" }))
{
@Html.EditorForModel()
<div class="interSmall">
<div class="ligneOrangeHaut droite">
<a id="btnSubmitAndContinue" class="button" href="#">Créer & Continuer</a>
<a id="btnSubmitAndStop" class="button" href="#">Créer & Stop</a>
</div>
</div>
}
</div>
Here is the form code: (Called in by EditorForModel() )
@model AjoutUtilisateurViewModel
<div class="indentBig interSmall">
<div class="col45 interSmall padding-left-5">
@*@Html.ValidationMessage("error")*@
@Html.ValidationMessageFor(model => model.Matricule)
</div>
<div class="clear-both"></div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.Matricule, new { @class = "label110" })
@Html.TextBoxFor(x => x.Matricule)
<a id="TestMatricule" class="button" href="#">Test</a>
</div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.EtatCompte, new { @class = "label110" })
@Html.DropDownListFor(model => model.EtatCompte, new[] { new SelectListItem { Text = "Actif", Value = "true" }, new SelectListItem { Text = "Inactif", Value = "false" } })
</div>
</div>
<div class="clear-both"></div>
<div class="indentBig interSmall">
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.Nom, new { @class = "label110" })
@Html.TextBoxFor(x => x.Nom, new { disabled = "true" })
</div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.Prenom, new { @class = "label110" })
@Html.TextBoxFor(x => x.Prenom, new { disabled = "true" })
</div>
<div class="clear-both"></div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.Service, new { @class = "label110" })
@Html.TextBoxFor(x => x.Service, new { disabled = "true" })
</div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.Bureau, new { @class = "label110" })
@Html.TextBoxFor(x => x.Bureau, new { disabled = "true" })
</div>
<div class="clear-both"></div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.Telephone, new { @class = "label110" })
@Html.TextBoxFor(x => x.Telephone, new { disabled = "true" })
</div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.Courriel, new { @class = "label110" })
@Html.TextBoxFor(x => x.Courriel, new { disabled = "true" })
</div>
<div class="clear-both"></div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.Adresse, new { @class = "label110" })
@Html.TextBoxFor(x => x.Adresse, new { disabled = "true" })
</div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.CodePostal, new { @class = "label110" })
@Html.TextBoxFor(x => x.CodePostal, new { disabled = "true" })
</div>
<div class="clear-both"></div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.Ville, new { @class = "label110" })
@Html.TextBoxFor(x => x.Ville, new { disabled = "true" })
</div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.Departement, new { @class = "label110" })
@Html.TextBoxFor(x => x.Departement, new { disabled = "true" })
</div>
<div class="clear-both"></div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.OU, new { @class = "label110" })
@Html.TextBoxFor(x => x.OU, new { disabled = "true" })
</div>
<div class="clear-both"></div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.ZoneLibre1, new { @class = "label110" })
@Html.TextBoxFor(x => x.ZoneLibre1)
</div>
<div class="col45 interSmall padding-left-5">
@Html.LabelFor(x => x.ZoneLibre2, new { @class = "label110" })
@Html.TextBoxFor(x => x.ZoneLibre2)
</div>
<div class="clear-both"></div>
</div>
Which is an editor template.
This problem confuses me because i've a really similar function that fills the form and returns a PartialView with a Model pre-set which works great. But being new to MVC i'm probably missing out on something big.
Any help is apreciated :)