Javascript 在asp.NETMVC中将表数据映射到ViewModel列表

我有一个表单，用户应该输入所有者的详细信息。允许用户输入多个所有者，然后提交表单。我创建了一个jQuery数组来推送用户输入的值，然后在表中呈现这些值。现在，我想在用户提交表单并将其发送到服务器时，将html表的值映射到视图模型

列表

有什么想法吗？我怎么做

我的看法是：

@using (Html.BeginForm(Html.BeginForm(null, null, FormMethod.Post, new { id = "WebsiteLicenseForm", enctype = "multipart/form-data" })))
{
    <div class="row">
        <div class="col-md-6">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.WebsiteLink, "الرابط الإلكتروني للمنصة ", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.WebsiteLink, new { @class = "form-control " })
                @Html.ValidationMessageFor(model => model.WebsiteLink, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="col-md-6">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.ApplicationLink, "الرابط الإلكتروني للتطبيق", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.ApplicationLink, new { @class = "form-control " })
                @Html.ValidationMessageFor(model => model.ApplicationLink, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <br />
    <h3>معلومات المالك</h3>

    <div class="row">
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.First_Name, "الاسم الأول", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.First_Name, new { @class = "form-control ", @required = "required", @id = "First_Name" })
                @Html.ValidationMessageFor(model => model.First_Name, "", new { @class = "text-danger", @id = "First_NameError" })
            </div>
        </div>
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.Second_Name, "اسم الأب", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.Second_Name, new { @class = "form-control ", @required = "required", @id = "Second_Name" })
                @Html.ValidationMessageFor(model => model.Second_Name, "", new { @class = "text-danger", @id = "Second_NameError" })
            </div>
        </div>
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.Third_Name, "اسم الجد", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.Third_Name, new { @class = "form-control ", @required = "required", @id = "Third_Name" })
                @Html.ValidationMessageFor(model => model.Third_Name, "", new { @class = "text-danger", @id = "Third_NameError" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.Last_Name, "العائلة", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.Last_Name, new { @class = "form-control ", @required = "required", @id = "Last_Name" })
                @Html.ValidationMessageFor(model => model.Last_Name, "", new { @class = "text-danger", @id = "Last_NameError" })
            </div>
        </div>
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.OwnerNid, "الهوية الوطنية", new { @class = "control-label main-lable", })
                @Html.TextBoxFor(model => model.OwnerNid, new { @class = "form-control ", @required = "required", @id = "OwnerNid", @type = "number" })
                @Html.ValidationMessageFor(model => model.OwnerNid, "", new { @class = "text-danger", @id = "OwnerNidError" })
            </div>
        </div>
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.OwnerMobile, "رقم الهاتف", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.OwnerMobile, new { @class = "form-control ", @required = "required", @id = "OwnerMobile" })
                @Html.ValidationMessageFor(model => model.OwnerMobile, "", new { @class = "text-danger", @id = "OwnerMobileError" })
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.OwneEmail, "البريد الإلكتروني", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.OwneEmail, new { @class = "form-control ", @required = "required", @id = "OwneEmail" })
                @Html.ValidationMessageFor(model => model.OwneEmail, "", new { @class = "text-danger", @id = "OwneEmailError" })
            </div>
        </div>
        <div class="col-md-4">
            <br /><br />
            <input type="button" value="add another owner " class="main-submit" id="addOWner" name="AddOwner" />
        </div>
    </div>

    <br />

    <table class="table main-table" id="OwnersTable">
        <thead>
            <tr>
                <th>الاسم الأول</th>
                <th>اسم الأب</th>
                <th>اسم الجد</th>
                <th>العائلة</th>
                <th>رقم الهوية</th>
                <th>الهاتف</th>
                <th>البريد الإلكتروني</th>
                <th>حذف</th>
            </tr>
           
        </thead>
    </table>

    <div class="main-form-submit">
        <input type="submit" value="حفظ" class="main-submit" id="submit" name="submit" />
    </div>
}

我的主要模型类：

public class WebsiteLicenseViewModel
{
    public string WebsiteName { get; set; }
    public string WebsiteLink { get; set; }
    public string ApplicationLink { get; set; }

    public string CrNumber { get; set; }
    public string OwnerNid { get; set; }
    public string OwnerMobile { get; set; }
    public string OwnerEmail { get; set; }

    public string First_Name { get; set; }
    public string Second_Name { get; set; }
    public string Third_Name { get; set; }
    public string Last_Name { get; set; }

    public string AttachmentUrl { get; set; }

    public List<OwnersViewModel> OwnersList { get; set; }
}

---

您可以将表值推送到数组中，并将其作为附加数据传递给控制器，以便将其转换为列表。例如：

$('#WebsiteLicenseForm').on('submit', function (event) {
    event.preventDefault();

    //get array from table
    var owners = [];
    $('#OwnersTable').eq(0).find('tr').each((r, row) => owners.push($(row).find('td,th').map((c, cell) => $(cell).text()).toArray()))

    //define form
     var form = $('#WebsiteLicenseForm');
   
    $.ajax({
        type: "Post",
        url: '/Licenses/SubminWebSiteLicense', // the file to call
        data: form.serialize() + '&owners=' + JSON.stringify(owners),
        dataType : 'json'
        success: function (response) {
            alert("Success");
        }
    });

    return false;
})

或者，您可以将所有者数组添加到模型中，然后在将其传递给控制器之前将其他数据附加到表单中

public class WebsiteLicenseViewModel
{
    public string WebsiteName { get; set; }
    public string WebsiteLink { get; set; }
    public string ApplicationLink { get; set; }

    public string CrNumber { get; set; }
    public string OwnerNid { get; set; }
    public string OwnerMobile { get; set; }
    public string OwnerEmail { get; set; }

    public string First_Name { get; set; }
    public string Second_Name { get; set; }
    public string Third_Name { get; set; }
    public string Last_Name { get; set; }

    public string AttachmentUrl { get; set; }

    public List<OwnersViewModel> OwnersList { get; set; }
}

public class OwnersViewModel
{
    public string OwnerNid { get; set; }
    public string OwnerMobile { get; set; }
    public string OwnerEmail { get; set; }

    public string First_Name { get; set; }
    public string Second_Name { get; set; }
    public string Third_Name { get; set; }
    public string Last_Name { get; set; }
}

$('#WebsiteLicenseForm').on('submit', function (event) {
    event.preventDefault();

    //get array from table
    var owners = [];
    $('#OwnersTable').eq(0).find('tr').each((r, row) => owners.push($(row).find('td,th').map((c, cell) => $(cell).text()).toArray()))

    //define form
     var form = $('#WebsiteLicenseForm');
   
    $.ajax({
        type: "Post",
        url: '/Licenses/SubminWebSiteLicense', // the file to call
        data: form.serialize() + '&owners=' + JSON.stringify(owners),
        dataType : 'json'
        success: function (response) {
            alert("Success");
        }
    });

    return false;
})