Hello,
I have a partial view where I render, if the user has choosen an option, a button that permit the user to generate automatically a value for a certain field. Please give a look at this picture to understand what I mean:
This is achieved using the following markup on the partial view
<%= Html.LabelFor( model => model.IssueCode )%>
<br />
<% if ( Model.HasCodeGenerator ) { %>
<%= Html.TextBoxFor( model => model.IssueCode, new { style = "width:120px;background-color:#eeeeee;border: solid 2px #dfdfdf", @readonly = "readonly" } )%>
<% if (Model.ModelState == ModelStateEnum.Add) { %>
<button id="codeGenerator" style="font-size: 0.7em;margin-right: 10px">Genera codice fascicolo</button>
<% } %>
<% } else { %>
<%= Html.TextBoxFor(model => model.IssueCode, new { style="width: 120px" })%>
<% } %>
<%= Html.ValidationMessageFor(model => model.IssueCode, "*")%>
As you can see I append always an Html.ValidationMessageFor() at the end of the input field and a ValidationSummary aut the end of the view.
When the user submits the form the first block of code executed by the action is the following
if ( !ModelState.IsValid ) {
//Invalid - redisplay form with errors
return PartialView( "IssueCodeGenerator", model );
}
and this is the result I am getting in all of the three cases
Why the markup code for the button disappear?
Thanks for helping!
1st EDIT:
After validation the IssueCode textbox loose it's readonly="readonly" attribute. This means that the first condition is not meet, I think....
2nd EDIT:
As per the Darin comment I am including
- The action that show the Partial View
- An extract of the partial that show that the ModelState variable is kept as an hidden control inside the form
- The controller Action called by the Partial
- The jQuery code that submit the partial
1 - This is the action that shows the partial
[HttpGet]
public ActionResult Create()
{
IssueModel im = new IssueModel()
{
ModelState = ModelStateEnum.Add,
FirmID = _firmManager.GetMyFirmID(),
CreatedDate = DateTime.Now,
LastUpdateDate = DateTime.Now,
HasCodeGenerator = _optionManager.HasIssueCodeGenerator()
};
return PartialView("Issue", im);
}
2 - Extract of the partial Issue.ascx
<% using (Html.BeginForm("SaveOrDelete", "Issue", FormMethod.Post, new { id = "crudForm" })) { %>
<%= Html.HiddenFor(model => model.FirmID) %>
<%= Html.HiddenFor(model => model.IssueID) %>
<%= Html.HiddenFor(model => model.ModelState) %>
3 - This is the controller action called when the form is submitted
[HttpPost]
public ActionResult SaveOrDelete( IssueModel model ) {
if ( !ModelState.IsValid ) {
//Invalid - redisplay form with errors
return PartialView( "Issue", model );
}
try {
Issue i = null;
if ( model.ModelState == ModelStateEnum.Add )
i = new Issue();
else
i = _manager.FindIssueByIssueID( model.IssueID );
if ( model.ModelState != ModelStateEnum.Delete ) {
_manager.BindIssueModel( i, model );
if ( model.ModelState == ModelStateEnum.Add )
i.FirmID = _contactManager.GetMyContact().FirmID;
i.LastUpdateDate = DateTime.Now;
_manager.SaveIssue( i );
} else {
_manager.DeleteIssue( i );
}
return PartialView( "ActionCompleted" );
}
catch ( Exception ex ) {
return PartialView( "ActionError",
new ActionErrorModel() { Message = ex.Message } );
}
}
4 - This is the jQuery code that submit the form
$("#crudForm").submit(function(event) {
event.preventDefault();
$("#crudForm").block();
$.ajax({
type: "post",
dataType: "html",
url: "/Issue/SaveOrDelete",
sync: true,
data: $("#crudForm").serialize(),
success: function(response) {
$("#crudForm").parent().html('').html(response);
$("#crudForm").unblock();
},
error: function(response) {
$("#crudForm").unblock();
}
});
});
Hope that this would help in finding the problem. Thank you.