Question

我正在用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;
}

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

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

我从以下链接获得的信息：accessing viewmodels，this，this和JS and Html helpers只是关于如何从视图模型访问数据的信息，对解决问题并没有帮助我的问题。我希望能有一种更好的方法来实现自己的目标，如果有任何不清楚的地方，我很乐意添加更多细节。

HTML Helper从JavaScript呈现UI元素

0 个答案: