The objective was to add new entries in the collection via PartialView. In the first entry, checking via debugging it was working fine. But if i add another entry, it doesn't retain or the last entries is not included in the collection.
What seems to be the problem that my entries are not save/collected in the collection?
Model :
public class MasterInfo {
public int id { get; set; }
public string name { get; set; }
}
public class DetailInfo
{
public int id { get; set; }
public string data_name { get; set; }
public int data_val { get; set; }
}
public class MasterDtlViewModel
{
public MasterDtlViewModel() {
this.Details = new List<DetailInfo>();
}
public MasterInfo Master { get; set; }
public List<DetailInfo> Details { get; set; }
}
Controller
public ActionResult NewMaster()
{
var model = new MasterDtlViewModel();
model.Master = new MasterInfo { id = 1, name = "Chris" };
model.Details.Add(new DetailInfo
{
data_name = "Fee",
data_val = 1000
});
model.Details.Add(new DetailInfo
{
data_name = "Charge",
data_val = 500
});
return View("CreateMasterDtlView", model);
}
//POST
public ActionResult NewMaster(MasterDtlViewModel model)
{
var testDetailEntry = model.Details;
return View("", model);
}
//POST
public ActionResult AddNewEntry(MasterDtlViewModel model, DetailInfo newEntry)
{
model.Details.Add(newEntry);
return PartialView("_tableDetailView", model);
}
View :
@model Permit.MasterDtlViewModel
@{
}
<div class="col-md-12">
@using (Html.BeginForm())
{
<div class="panel-group">
<div class="panel panel-success">
<div class="panel-heading">
<div class="panel-title">Master</div>
</div>
<div class="panel-body">
<div class="form-group row">
@Html.LabelFor(m => m.Master.id, "Customer Id", new { @class = "control-label col-md-4" })
<div class="col-md-4">
@Html.TextBoxFor(m => m.Master.id, null, new { @class = "form-control" })
</div>
</div>
<div class="form-group row">
@Html.LabelFor(m => m.Master.name, "Customer Name", new { @class = "control-label col-md-4" })
<div class="col-md-4">
@Html.TextBoxFor(m => m.Master.name, null, new { @class = "form-control" })
</div>
</div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-success">
<div class="panel-heading">
<div class="panel-title">Detail Info</div>
</div>
<div class="panel-body">
<div class="form-group row">
@Html.Label("DataName", "Data Name", new { @class = "control-label col-md-4" })
<div class="col-md-4">
@Html.TextBox("DataName", null, new { @class = "form-control" })
</div>
</div>
<div class="form-group row">
@Html.Label("DataValue", "Data Value", new { @class = "control-label col-md-4" })
<div class="col-md-4">
@Html.TextBox("DataValue", null, new { @class = "form-control" })
</div>
</div>
<div class="col-md-4 col-md-offset-4">
<input type="button" id="AddButton" value="Add" class="btn btn-info" />
</div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-success">
<div class="panel-heading">
<div class="panel-title">Added Details</div>
</div>
<div id="dtlTable">
@Html.Partial("_tableDetailView", Model)
</div>
</div>
</div>
<div class="col-md-4 col-md-offset-4">
<input type="submit" value="Save" class="btn btn-success" />
</div>
}
</div>
@section scripts {
<script>
$("#AddButton").click(function () {
var mainModel = @Html.Raw(Json.Encode(Model));
var dataName = $("#DataName").val();
var dataValue = $("#DataValue").val();
var inputs = {
"id": 0,
"data_name": dataName,
"data_val": dataValue
};
var targetUrl = '/Permit/MastDetail/AddNewEntry';
$.ajax({
type: "POST",
url: targetUrl,
contentType: "application/json",
data: JSON.stringify({ model: mainModel, newEntry: inputs }),
success: function (result, status, xhr) {
$("#dtlTable").html(result).show();
$("#DataName").val("");
$("#DataValue").val("");
},
error: function (xhr, status, error) {
// $("#dataDiv").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
}
});
});
</script>
}
PartialView
@model Permit.MasterDtlViewModel
<div class="panel-body">
<table class="table table-bordered table-hover table-striped table-responsive">
<thead>
<tr>
<td>Idx</td>
<td>Data Name</td>
<td>Value</td>
</tr>
</thead>
<tbody>
@if (Model.Details != null)
{
for (int i = 0; i < Model.Details.Count; i++)
{
<tr>
<td><input type="hidden" name="@String.Format("Details[{0}].id",i)" /> @Model.Details[i].id </td>
<td><input type="hidden" name="@String.Format("Details[{0}].data_name",i)" />@Model.Details[i].data_name </td>
<td><input type="hidden" name="@String.Format("Details[{0}].data_val",i)" />@Model.Details[i].data_val </td>
</tr>
}
}
</tbody>
</table>
</div>
(Note: Having difficulty attaching the codes)