Создайте объект Razor с помощью JavaScript

Question

Чтобы долго читать (tl; др):

Заставьте это добавить новую ячейку в таблицу, которая показывает выпадающий список бритвы / mvc:

var element1 = document.createElement(@Html.DropDownListFor(m => m.Contact.Attribute, Model.Contact.Attributes, new { @class = "form-control" }));

Длинный, но более подробный вопрос:

Довольно простой ответ, я думаю, но я слишком плохо знаком с Бритвой.

В настоящее время у меня есть таблица, в которой строки добавляются с помощью JavaScript с помощью кнопки «Добавить строку».

Я на самом деле задавал вопрос раньше и нашел решение, которое отлично сработало. Тем не менее, теперь мне нужно это в Razor, поэтому мой предыдущий вопрос не может работать.

Вот ссылка с картинками на другой мой пост:

Создание динамических элементов в формате MVC

Хорошо, так что новый выпуск. У меня есть элемент бритвы, который должен быть продублирован с помощью JavaScript. Я изменил имена классов и свойств.

Итак, в таблице у меня есть:

<td>@Html.DropDownListFor(m => m.Contact.Attribute, Model.Contact.Attributes, new { @class = "form-control" })</td>

Что прекрасно работает. Таблица заполняется этим в этом просто отлично. Однако, как и в моем другом посте, мне нужно скопировать всю строку с помощью JavaScript (или любого другого существующего решения).

В настоящее время у меня есть этот стиль вставки:

var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "[#].chkbox";
element1.className = "form-control";
cell1.appendChild(element1);

Тип меняется с текстового на электронное письмо на тел. '#' В name = "[#].chkbox" на самом деле является переменной, через которую передаются, поэтому каждый из # различен. Так или иначе, я хочу сделать:

var element1 = document.createElement(@Html.DropDownListFor(m => m.Contact.Attribute, Model.Contact.Attributes, new { @class = "form-control" }));

Примечание: визуализированная версия продолжает выглядеть так

var element2 = document.createElement(<select class="form-control" id="InjuredPerson_SuspectedInjury" name="InjuredPerson.SuspectedInjury"><option value="A.G.E.">A.G.E.</option>

Answer 1

Так что я был не прав.MVC будет читать поля выбора, которые не находятся в бритве.Так что это хорошо.

Это была проблема с именами.Я не понял этого, но сотрудник с WAY большим опытом, чем я, был достаточно любезен, чтобы помочь.

По сути, мы сделали один выпадающий список на основе модели, используя Razor, а затем украли вариантыиз этого выпадающего, чтобы сделать другие выпадающие.

Мы составили список контактов в большом классе и назвали все наши элементы в этом стиле:

name = "NameOfListElement[listNumber].ClassProperty"

name = "Contacts[0].FullName"

Класс 1:

public class BigClass {
public List<Contact> contacts {gs}
public Contact contact {gs}
public List<SelectedListItem> DropDownItems {gs}
 }

Класс 2:

public class Contact {
public string FullName {gs}
public string DropDownItem {gs}
}

HTML с сокращением.Важно ввести имя для синтаксиса Razor:

 @model nameOfProject.Models.BigClass


    @using (Html.BeginForm("ViewName", "ViewFolder", FormMethod.Post)) {

    //all other form elements. make a standard table. Then add this:

    <tr>
    <td><input type="text" name="Contacts[0].FullName" class="form-control" /></td>
    <td>@Html.DropDownListFor(m => m.Contact.DropDownItem, Model.DropDownItems, new { 
    @class = "form-control", Name = "Contacts[0].DropDownItem" })</td>
    </tr>
     }

Razor создаст это, что важно для идентификатора:

<select name="Contacts[0].DropDownItem" class="form-control" 
id="Contact_DropDownItem">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Orange">Orange</option>
</select>

JavaScript:

function addRow(tableID, idNumber) {
//A lot more code up here but this is what you'd need for the dropDown:
var cell6 = row.insertCell(5);
var element6 = document.createElement("select");
element6.id = "Contacts[" + idNumber + "].DropDownItem";
element6.name = "Contacts[" + idNumber + "].DropDownItem";
element6.className = "form-control";
cell6.appendChild(element6);

addOptions(element6);
}

JavaScript:

function addOptions(element) {
var x = document.getElementById("Contact_DropDownItem");
for (var i = 0; i < x.length; i++) {
    var singleOption = x.options[i].value;

    var option = document.createElement("option");
    option.value = i.toString();
    option.text = singleOption;

    element.add(option, null);
}

Для получения дополнительной информации о контроллере и материалах, которые прямо сейчас заполняет DropDown и выполняетбольше ничего, см. мой другой вопрос: Создание динамических элементов в формате MVC