javascript - 用于从 javascript 呈现 UI 元素的 Html 助手

Question

我正在用来自 html 页面的一部分的教育记录填充一个表。我正在使用隐藏输入以便能够从我的视图模型提交数据。因为我无法从 javascript 代码中找到使用 Html 帮助程序（例如 Html.HiddenFor）的方法，所以我必须预先填充表以便复制适当的标记以供 javascript 呈现，例如

'<td>' + degreeaward + '<input data-val="true" data-val-required="The Degree Awarded field is required." id="Educations_' + eduTableRowCount + '__DegreeAwarded" name="Educations[' + eduTableRowCount + '].DegreeAwarded" type="hidden" value=' + degreeaward + '>' + '</td>' +

第一个问题是代码变得混乱。第二个是因为我为输入 id 手动生成列表索引号（eduTableRowCount），如果我从表中删除其中一行，编号会失真，我不会提交所有行。我的视图模型类是：

public class EduAndProfessionalBackground
{
    public long ProfileId { get; set; }

    public List<WorkExperience> WorkExperiences { get; set; }

    [Required(ErrorMessage ="You must add at least one education info")]
    public List<Education> Educations { get; set; }
}
public class Education
{
    [Required, Display(Name = "Institution Name")]
    public string InstitutionName { get; set; }

    [Required]
    public string Concentration { get; set; }

    [Required, Display(Name = "Degree Awarded")]
    public string DegreeAwarded { get; set; }

    [Required, Display(Name = "Start Date")]
    public DateTime StartDate { get; set; }

    [Display(Name = "End Date")]
    public DateTime EndDate { get; set; }

    public bool StillStudiesHere { get; set; } = false;
}

我在页面首次加载时用于预填充表格的代码（根据此处的答案）：

for (int i = 0; i < Model.Educations.Count; i++)
                                                {
                                                    <tr style="font-size:12px">
                                                      ...
                                                        <td>
                                                            @Html.DisplayFor(m => m.Educations[i].Concentration)
                                                            @Html.HiddenFor(m => m.Educations[i].Concentration)
                                                        </td>
                                                        <td>
                                                            @Html.DisplayFor(m => m.Educations[i].DegreeAwarded)
                                                            @Html.HiddenFor(m => m.Educations[i].DegreeAwarded)
                                                        </td>
                                                        ...
                                                        <td style="width:100px;text-align:center; padding:5px">
                                                            <button class="delete btn btn-primary btn-xs my-xs-btn" type="button" id="btnDeleteEdu">
                                                                <span class="glyphicon glyphicon-trash"></span> Delete
                                                            </button>
                                                        </td>
                                                    </tr>
                                                }

用于向表中添加更多行的 javascript 代码：

var concentration = $("#Concentration").val();
var degreeaward = $("#DegreeAwarded").val();
 var eduTableRowCount = document.getElementById("table_edu").getElementsByTagName("tr").length;
eduTableRowCount = eduTableRowCount - 1; // if the number of rows in the table is 4, the next item should have an index of 3
if ((instiName && concentration && degreeaward && start) && (end || stillStudiesHere)) {
    var newEduItem = '<tr style="font-size:12px">' +

           '<td>' + concentration + '<input data-val="true" data-val-required="The Concentration field is required." id="Educations_' + eduTableRowCount + '__Concentration" name="Educations[' + eduTableRowCount + '].Concentration" type="hidden" value=' + concenatration + '>' + '</td>' +
           '<td>' + degreeaward + '<input data-val="true" data-val-required="The Degree Awarded field is required." id="Educations_' + eduTableRowCount + '__DegreeAwarded" name="Educations[' + eduTableRowCount + '].DegreeAwarded" type="hidden" value=' + degreeaward + '>' + '</td>' +

        $('#table_edu').append(education);
}

我从以下链接获得的信息：访问 viewmodels、this、this以及JS 和 Html 帮助程序仅关于如何从 viewmodels 访问数据，并没有帮助解决我的问题。我希望有更好的方法来实现我的目标，如果有任何不清楚的地方，我很乐意添加更多细节。

标签： javascriptc#htmlasp.net-mvcasp.net-mvc-viewmodel