Passing Model in ViewModel to controller get null (Edit Form) - asp.net-mvc

Question

This edit form was already success, then i want to add add comment to this form, to do this i'm following this article
http://www.arrangeactassert.com/when-to-use-html-renderpartial-and-html-renderaction-in-asp-net-mvc-razor-views/
i create the viewmodel named CaseInternalEditViewModel
public class CaseInternalEditViewModel
{
public CaseInternalEditViewModel()
{
caseComment = new List<CaseComment>();
}
public String caseIDComment { get; set; }
public CaseInternal caseInternal { get; set; }
public List<CaseComment> caseComment { get; set; }
}
and change model in View :
#model myCHMTest.Models.CaseInternalEditViewModel
#{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Edit</h2>
<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>
<div class="container">
<fieldset>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<legend>CaseInternal</legend>
<div class="container">
#Html.HiddenFor(model => model.caseIDComment)
#Html.HiddenFor(model => model.caseInternal.ID)
#Html.HiddenFor(model => model.caseInternal.CaseID)
#Html.HiddenFor(model => model.caseInternal.StatusID)
#* #Html.HiddenFor(model => model.caseInternal.CreatedNIK)*#
#Html.HiddenFor(model => model.caseInternal.CreatedBy)
#Html.HiddenFor(model => model.caseInternal.CreatedDt)
#Html.HiddenFor(model => model.caseInternal.SLA)
#Html.HiddenFor(model => model.caseInternal.SLAFlag)
#Html.HiddenFor(model => model.caseInternal.DatCreated)
#Html.HiddenFor(model => model.caseInternal.DayResolved)
#Html.HiddenFor(model => model.caseInternal.CategoryID)
<div class="sixteen columns">
<div class="fbbluebox">
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.CaseID)
#Html.DisplayFor(model => model.caseInternal.CaseID)
#Html.ValidationMessageFor(model => model.caseInternal.CaseID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.caseInternal.Title)
#Html.ValidationMessageFor(model => model.caseInternal.Title)
</div>
</div>
<hr />
</div>
<div class="one-third column">
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.BranchID)
</div>
<div class="editor-field">
#Html.DropDownList("BranchID")
#Html.ValidationMessageFor(model => model.caseInternal.BranchID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.ProjectID, "InternalProject")
</div>
<div class="editor-field">
#Html.DropDownList("ProjectID", null, new { #onchange = "javascript:cascadingdropdown();" })
#Html.ValidationMessageFor(model => model.caseInternal.ProjectID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.SubProjectID, "InternalSubProject")
</div>
<div class="editor-field">
#Html.DropDownList("SubProjectID", String.Empty)
#*#Html.DropDownListFor(model => model.SubProjectID, new SelectList(Enumerable.Empty<SelectListItem>()))*#
#Html.ValidationMessageFor(model => model.caseInternal.SubProjectID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.PengaduanID, "InternalPPengaduan")
</div>
<div class="editor-field">
#Html.DropDownList("PengaduanID", String.Empty)
#Html.ValidationMessageFor(model => model.caseInternal.PengaduanID)
</div>
</div>
<div class="one-third column">
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.CreatedNIK)
</div>
<div class="editor-field">
#* #Html.TextBoxFor(model => model.caseInternal.CreatedNIK, new { disabled = "disabled" })
#Html.ValidationMessageFor(model => model.caseInternal.CreatedNIK)*#
<input type="text" name="InitialNIK" value="#Model.caseInternal.CreatedNIK" disabled="disabled"/>
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.CreatedBy)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.caseInternal.CreatedBy, new { disabled = "disabled" })
#Html.ValidationMessageFor(model => model.caseInternal.CreatedBy)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.CreatedDt)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.caseInternal.CreatedDt, new { disabled = "disabled" })
#Html.ValidationMessageFor(model => model.caseInternal.CreatedDt)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.AssignGroupID)
</div>
<div class="editor-field">
#Html.DropDownList("AssignGroupID", null, new { #onchange = "javascript:memberdropdown();" })
#Html.ValidationMessageFor(model => model.caseInternal.AssignGroupID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.AssignMemberID)
</div>
<div class="editor-field">
#Html.DropDownList("AssignMemberID", String.Empty)
#Html.ValidationMessageFor(model => model.caseInternal.AssignMemberID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.StatusID)
</div>
<div class="editor-field">
#Html.DropDownList("StatusID",null, new { #disabled = "disabled" })
#Html.ValidationMessageFor(model => model.caseInternal.StatusID)
</div>
</div>
<div class="one-third column">
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.SLA)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.caseInternal.SLA, new { disabled = "disabled" })
#Html.ValidationMessageFor(model => model.caseInternal.SLA)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.SLAFlag)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.caseInternal.SLAFlag, new { disabled = "disabled" })
#Html.ValidationMessageFor(model => model.caseInternal.SLAFlag)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.DayResolved)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.caseInternal.DayResolved, new { disabled = "disabled" })
#Html.ValidationMessageFor(model => model.caseInternal.DayResolved)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.DatCreated)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.caseInternal.DatCreated, new { disabled = "disabled" })
#Html.ValidationMessageFor(model => model.caseInternal.DatCreated)
</div>
</div>
<div class="sixteen columns">
<div class="fbgreybox" >
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.Description)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.caseInternal.Description, new { style = "width: 100%; height: 100px;" })
#Html.ValidationMessageFor(model => model.caseInternal.Description)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.caseInternal.LinkCase)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.caseInternal.LinkCase)
#Html.ValidationMessageFor(model => model.caseInternal.LinkCase)
</div>
</div>
<p>
<input type="submit" value="Save" class="uibutton large confirm"/>
#Html.ActionLink("Back to List", "Index", "CaseInternal", new { #class = "uibutton" })
</p>
</div>
</div>
}
</fieldset>
</div>
#using (Ajax.BeginForm("Comment", "CaseInternal", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid", OnSuccess = "done" }))
{
#*<input type="text" id="caseEka" name="caseEka" />*#
#Html.HiddenFor(model => model.caseIDComment)
<input type="text" id="Comment" name="Comment"/>
}
<div id="myGrid">
#Html.Partial("_showComment", Model.caseComment)
</div>
<script type="text/javascript">
function done() {
document.getElementById('Comment').value = '';
}
function cascadingdropdown() {
var idDept = $("#ProjectID").val();
var subProject = $('#SubProjectID').val();
var urlemp = '#Url.Action("GetSubProjectFromProjectID")';
var select = $('#SubProjectID');
$.ajax({
type: "POST",
url: urlemp,
data: { id: idDept },
error: function (jqXHR, textStatus, errorThrown) {
alert("error" + jqXHR.responseText);
},
success: function (returndata) {
if (returndata.ok) {
select.empty();
$.each(returndata.data, function (index, itemData) {
if (subProject == itemData.ID) {
select.append($('<option selected="selected"></option>').val(itemData.ID).html(itemData.SubProjectName));
} else {
select.append($('<option></option>').val(itemData.ID).html(itemData.SubProjectName));
}
});
select.show('slow');
// $("#ProjectID").attr("disabled", "disabled");
}
else {
window.alert(' error : ' + returndata.message);
}
}
}
);
}
function getNameNik() {
window.alert("AAAASSDSD");
var idDept = $("#CreatedNIK").val();
var urlemp = '#Url.Action("GetNameNik")';
$.ajax({
type: "POST",
url: urlemp,
data: { id: idDept },
error: function (jqXHR, textStatus, errorThrown) {
alert("error" + jqXHR.responseText);
},
success: function (returndata) {
if (returndata.ok) {
$('#nikLabel').text("");
$.each(returndata.data, function (index, itemData) {
$('#nikLabel').text(itemData.FirstName + " " + itemData.LastName);
});
}
else {
window.alert(' error : ' + returndata.message);
}
}
}
);
}
function memberdropdown() {
var idDept = $("#AssignGroupID").val();
var subProject = $('#AssignMemberID').val();
var urlemp = '#Url.Action("GetMemberFromGroupID")';
var select = $('#AssignMemberID');
$.ajax({
type: "POST",
url: urlemp,
data: { id: idDept },
error: function (jqXHR, textStatus, errorThrown) {
alert("error" + jqXHR.responseText);
},
success: function (returndata) {
select.empty();
if (returndata.ok) {
$.each(returndata.data, function (index, itemData) {
if (subProject == itemData.ID) {
select.append($('<option selected="selected"></option>').val(itemData.ID).html(itemData.UserName));
} else {
select.append($('<option></option>').val(itemData.ID).html(itemData.UserName));
}
});
select.show('slow');
// $("#ProjectID").attr("disabled", "disabled");
}
else {
window.alert(' error : ' + returndata.message);
}
}
}
);
}
function start() {
cascadingdropdown();
memberdropdown();
}
window.onload = start;
// window.onload = memberdropdown;
</script>
and here my controller:
public ActionResult Edit(string id)
{
CaseInternal caseinternal = db.CaseInternals.Find(id);
caseinternal.NullSafeTrimStrings();
ViewBag.PengaduanID = new SelectList(db.InternalPPengaduans, "ID", "PPengaduanName", caseinternal.PengaduanID);
ViewBag.ProjectID = new SelectList(db.InternalProjects, "ID", "ProjectName", caseinternal.ProjectID);
ViewBag.SubProjectID = new SelectList(db.InternalSubProjects, "ID", "SubProjectName", caseinternal.SubProjectID);
ViewBag.CategoryID = new SelectList(db.MasterCategories, "ID", "CategoryName", caseinternal.CategoryID);
ViewBag.AssignGroupID = new SelectList(db.MasterGroups, "ID", "GroupName", caseinternal.AssignGroupID);
ViewBag.AssignMemberID = new SelectList(db.MasterAssignUsers, "ID", "UserName", caseinternal.AssignMemberID);
ViewBag.BranchID = new SelectList(branchObject.A2BR, "BRCODE", "BRNAME", caseinternal.BranchID);
ViewBag.StatusID = new SelectList(db.MasterStatus, "ID", "StatusName", caseinternal.StatusID);
CaseInternalEditViewModel caseInternalEdit = new CaseInternalEditViewModel();
caseInternalEdit.caseInternal = caseinternal;
caseInternalEdit.caseIDComment = caseinternal.CaseID;
var commentCase = db.CaseComments.Where(p => p.CaseID == caseinternal.CaseID).OrderByDescending(p => p.CreatedDt);
foreach (CaseComment cas in commentCase)
{
caseInternalEdit.caseComment.Add(cas);
}
return View(caseInternalEdit);
}
[HttpPost]
public ActionResult Edit(CaseInternalEditViewModel caseinternalEdit)
{
//CaseInternalEditViewModel caseinternalEdit
CaseInternal caseinternal = caseinternalEdit.caseInternal;
if (ModelState.IsValid)
{
db.Entry(caseinternal).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.PengaduanID = new SelectList(db.InternalPPengaduans, "ID", "PPengaduanName", caseinternal.PengaduanID);
ViewBag.ProjectID = new SelectList(db.InternalProjects, "ID", "ProjectName", caseinternal.ProjectID);
ViewBag.SubProjectID = new SelectList(db.InternalSubProjects, "ID", "SubProjectName", caseinternal.SubProjectID);
ViewBag.CategoryID = new SelectList(db.MasterCategories, "ID", "CategoryName", caseinternal.CategoryID);
ViewBag.AssignGroupID = new SelectList(db.MasterGroups, "ID", "GroupName", caseinternal.AssignGroupID);
ViewBag.AssignMemberID = new SelectList(db.MasterAssignUsers, "ID", "UserName", caseinternal.AssignMemberID);
ViewBag.BranchID = new SelectList(branchObject.A2BR, "BRCODE", "BRNAME", caseinternal.BranchID);
ViewBag.StatusID = new SelectList(db.MasterStatus, "ID", "StatusName", caseinternal.StatusID);
return View(caseinternalEdit);
}
the modelstate is always invalid, because some field is null, field2 in dropdownlist is null when passing to controller.
is the viewbag the problem? should i change the name of viewbag?
#Html.EditorFor(model => model.caseInternal.Title)
is rendered to
<input class="text-box single-line" id="caseInternal_Title" name="caseInternal.Title" type="text" value="ViewModel" />
but dropdownlist
<select id="BranchID" name="BranchID"><option selected="selected" value="001">KANTOR PUSAT NON OPERASIONAL </option>
the different is the name, the branch should be caseinternal.branchID maybe it will work, but how to do that?

Answer 1

You have:
#Html.DropDownList("BranchID")
You want:
#Html.DropDownListFor(model => model.caseInternal.BranchID)
OR if you really don't want to use a DropDownListFor() for whatever reason....
#Html.DropDownList("caseInternal_BranchID")