How can i post a nested model which contains ienumerable model

Question

How can i post a nested model which contains ienumerable model

Muhammed Vaseem 0


<div class="col-md-10" id="LvformContainer">
		<form method="post" enctype="multipart/form-data" data-ajax="true">
			<div class="row">
				<div class="col-md-8">
					<div class="row">
						<div class="col-md-8">
							<div class="form-group d-flex align-items-center">
								<label class="form-label me-2">Document</label>
								<div class="form-check me-2">
									<input class="form-check-input" type="checkbox">
								</div>
								<input class="form-control" value=" @ViewBag.LvDoc">
								<button class="btn me-2" id="loadDocModalButton" data-toggle="modal" data-target="#DocNoDtModal"><i class="fa-solid fa-table"></i></button>
								<button class="btn btn-primary">
									<i class="fa-solid fa-pen-to-square"></i>
								</button>
							</div>
						</div>
						<div class="col-md-4">
							<div class="form-group d-flex align-items-center">
								<label class="form-label me-2">Document Date</label>
							    <input class="form-control" asp-for="LvLedger.TrDate" type="date" >
							</div>
						</div>
					</div>
					<div class="form-group d-flex align-items-center mb-2">
						<label class="form-label me-2">Employee</label>
						<div class="form-group d-flex align-items-center me-2">
							<input class="form-control" type="text" name="EmpDets.EmpId" asp-for="EmpDets.EmpId">
							<button class="btn" id="loadModalButton" data-toggle="modal" data-target="#EmpDtModal"><i class="fa-solid fa-table"></i></button>
						</div>
 
						<input class="form-control" type="text" name="EmpDets.EmpName" asp-for="EmpDets.EmpName">
						<span></span>
					</div>
					<div class="form-group d-flex align-items-center ">
						<label class="form-label me-2">Description</label>
						<input class="form-control" asp-for="LvLedger.Remark" type="text">
						<span></span>
					</div>
 
				</div>
				<div class="col-md-4">
				<div class="form-group ">
						<label class="form-label justify-content-center me-2">Address</label>
						<textarea class="form-control" asp-for="LvLedger.Address" type="text"></textarea>
					</div>
				</div>
			</div>
		
		<div class="form-group d-flex align-items-center mt-3 bg-primary">
			<div class="form-check m-1">
				<input class="form-check-input" type="checkbox">
			</div>
			<label class="form-label ">Leave Excemption</label>
			<label class="form-label mx-auto text-light">Leave Assigning</label>
		</div>
		<section class="card-container ">
			<div class="table-responsive" style="height:200px;">
				<table class="table table-striped" style="max-width:150%; table-layout:auto;">
					<thead>
						<tr>
							<th>Sl.No</th>
							<th>Type</th>
							<th>Name</th>
							<th>(-)</th>
							<th>From</th>
							<th>To</th>
							<th>(-)</th>
							<th>Days</th>
							<th>Wk/Off</th>
							<th>Holidays</th>
							<th>Excess</th>
							<th>Applied</th>
							<th>Wage</th>
							<th>Remark</th>
							<th></th>
						</tr>
					</thead>
					<tbody id="LvInputTb">
						@if (Model.lvLedgerDets is not null)
						{
							@foreach (var item in Model.lvLedgerDets)
							{
								<tr>
 
									<td>@item.SlNo</td>
									<td>
										<div class="form-group d-flex align-items-center">@item.LvTpNo
											@*<button class="btn" id="loadLvModalButton" data-toggle="modal" data-target="#LvTpModal"><i class="fa-solid fa-table"></i></button>*@
										</div>
									</td>
									<td>@item.LvTypeName </td>
									<td>@item.BeginDed </td>
									<td>
										@(item.StartDt != null ? item.StartDt.Value.ToString("dd-MM-yyyy") : string.Empty)
 
									</td>
									<td>@(item.EndDt != null ? item.EndDt.Value.ToString("dd-MM-yyyy") : string.Empty)</td>
									<td>@item.EndDed </td>
									<td>@item.PrdDays</td>
									<td>@item.WkDays</td>
									<td>@item.HoliDays</td>
									<td></td>
									<td>@item.NetDays</td>
									@foreach (var lvtp in Model.LvDef)
									{
										if (lvtp.LvDefNo == item.LvTpNo)
										{
											<td>@lvtp.IsWageView</td>
										}
 
									}
									<td>@item.LdgrRemark</td>
									<td>
										<a href="javascript:void(0)" class="btn-link me-2 edit-btn" onclick="editRow(@item.SlNo)">Edit</a>
                                        <a href="javascript:void(0)" class="btn-link" onclick="deleteRow(@item.SlNo)">Delete</a>
									</td>	
								</tr>
							}
						}
					</tbody>
				</table>
				@if (Model.lvLedgerDets is not null)
					{
						@for (var i = 0; i < Model.lvLedgerDets.Count; i++)
						{
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].SlNo" />
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].LvTpNo"  />
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].LvTypeName"  />
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].BeginDed" />
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].StartDt"  />
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].EndDt" />
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].EndDed"  />
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].PrdDays" />
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].WkDays"  />
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].HoliDays" />
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].NetDays"  />
							<input type="hidden" asp-for="@Model.lvLedgerDets[@i].LdgrRemark" />
						}
					}
					
			</div>
		</section>
		<div class="form-group d-flex align-items-center mt-3">
			<div class="form-check m-1">
				<input class="form-check-input" type="checkbox">
			</div>
			<label class="form-label">Avoid AL Salary Booking</label>
			<div class="form-group ms-auto">
				@*<button class="btn" id="addRowButton">Add</button>*@
				<button class="btn" id="AddLvDtButton" data-toggle="modal" data-target="#AddLvDtModal">Add</button>
				@*<button class="btn">Remove</button>
				<button class="btn">Insert</button>*@
			    <button class="btn" type="submit" id="verifyButton">Verify</button>
			</div>
		</div>
		</form>
</div>

public class LvDefViewModel
	{
		//public long DocNo { get; set; }
		public List<LvLedgerDet> lvLedgerDets { get; set; }
		public LvLedger? LvLedger { get; set; }
		public IEnumerable<LvDef>? LvDef { get; set; }
		//public LvLedgerDet? LvLedgerDetInput { get; set; }
		public EmpDet? EmpDets { get; set; }
	}

[HttpPost]
		public IActionResult VerifyLeave([FromBody]LvDefViewModel model)
		{
			if (ModelState.IsValid)
			{
				try
				{
					
					return PartialView("~/Views/Shared/Leave/_VerifyView.cshtml", model);
				}
				catch (JsonException)
				{
					ModelState.AddModelError("", "Invalid JSON payload");
				}
				catch (Exception ex)
				{
					ModelState.AddModelError("", $"An error occurred: {ex.Message}");
				}
			}
 
			// If ModelState is invalid or an error occurred, return an error response
			var errors = ModelState.Values.SelectMany(v => v.Errors.Select(e => e.ErrorMessage));
			return BadRequest(errors);
		}

The problem i encounder is i am not able to post the data to C# ihad uploaded the js i used for posting

AgaveJoe 30,126 Reputation points

2023-07-16T15:34:05.7233333+00:00

The View indicates LvDef is a child of lvLedgerDets but the model does not support this relationship. Plus you did not share the LvLedgerDet or LvDef types.

Is there anyway you can explain the use case as the code is very confusing?

Muhammed Vaseem 0

 
public partial class LvLedgerDet
{
    public byte? SlNo { get; set; }
 
    public byte? MergeWith { get; set; }
 
