Hope you all are fine I was working in mvc 5 and need to add a dropdown list which will get the values from model/Controller. The issue is when I add the @Html.DropdownlistFor function the code works but when I append a new row in the Table tag using javascript that Dropdown doesn't appears.
This is for the MVC 5 with entity framework(.net).
//This code works for me and appears a DropDownList.
<td>
@Html.DropDownList("TravelMode", null, htmlAttributes: new { @id = "travelmode", @class = "form-control t-mode01" })
</td>
//But this doesn't shows any dropdownlist.
$(document).on("click", ".classAdd", function () {
var rowCount = $('.data-contact-person').length + 1;
var name = document.getElementById("name").value;
var locfrom = document.getElementById("locfrom").value;
var locto = document.getElementById("locto").value;
var datefrom = document.getElementById("datefrom").value;
var dateto = document.getElementById("dateto").value;
var instructions = document.getElementById("instructions").value;
var travelmode = $('#travelmode option:selected').text();
var contactdiv = '<tr class="data-contact-person">' +
'<td><input type="checkbox"class="form-control f-check01" /></td>' +
'<td><input type="text" value="' + name + '" class="form-control f-name01" /></td>' +
'<td><input type="text" value="' + locfrom + '" class="form-control l-from01" /></td>' +
'<td><input type="text" value="' + locto + '" class="form-control l-to01" /></td>' +
'<td><input type="text" value="' + datefrom + '" class="form-control d-from01" /></td>' +
'<td><input type="text" value="' + dateto + '" class="form-control d-to01" /></td>' +
'<td>@Html.DropDownList("TravelMode", null, htmlAttributes: new { @id = "travelmode", @class = "form-control t-mode01" })</td>' +
'<td><input type="text" value="' + instructions + '" class="form-control l-ins01" /></td>' +
'</tr>';
$('#maintable').append(contactdiv);
$('#name').val('').focus();
$('#locfrom,#locto,#datefrom,#dateto,#travelmode,#instructions').val('');
});
I just want a code Which I can write in Javascript table tags for dropdowns having values from DataBase.
What I have tried:
$(document).on("click", ".classAdd", function () {
var rowCount = $('.data-contact-person').length + 1;
var name = document.getElementById("name").value;
var locfrom = document.getElementById("locfrom").value;
var locto = document.getElementById("locto").value;
var datefrom = document.getElementById("datefrom").value;
var dateto = document.getElementById("dateto").value;
var instructions = document.getElementById("instructions").value;
var travelmode = $('#travelmode option:selected').text();
var contactdiv = '<tr class="data-contact-person">' +
'<td><input type="checkbox"class="form-control f-check01" /></td>' +
'<td><input type="text" value="' + name + '" class="form-control f-name01" /></td>' +
'<td><input type="text" value="' + locfrom + '" class="form-control l-from01" /></td>' +
'<td><input type="text" value="' + locto + '" class="form-control l-to01" /></td>' +
'<td><input type="text" value="' + datefrom + '" class="form-control d-from01" /></td>' +
'<td><input type="text" value="' + dateto + '" class="form-control d-to01" /></td>' +
'<td>@Html.DropDownList("TravelMode", null, htmlAttributes: new { @id = "travelmode", @class = "form-control t-mode01" })</td>' +
'<td><input type="text" value="' + instructions + '" class="form-control l-ins01" /></td>' +
'</tr>';
$('#maintable').append(contactdiv);
$('#name').val('').focus();
$('#locfrom,#locto,#datefrom,#dateto,#travelmode,#instructions').val('');
});