用于从javascript呈现UI元素的Html帮助程序

我正在用html页面的一部分中的教育记录填充一个表。我使用隐藏输入，以便能够从我的viewmodel提交数据。因为我无法从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;
}

公共教育和专业背景
{
公共长配置文件ID{get；set；}
公共列表工作经验{get；set；}
[必需（ErrorMessage=“您必须至少添加一个教育信息”）]
公共列表教育{get；set；}
}
公营教育
{
[必需，显示（Name=“机构名称”）]
公共字符串机构名称{get；set；}
[必需]
公共字符串浓度{get；set；}
[必需，显示（Name=“授予学位”）]
公共字符串递减{get；set；}
[必需，显示（Name=“开始日期”）]
公共日期时间起始日期{get；set；}
[显示（Name=“结束日期”）]
公共日期时间结束日期{get；set；}
public bool StillStudiesHere{get；set；}=false；
}

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

for（int i=0；im.Educations[i].Concentration）
@Html.HiddenFor（m=>m.Educations[i].Concentration）
@DisplayFor（m=>m.Educations[i].DegreeAwarded）
@Html.HiddenFor（m=>m.Educations[i].DegreeAwarded）
...
删除
}

用于向表中添加更多行的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);
}

var concentration=$（“#concentration”）.val（）；
var degreeaward=$（“#DegreeAwarded”）.val（）；
var eduTableRowCount=document.getElementById（“table_edu”）.getElementsByTagName（“tr”）.length；
eduTableRowCount=eduTableRowCount-1；//如果表中的行数为4，则下一项的索引应为3
如果（（研究所名称和浓度和研究所学位和研究所开始）和（（研究所结束）{
var newEduItem=“”+
''+浓度+''+''+
''+degreeaward+''++
$（'table#u edu'）。追加（教育）；
}

我从以下链接获得的信息：，仅涉及如何从viewmodels访问数据，对解决我的问题没有帮助。

---

如果有更好的方法来实现我的目标，我将不胜感激。如果有任何不清楚的地方，我将很高兴添加更多细节。

您不能在javascript中使用

HtmlHelper

方法。Javascript在客户端运行，c代码在服务器上运行。有关一些选项，请参阅使用

begincollectionItem

的详细示例。非常感谢，我从第二个链接中学习了这个示例，它解决了我的问题。然而，我遇到了一个问题，在我认识到BeginCollectionItem方法中字符串参数的本质之后很久，我就解决了这个问题。

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