    public long? LvLink { get; set; }
    public decimal BeginDed { get; set; }
	[DataType(DataType.Date)]
	[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
	public DateTime? StartDt { get; set; }
	[DataType(DataType.Date)]
	[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
	public DateTime? EndDt { get; set; }
    public decimal EndDed { get; set; }
 
    public string? LdgrRemark { get; set; }
 
    public string? AutoRemark { get; set; }
 
    public long? Weid { get; set; }
 
    public byte? LvTpNo { get; set; }
 
    public long? EmpNo { get; set; }
 
    public float? PrdDays { get; set; }
 
    public float? WkDays { get; set; }
 
    public float? HoliDays { get; set; }
 
    public float? NetDays { get; set; }
 
    public string? LvTypeName { get; set; }
 
    public bool IsLeaveIn { get; set; }
 
    public DateTime? LvCalcDt { get; set; }
 
    public byte? IsEnCash { get; set; }
 
    public DateTime? PayMonth { get; set; }
 
    /// <summary>
    /// 0 - Initial Leave, 1 - Extended, 2 - Rejoined Correction
    /// </summary>
    public byte EntryIndex { get; set; }
 
    public DateTime? ReJoinDt { get; set; }
 
    public bool AdvSettled { get; set; }
}
lvDef is not a child of lvledgerdet i am fetcing the lvdef and comparing a value with one of the value lvdef and viewing the output of lvdef

AgaveJoe 30,126 Reputation points

2023-07-17T13:18:32.6633333+00:00
lvDef is not a child of lvledgerdet i am fetcing the lvdef and comparing a value with one of the value lvdef and viewing the output of lvdef

This is the definition of parent-child relationship!

There are too many code smells to figure out the intent. Using IEnumerable<T> does not make a lot of sense from a View Model design perspective. The approach can work in Razor Pages if the object is a bound property. This is a rather clunky approach since the markup must convert the IEnumerable<T> to a List<T> or an array to use a for-loop. so why not just use a List<T> in the first place?

Is there any way you can explain the use case? I'm pretty sure there is a much simpler design path.

public class IndexModel : PageModel { public void OnGet() { Pets = new List<Pet>() { new Pet() {Name="Zoey"}, new Pet() {Name="Archie"}, }; } public void OnPost() { } [BindProperty] public IEnumerable<Pet>? Pets { get; set; } }

public class Pet { public string Name { get; set; } }

<form method="post"> @for (int i = 0; i < Model.Pets.Count(); i++) { <div> <input type="text" asp-for="@Model.Pets.ToList()[i].Name" /> </div> } <div> <input type="submit" value="submit" /> </div> </form>

Muhammed Vaseem 0

// Handle click event for the "Verify" button
$('#LvformContainer').on('click', '#verifyButton', function (e) {
    e.preventDefault();
 
    //var Data = $('#LvformContainer form').serializeArray();
 
    var lvLedgerDetsData = [];
 
    // Iterate over the table rows in the LvInputTb tbody
    $('#LvInputTb tr').each(function () {
        var slNo = $(this).find('td:nth-child(1)').text();
        var lvTpNo = $(this).find('td:nth-child(2)').text();
        var lvTypeName = $(this).find('td:nth-child(3)').text();
        var beginDed = $(this).find('td:nth-child(4)').text();
        var startDt = $(this).find('td:nth-child(5)').text();
        var endDt = $(this).find('td:nth-child(6)').text();
        var endDed = $(this).find('td:nth-child(7)').text();
        var prdDays = $(this).find('td:nth-child(8)').text();
        var wkDays = $(this).find('td:nth-child(9)').text();
        var holiDays = $(this).find('td:nth-child(10)').text();
        var netDays = $(this).find('td:nth-child(13)').text();
        var ldgrRemark = $(this).find('td:nth-child(14)').text();
 
        // Create an object representing the row data
        var rowData = {
            SlNo: slNo,
            LvTpNo: lvTpNo,
            LvTypeName: lvTypeName,
            BeginDed: beginDed,
            StartDt: startDt,
            EndDt: endDt,
            EndDed: endDed,
            PrdDays: prdDays,
            WkDays: wkDays,
            HoliDays: holiDays,
            NetDays: prdDays,
            LdgrRemark: ldgrRemark
        };
 
        // Push the row data to the array
        lvLedgerDetsData.push(rowData);
    });
 
    // Create an object representing the form data
 
    var lvDoc = $('.form-control[value="@ViewBag.LvDoc"]').val();
    var documentDate = $('.form-control[type="date"][name="LvLedger.TrDate"]').val();
    var employeeId = $('.form-control[name="EmpDets.EmpId"]').val();
    var employeeName = $('.form-control[name="EmpDets.EmpName"]').val();
    var description = $('.form-control[name="LvLedger.Remark"]').val();
    var address = $('.form-control[name="LvLedger.Address"]').val();
 
    // Create an object representing the form data
    var formData = {
        lvLedgerDets: lvLedgerDetsData,
        LvDoc: lvDoc,
        'LvLedger.TrDate': documentDate,
        'EmpDets.EmpId': employeeId,
        'EmpDets.EmpName': employeeName,
        'LvLedger.Remark': description,
        'LvLedger.Address': address
    };
    // Make an AJAX request to verify the form data
    $.ajax({
        url: '/leave/VerifyLeave',
        type: 'POST',
        data: formData,
        success: function (result) {
            console.log(formData);
            // Handle success and load the partial view with the verified data
            $('#verifyContainer').html(result);
        },
        error: function (error) {
            console.log(error);
            // Handle error if necessary
        }
    });
});
 
 
// Handle other button click events inside the form
$('#LvformContainer form').on('click', 'button:not(#verifyButton)', function (e) {
    e.preventDefault();
 
    // Handle button click event logic
});

I got solution for my problem using this js

Bruce (SqlWork.com) 78,006 Volunteer Moderator

you javascript is doing form/urlencoded post. this only supports name/value string pairs. but lvLedgerDetsData when converted to string is only "[object Object]". perhaps you wanted to send json.

  $.ajax({
        url: '/leave/VerifyLeave',
        type: 'POST',
        data: JSON.serialize(formData),
        contentType: "application/json",
        success: function (result) {
            console.log(formData);
            // Handle success and load the partial view with the verified data
            $('#verifyContainer').html(result);
        },
        error: function (error) {
            console.log(error);
            // Handle error if necessary
        }
    });

1 answer

Your answer

AgaveJoe 30,126 Reputation points

2023-07-16T15:34:05.7233333+00:00

The View indicates LvDef is a child of lvLedgerDets but the model does not support this relationship. Plus you did not share the LvLedgerDet or LvDef types.

Is there anyway you can explain the use case as the code is very confusing?
Muhammed Vaseem 0 Reputation points

2023-07-17T09:24:46.29+00:00

public partial class LvLedgerDet { public byte? SlNo { get; set; } public byte? MergeWith { get; set; } public long? LvLink { get; set; } public decimal BeginDed { get; set; } [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)] public DateTime? StartDt { get; set; } [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)] public DateTime? EndDt { get; set; } public decimal EndDed { get; set; } public string? LdgrRemark { get; set; } public string? AutoRemark { get; set; } public long? Weid { get; set; } public byte? LvTpNo { get; set; } public long? EmpNo { get; set; } public float? PrdDays { get; set; } public float? WkDays { get; set; } public float? HoliDays { get; set; } public float? NetDays { get; set; } public string? LvTypeName { get; set; } public bool IsLeaveIn { get; set; } public DateTime? LvCalcDt { get; set; } public byte? IsEnCash { get; set; } public DateTime? PayMonth { get; set; } /// <summary> /// 0 - Initial Leave, 1 - Extended, 2 - Rejoined Correction /// </summary> public byte EntryIndex { get; set; } public DateTime? ReJoinDt { get; set; } public bool AdvSettled { get; set; } } lvDef is not a child of lvledgerdet i am fetcing the lvdef and comparing a value with one of the value lvdef and viewing the output of lvdef
AgaveJoe 30,126 Reputation points

2023-07-17T13:18:32.6633333+00:00

lvDef is not a child of lvledgerdet i am fetcing the lvdef and comparing a value with one of the value lvdef and viewing the output of lvdef

This is the definition of parent-child relationship!

There are too many code smells to figure out the intent. Using IEnumerable<T> does not make a lot of sense from a View Model design perspective. The approach can work in Razor Pages if the object is a bound property. This is a rather clunky approach since the markup must convert the IEnumerable<T> to a List<T> or an array to use a for-loop. so why not just use a List<T> in the first place?

Is there any way you can explain the use case? I'm pretty sure there is a much simpler design path.

public class IndexModel : PageModel { public void OnGet() { Pets = new List<Pet>() { new Pet() {Name="Zoey"}, new Pet() {Name="Archie"}, }; } public void OnPost() { } [BindProperty] public IEnumerable<Pet>? Pets { get; set; } }

public class Pet { public string Name { get; set; } }

<form method="post"> @for (int i = 0; i < Model.Pets.Count(); i++) { <div> <input type="text" asp-for="@Model.Pets.ToList()[i].Name" /> </div> } <div> <input type="submit" value="submit" /> </div> </form>
Bruce (SqlWork.com) 78,006 Reputation points Volunteer Moderator

2023-07-17T16:10:07.03+00:00

you javascript is doing form/urlencoded post. this only supports name/value string pairs. but lvLedgerDetsData when converted to string is only "[object Object]". perhaps you wanted to send json.

$.ajax({ url: '/leave/VerifyLeave', type: 'POST', data: JSON.serialize(formData), contentType: "application/json", success: function (result) { console.log(formData); // Handle success and load the partial view with the verified data $('#verifyContainer').html(result); }, error: function (error) { console.log(error); // Handle error if necessary } });

Answer 1

Bruce (SqlWork.com) 78,006 Volunteer Moderator

You can’t. The data binder can not create an instance of an abstract type when its copies values to the model. In your model either define IEnumerable’s to a concrete type or initialize them to a concrete type.

Share via

How can i post a nested model which contains ienumerable model

1 answer

Your answer