将表数据映射到 asp .Net MVC 中的 ViewModel 列表答案

【问题标题】：Map table data to a ViewModel List in asp .Net MVC将表数据映射到 asp .Net MVC 中的 ViewModel 列表
【发布时间】：2021-07-17 15:48:13
【问题描述】：

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

请问有什么办法吗？

我的看法：

@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>
}

我的 jQuery 函数：

$("#addOWner").click(function () {
    
    var Owners = [];

    Owners.push({
        'First_Name': $("#First_Name").val(),
        'Second_Name': $("#Second_Name").val(),
        'Third_Name': $("#Third_Name").val(),
        'Last_Name': $("#Last_Name").val(),
        'OwnerNid': $("#OwnerNid").val(),
        'OwnerMobile': $("#OwnerMobile").val(),
        'OwneEmail': $("#OwneEmail").val(),
    });

    for (i = 0; i < Owners.length; i++) {
        var content = "<tr>"
        for (i = 0; i < Owners.length; i++) {
            content += '<td>' + Owners[i].First_Name + '</td>';
            content += '<td>' + Owners[i].Second_Name + '</td>';
            content += '<td>' + Owners[i].Third_Name + '</td>';
            content += '<td>' + Owners[i].Last_Name + '</td>';
            content += '<td>' + Owners[i].OwnerNid + '</td>';
            content += '<td>' + Owners[i].OwnerMobile + '</td>';
            content += '<td>' + Owners[i].OwneEmail + '</td>';
            content += "<td><div><button id='" + Owners[i].OwnerNid + "' class='delete' name='delete' type='button'>DELETE</button></div></td>";
        }
        content += "</tr>"

        $('#OwnersTable').append(content);
    };
});

提交表单功能：

$('#WebsiteLicenseForm').on('submit', function (event) {
    event.preventDefault();
    $(this).ajaxSubmit({
        type: "Post",
        url: '/Licenses/SubminWebSiteLicense', // the file to call
        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; }
}

我的 OwnersViewModel：

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; }
}

【问题讨论】：

标签： javascript c# jquery asp.net-mvc model-view-controller

【解决方案1】：

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

$('#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;
})

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

【讨论】：