Get child entities of entity on form submit in jQuery

Question

Suppose I have two tables in my EF that are related:

public partial class Table1 
{
    public int Id {get; set;}
    public int Table2Id {get; set;}
    public virtual Table2 Table2 {get; set}
}
public partial class Table2 
{
    public Table2()
    {
        Table1 = new HashSet<Table1>
    }

    public int Id {get; set;}
    public string datastring {get; set;}
    public virtual Icollection<Table1> Table
}

I've simplified this obviously, but it resembles my real issue well enough.

Normally I can easily extract data from a form submit in jQuery if its just a single table. Which I would do like this:

form.serializeArray();

However, in this case I want to extract data from my form that goes into a 'child' table of my actual table.

<div class="container">
    <form id="MyForm">
        <input name="Table1.Table2.dataString" />
        <button type="submit">save</button>
    </form>
</div>

I have a feeling that this scenario is supported in .net MVC, but I have no idea how to actually do the naming in order to make it understand that it belongs to a 'child' table.

The quick and dirty way would be to target every input field in my form. But it's a large form, hence why I would really want to avoid that selector madness.

Update:

Even though I have not made my controller yet, I believe it should receive a Table1 object like so:

public ActionResult UpdateTables(Table1 table1)
{
    //Logic to call serviceclass
}

In your view I assume you're passing the Table1 model? Will you include your current controller action that will serve as the receiving endpoint of this? Thanks. — Jerdine Sabio, Apr 21 '20 at 15:48

score 0 · Accepted Answer · answered Apr 21 '20 at 16:42

In a synchronous POST (not AJAX), the child records should be placed by index;

<input name="Table1.Id" value="1">

<input name="Table1.Table2[0].Id" value="1">
<input name="Table1.Table2[0].datastring" value="1A">

<input name="Table1.Table2[1].Id" value="2">
<input name="Table1.Table2[1].datastring" value="2B">

<input name="Table1.Table2[2].Id" value="3">
<input name="Table1.Table2[2].datastring" value="3C">

If you're going to use AJAX and controller action accepts an object of type Table1;

public ActionResult UpdateTables(Table1 table1)
{
    //Logic to call serviceclass
}

Then you need to format your json object like this (form.Serialize won't work, you need to format it manually by looping over your child entities);

{
   Id: 1,
   Table2: [
      { Id: 1, datastring: "1A" },
      { Id: 2, datastring: "2B" },
      { Id: 3, datastring: "3C" }
   ]
}

I suggest that on your HTML, add a wrapper for your child entities, a div with a class;

<div class="child">
   <input name="Table1.Table2[0].Id" value="1">
   <input name="Table1.Table2[0].datastring" value="1A">
</div>

<div class="child">
   <input name="Table1.Table2[1].Id" value="2">
   <input name="Table1.Table2[1].datastring" value="2B">
</div>

So that you could loop through that child class and fill your Table2 array.

var childArray = [];

// loop through elements with child class and access the input fields and assign to an array
$(".child").each(function(){
   var id = $(this).find("input").eq(0).val();
   var datastring = $(this).find("input").eq(1).val();

   var childObject = {id:id,datastring:datastring};
   childArray.push(childObject);
});

// create your json to submit via ajax
var jsonToSubmitToController = {
   Id: $("#table1Id").val(),
   Table2: childArray
};

form.Serialize for not working json explained here; JSON object post using form serialize not mapping to c# object`

Thank you for your answer. Unfortunately I plan to use Ajax, and I have multiple child tables with different entities, meaning that I might end up doing the selector madness after all :-( right? — Jeppe Christensen, Apr 21 '20 at 19:39
@JeppeChristensen yes, it will help slightly if you wrap/group them within a certain class. You could also look at this; https://stackoverflow.com/questions/15756844/json-object-post-using-form-serialize-not-mapping-to-c-sharp-object — Jerdine Sabio, Apr 21 '20 at 20:11

Get child entities of entity on form submit in jQuery

1 Answers1