如何通过单击按钮在数据表中动态添加剃须刀下拉列表？

Question

我的数据表有4列。我在第二列中有下拉菜单。我需要根据选定的下拉值绘制剩余的列。

作为存储在字典中的值，我使用JSON调用从控制器获取值。我什至得到了价值。我需要通过选择下拉选项来加载这些。.我将那些下拉列表分别添加到第一行的第二个单元格中，最后能够加载受尊重的值。现在，我尝试通过单击添加按钮将该下拉列表动态添加到每一行。它如何显示invalid token或unexpected token错误。如何解决问题？

单个行的代码：

<table cellspacing="1" cellpadding="2" style="width: 100%;" id="tblAdd" class="table table-striped table-hover table-bordered table-hd">
     <thead>
         <tr class="gridheader">
             <td style="width: 10%;">S.No</td>
             <td style="width: 30%;">Id</td>
             <td style="width: 30%;">Type</td>
             <td style="width: 30%;">N O D</td>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td></td>
             <td>
                 @{
                     List<string> LE = new List<string>();
                     Dictionary<string, string> test2 = DictionaryUtil.GetLEDictionary();
                     if (test2 != null && test2.Count() > 0)
                     {
                         foreach (var item in test2)
                         {
                             if (item.Key != string.Empty) { LE.Add(item.Key); }
                         }
                     }
                 }
                @Html.DropDownList("LE", new SelectList(@LE), "--Select Type--", new { @class = "form-control" })
             </td>
             <td> </td>
             <td></td>
         </tr>
     </tbody>
 </table>

控制器获取功能：

[HttpGet]
        public JsonResult GetLEDetails(string Type)
        {
            LE _LE = null;
            if (!string.IsNullOrEmpty(Type))
            {
                _LE = GroupManager.GetLEWithType(Type);
                if (_LE != null)
                {
                    ViewBag._LT = _LE.Type1 != null ? _LE.Type1.Description : string.Empty;
                    ViewBag._NOD = _LE._NOD.ToString();
                }
                else
                {
                    ViewBag._LT = string.Empty;
                    ViewBag._NOD = "0.0";
                }
            }
            else
            {
                ViewBag._LT = string.Empty;
                ViewBag._NOD = "0.0";
            }
            //var data = ViewBag;
            //return Json(data, JsonRequestBehavior.AllowGet);
            return Json(new { _LT = ViewBag._LT , _NOD = ViewBag._NOD }, JsonRequestBehavior.AllowGet);
        }

在表格中绘制单元格的Javascript：

<script type="text/javascript">
        $(document).on('change', $("LE"), function (el) {
          var LE = $("#LE").val();
          var LEUrl = '@Url.Action("GetLEDetails")';

         var t = $('#tblAdd').DataTable();

            $.getJSON(LEUrl, { Type: LE }, function (returnedJson) {
           var row = t.row(this);   
              var LT = returnedJson._LT;
            var NOD = returnedJson._NOD;
             t.cell(row, 2).data(LT).draw();
                t.cell(row, 3).data(NOD).draw();
                });
                });
  </script>

这将在第一行中创建下拉菜单，同时加载页面并在更改下拉菜单中加载数据，现在我试图加载预期的结果。

为此，我的桌子就像

`

<table cellspacing="1" cellpadding="2" style="width: 100%;" id="tblAdd" class="table table-striped table-hover table-bordered table-hd">
         <thead>
             <tr class="gridheader">
                 <td style="width: 10%;">S.No</td>
                 <td style="width: 30%;">Id</td>
                 <td style="width: 30%;">Type</td>
                 <td style="width: 30%;">N O D</td>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td></td>
                 <td>  </td>
                 <td> </td>
                 <td></td>
             </tr>
         </tbody>
     </table>

和脚本类似

 <script type="text/javascript">    
$(document).on('click', $("btnAdd"), function () {
       var t = $('#tblAdd').DataTable();
        var row = t.row(this);
         @{
                List<string> LE = new List<string>();
                Dictionary<string, string> test2 = DictionaryUtil.GetLEDictionary();
                if (test2 != null && test2.Count() > 0)
                {
                    foreach (var item in test2)
                    {
                        if (item.Key != string.Empty) { LE.Add(item.Key); }
                    }
                }
            }
        t.cell(row, 1).data(@Html.DropDownList("LE", new SelectList(@LE), "--Select Type--", new { @class = "form-control" })).draw();   
    }
    </script>

如何执行此操作？我在哪里弄错了？同样，我们能否通过单击“删除”按钮删除那些选定的行？