Html помощник для визуализации элементов пользовательского интерфейса из JavaScript - PullRequest
Новая
       29

Html помощник для визуализации элементов пользовательского интерфейса из JavaScript

0 голосов
/ 30 августа 2018

Я заполняю таблицу записями об образовании из раздела html-страницы. Я использую скрытые входные данные, чтобы иметь возможность отправлять данные из моей модели представления. Поскольку я не могу найти способ использовать Html-помощники (например, Html.HiddenFor) из кодов JavaScript, мне пришлось предварительно заполнить таблицу, чтобы скопировать соответствующую разметку для визуализации 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>' +

Первая проблема заключается в том, что код становится грязным. Во-вторых, поскольку я вручную генерирую индексный номер списка (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);
}

Информация, которую я получил по следующим ссылкам: доступ к моделям представления , this , this и JS и Html помощники включены только как получить доступ к данным из viewmodels и не помогли в решении моей проблемы. Я был бы признателен за лучший подход к достижению моей цели, и я был бы рад добавить больше деталей, если что-то неясно.

...