I am currently trying to insert model objects via HTML form, however when debugged, it is the second table as null objects even though I specified the inputs field with name attributes which match how they have been called out in the models.
Here is the edmx diagram of my table:
my models:
public class TReportHeaderModel
{
public int ID { get; set; }
public int ClientID { get; set; }
public string THeaderTitle { get; set; }
public int RowNumber { get; set; }
public IList<TReporURLModel> TotalReports { get; set; }
}
public class TReporURLModel
{
public int ID { get; set; }
public string name { get; set; }
public string url { get; set; }
public int RowNumber { get; set; }
public string hash { get; set; }
//public int THeaderID { get; set; }
}
Here is my HTML Form as modal. Please ignore the JavaScript as it is a way to demonstrate the functionality of the form I am here trying to implement.
However, my ajax to submit the form is below:
initCreateGroupForm: function ()
{
$('#create-report-group-form').ajaxForm({
dataType: 'json',
beforeSerializate: function ($form, options) {
Reporting.Forms = $form;
},
success: function (response) {
if (response.Success == true) {
JQueryUX.Msg.BootStrapShow({
msg: response.Message,
className: 'alert alert-success',
title: 'Report Has Been Created.'
});
$("#create-report-group-modal").modal('hide');
}
else {
alert(response.Message);
}
},
onError: function (xhr, status, error)
{
alert(error);
}
});
$(document).ready(function() {
$("#add_row").on("click", function() {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#tab_logic tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
var tr = $("<tr></tr>", {
id: "addr" + newid,
"data-id": newid
});
// loop through each td and create new elements with name of newid
$.each($("#tab_logic tbody tr:nth(0) td"), function() {
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a nane
if ($(this).data("name") != undefined) {
var td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.appendTo($(td));
td.appendTo($(tr));
} else {
var td = $("<td></td>", {
'text': $('#tab_logic tr').length
}).appendTo($(tr));
}
});
// add delete button and td
/*
$("<td></td>").append(
$("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>")
.click(function() {
$(this).closest("tr").remove();
})
).appendTo($(tr));
*/
// add the new row
$(tr).appendTo($('#tab_logic'));
$(tr).find("td button.row-remove").on("click", function() {
$(this).closest("tr").remove();
});
}); <!--Ends Here-->
$("#add_row").trigger("click");
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" id="create-report-group-form" action="@Url.Action(" CreateReport ", "TReporting ")" method="post">
<input type="hidden" id="hidden-report-group-id" name="ID" value="null" />
<div class="col-lg-12 table-responsive">
<div class="col-lg-12" style="margin-bottom:20px;margin-left:-18px;">
<label> Report Group Title</label>
<input type="text" class="form-control" id="input-report-header-title" placeholder="Report Group Title" name="THeaderTitle">
</div>
<table class="table table-bordered table-hover table-sortable" id="tab_logic">
<thead>
<tr>
<th class="text-center">
Report Name
</th>
<th class="text-center">
URLs
</th>
<th>
<button id="add_row" type="button" class="btn btn-success" data-role="add">
<span class="glyphicon glyphicon-plus"></span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr id='addr0' data-id="0" class="">
<td data-name="name">
<input type="hidden" id="hidden-report-url-id" name="ID" value="null" />
<input type="text" id="input-report-name" name='name' placeholder='Report Name' class="form-control" />
</td>
<td data-name="url">
<input type="text" id="input-report-url" name='url' placeholder='https://' class="form-control" />
</td>
<td data-name="del">
<button name="del0" type="button" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>
</td>
</tr>
</tbody>
</table>
<div class="modal-footer">
<button type="submit" class="btn-save btn btn-primary btn-block">Save</button>
<button type="button" class="btn-cancel btn btn-secondary btn-block">Cancel</button>
</div>
<!--Modal-Footer Ends Here-->
</div>
<!---Model Body Ends Here-->
</form>Is there specific way to call out the inputs which belong to the second table so that inputs can pass to TReport table with no issue.
Because no matter what I do, it keeps coming back to the service as null. As I debug it, I will get the first table's inputs but nothing will pass to the second query which is TReport table. My service code is below:
public void CreateReport(TReportHeaderModel model)
{
using (var connection = new TReportEntitiesConnection())
{
connection.THeader.Add(new THeader()
{
ID = model.ID,
THeaderTitle = model.THeaderTitle,
RowNumber = model.RowNumber
});
foreach (var urls in model.TotalReports)
{
connection.TReport.Add(new TReport()
{
TReportName=urls.name,
URL=urls.url
});
}
connection.SaveChanges();
}
Thank you!
