question

MonishaS-8676 avatar image
0 Votes"
MonishaS-8676 asked MonishaS-8676 edited

How to add row with multiple columns and it should have two normal column and one dropdown column on ajax success

Html code:
@model Sampleapplication.Models.samplemodel


<body>
<table id="tabledetails" class="table table-bordered loaded-table">
<thead>
<tr>

                     <th>  <p>Id</p></th>
                     <th>  <p>Name</p></th>
                     <th>  <p>Department</p></th>
                     
                 </tr>
             </thead>
             <tbody></tbody>
         </table>

</body>


success: function (data) {

                      $.each(data, function (i, item) {

                          var rows = "<tr>"


                              + "<td class='prtoducttd1'>" + item.Id + "</td>"
                              + "<td class='prtoducttd2'>" + item.Name + "</td>"
                               
                              + "<td class='prtoducttd11'>@Html.ListBoxFor(m => m.sDepartmentList, Model.lstToDepartment, new { Name = "Departmentlst", id = "Departmentlst", @placeholder = "Select Deaprtment" })</td>"
                              + "</tr>";
                          $('#tabledetails tbody').append(rows);

});

dotnet-aspnet-mvcdotnet-aspnet-ajax
· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @MonishaS-8676,
I tried your code, and the interface can be successfully displayed.
What problem did you encounter? Is there any specific error message?
Best regards,
Lan Huang

1 Vote 1 ·

Hi @LanHuang-MSFT
Thanks for you reply
1.It shows incorrect syntax error while adding @Html.Dropdown at td on ajax success, so not able to add all three columns together on ajax success

2.Secondly i tried adding as <select></select>for department for this i need to loop through the list of value
But the problem is i am not able to get id and name and(list of values for department) on same ajax success

0 Votes 0 ·

@Html.DropDown is a razor server tag, it can not be used by javascript. you must use the select. the ajax response data from the server should include the select option values.

1 Vote 1 ·
Show more comments

1 Answer

Bruce-SqlWork avatar image
1 Vote"
Bruce-SqlWork answered MonishaS-8676 edited

you need to add the drop down list list values to the data (an array of values). assume the value list is items.Values [{Id,Name}] then its:

 $("<tr/>").append(
     $("<td/>").append(
          $("<select/>").append(
                 item.Values.map(v => $("<options/>").val(v.Id).text(v.Name)}
          )
      )
 )



· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Worked perfectly thanks,

var tr= document.createElement("tr");
$(tr).append("<td>" + item.Id + "</td>");
$(tr).append("<td>" + item.Name + "</td>";
$(tr).append(
$("<td/>").append(
$("<select/>").append(
item.Values.map(v => $("<options/>").val(v.Id).text(v.Name) ) ));

$('#tabledetails tbody').append(tr);

0 Votes 0 ·