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

Posted 2023-04-12

【中文标题】将表数据映射到 asp .Net MVC 中的 ViewModel 列表

【英文标题】：Map table data to a ViewModel List in asp .Net MVC

【发布时间】：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; 

【参考方案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;
)

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