使用JavaScript创建Razor对象

Question

To Long to Read (tl;dr):

Make this add a new cell to a table that shows a razor/mvc dropdown:

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

Long but more detailed question:

Pretty simple answer, I think, but I'm just too new to Razor to know.

Currently, I have a table that has rows added using JavaScript by means of a 'add row' button.

I actually asked the question before, and found a solution that worked perfectly. However, now I need it in Razor so my previous question can't work.

Here's the link with pictures to my other post:

Create Dynamic Elements that are MVC Format

Ok so new issue. I have a razor element that needs to be duplicated with JavaScript. I've changed the names of the classes and properties.

So in the table, I have:

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

Which works great. The table populates with this in it just fine. However, like in my other post, I need to replicate the entire line with JavaScript (or whatever other solution there is).

Currently, I have this style of insert:

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

The type changes from text to email to tel. The '#' in name = "[#].chkbox" actually is a variable that is passed through, so each of the # are different. Somehow, someway, I want to do:

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

Note: the rendered version keeps turning out like this

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

So I was wrong. MVC will read select boxes that aren't in razor. So that's good.

It was a naming issue. I didn't figure it out, but a co-worker with WAY more experience than me was nice enough to help.

Basically, we made one drop down based on the model using Razor, and then stole the options of that drop down to make the other drop downs.

We made a list of contacts in the big class, and named all our elements in this style:

name = "NameOfListElement[listNumber].ClassProperty"

name = "Contacts[0].FullName"

Class 1:

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

Class 2:

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

HTML super abridged. Putting in the name for the Razor syntax is important:

 @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 will create this, which is important for the ID:

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

For more info on the Controller and stuffwhich just populates the DropDown right now and does nothing else, see my other question: Create Dynamic Elements that are MVC Format