当动态添加新行时，两行被添加到 MVC 中的表中答案

【问题标题】：when adding new rows dynamically two rows getting added to the table in MVC当动态添加新行时，两行被添加到 MVC 中的表中
【发布时间】：2015-07-01 03:25:13
【问题描述】：

在我的 MVC 中有一个表 2，我们可以动态添加行。我有两种形式。第一种形式用于添加新请求，动态添加行运行正常，没有任何问题并且能够成功提交。

第二种形式是打开一个现有的请求并进行修改。我已将 jquery 输入令牌附加到文本框。我能够在请求中显示现有值。但是当我单击按钮添加新行时，它会添加两行，如下图所示

这里前两行是现有的，当我单击新按钮时，第三行来了。我很确定这是因为附加 jquery 输入令牌时出现问题，因为在 Diagnosis Type 中缺少附加行

请找出我用来实现这些场景的代码

动态模板

<table id="Newdiagnosis" style="display:none">
  <tr>
    <td><input id="diag-%" class="diag" style="width:200px" type="text" name="provider_diagnosis_dtls[#].diagnosis_code" value /></td>
    <td><input id="desc-%"  class="diag_desc" style="width:500px" type="text" name="provider_diagnosis_dtls[#].diagnosis_desc" value /></td>
    <td>
      <input id ="level-%" type="text"name="provider_diagnosis_dtls[#].diagnosis_level" readonly value />
      <input type="hidden" name="provider_diagnosis_dtls.Index" value="%" />
    </td>
  </tr>
</table>

实际表格

<table id="diagnosis" >
  <tr>
    <th style="width:200px">Diagnosis Code</th>
    <th style="width:500px">Diagnosis Description</th>
    <th>Diagnosis Type</th>
    <th style="width:6px"></th>
  </tr>
  @if (Model != null)
  {
   for (int i = 0; i < Model.provider_diagnosis_dtls.Count; i++)
   {
     <tr>
       <td>@Html.TextBoxFor(m => m.provider_diagnosis_dtls[i].diagnosis_code, new { @class "diag")</td>
       <td>@Html.TextBoxFor(m => m.provider_diagnosis_dtls[i].diagnosis_desc, new { @class "diag_desc")</td>
       <td>
         @Html.TextBoxFor(m => m.provider_diagnosis_dtls[i].diagnosis_level,new { @readonly = "readonly" })
         <input type="hidden" name="provider_diagnosis_dtls.Index" value="@i" />
       </td>
     </tr>
   }
 }

jQuery

$(document).ready(function () {
  //to assign and attach jquery token input to existing rows class diag
  $('.diag').each(function () {
    $(this).tokenInput("@Url.Action("SearchDiagnosis","Preapproval")",
    {
      prePopulate: [{ id: $(this).val(), name: $(this).val() }],
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis code...',
      tokenLimit: 1,
      hintText: 'Diagnosis Code'
    });
  });
  //to assign and attach jquery token input to existing rows class diag_desc
  $('.diag_desc').each(function () {
    $(this).tokenInput("@Url.Action("SearchDiagnosis_desc", "Preapproval")",
    {
      prePopulate: [{ id: $(this).val(), name: $(this).val() }],
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis desc...',
      tokenLimit: 1,
      hintText: 'Diagnosis desc'
    });
  });

  // Button click for adding new rows          
  $("#N").click(function () {
    var index = (new Date()).getTime();
    var clone = $('#Newdiagnosis').clone();
    clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
    clone.html($(clone).html().replace(/"token-input-diag-%"/g, 'token-input-diag-' + index));
    clone.html($(clone).html().replace(/"token-input-desc-%"/g, 'token-input-desc-' + index));
    clone.html($(clone).html().replace(/"diag-%"/g, 'diag-' + index));
    clone.html($(clone).html().replace(/"desc-%"/g, 'desc-' + index));
    clone.html($(clone).html().replace(/"level-%"/g, 'level-' + index));
    var html = clone.html();
    $("#diagnosis").append(clone.html()); 
    $("#diagnosis").find(".diag").last().tokenInput("@Url.Action("SearchDiagnosis","Preapproval")",
    {
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis code...',
      tokenLimit: 1,
      hintText: 'Diagnosis Code'
    });
    $("#diagnosis").find(".diag_desc").last().tokenInput("@Url.Action("SearchDiagnosis_desc","Preapproval")",
    {
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis desc...',
      tokenLimit: 1,
      hintText: 'Diagnosis Description'
    });
    if (index1 == 1) {
      $("#diagnosis").find("#level-" + index).val("Primary");
      $("#diagnosis").find("#diag_delete").attr("disabled", true)
    } else
      $("#diagnosis").find("#level-" + index).val("Secondary");
  });
});

已编辑

如果我删除

$("#diagnosis").find(".diag").last().tokenInput("@Url.Action("SearchDiagnosis","Preapproval")",
        {
        theme: 'facebook',
        preventDuplicates: true,
        searchingText: 'Searching diagnosis code...',
        tokenLimit: 1,
        hintText: 'Diagnosis Code'
        });
      $("#diagnosis").find(".diag_desc").last().tokenInput("@Url.Action("SearchDiagnosis_desc","Preapproval")",
        {
        theme: 'facebook',
        preventDuplicates: true,
        searchingText: 'Searching diagnosis desc...',
        tokenLimit: 1,
        hintText: 'Diagnosis Description'
        });

从按钮点击功能我会得到如下图但这里默认的空名称显示第三行，我无法通过单击令牌插件将其删除

【问题讨论】：

从几件事开始。您应该从模板中删除 id 属性，例如id="diag-%" 等。它们不是必需的，只是使您的代码过于复杂。还可以删除以clone.html(.. 开头的第 3 行和第 4 行 - 您的模板不包含带有 "token-input-diag-%" 和 "token-input-desc-%" 的任何内容（仅需要以 clone.html(.. 开头的前 2 行
也应该是$("#diagnosis").append(clone.find('tr'));
@stephenmuecke 完成..但问题仍然存在
该模板 (<table id="Newdiagnosis" ..>) 是否在表单标签之外（应该是）？
@stephenmuecke 不，它在 Beginform 内。。相同的代码在添加新请求时工作正常。这是不存在行的地方，我们不想为插件预填充值

标签： jquery asp.net-mvc jquery-tokeninput

【解决方案1】：

您的代码存在一些问题，但主要问题是前 2 个脚本 - $('.diag').each(function () { 和 $('.diag_desc').each(function () { - 将插件分配给类名为 diag 的所有元素和diag_desc，包括用于生成新行的隐藏模板中的那些。最初将插件附加到文本框时，您需要排除模板。

还有一些其他小问题，您添加新行的脚本应该是

var table = $("#diagnosis"); // cache it
var newTable = $('#Newdiagnosis'); // cache it
$("#N").click(function () {
  var index = (new Date()).getTime();
  var clone = $('#Newdiagnosis').clone();
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
  var newrow = clone.find('tr');
  table.append(newrow);
  newrow.find('.diag').first().tokenInput('@Url.Action("SearchDiagnosis","Preapproval")', {
    prePopulate: [{id:$(this).val(), name: $(this).val()}],
    theme: 'facebook',
    searchingText: 'Searching diagnosis code...',
    tokenLimit: 1,
    hintText: 'Diagnosis Code'
  });
  // repeat for newrow.find('.diag_desc').....
});

并从模板中删除id 属性。注意最后一个脚本

if (index1 == 1) {
  $("#diagnosis").find("#level-" + index).val("Primary");
  $("#diagnosis").find("#diag_delete").attr("disabled", true)
} else {
  $("#diagnosis").find("#level-" + index).val("Secondary");
}

目前无法工作 - 没有名为 index1 的变量。不完全确定您要对此做什么，但假设您要将“主要”应用于新行，如果它是表中的第一行，否则为“次要”，那么最好将模板修改为

<input type="text"name="provider_diagnosis_dtls[#].diagnosis_level" class="level" readonly value="Secondary" />

那么脚本就是

var rowCount = table.find('tr').length;
if(rowCount == 1) {
  table.find('.level').first().val("Primary");
}

注意：找不到任何带有id="diag_delete" 的元素，所以不确定那是什么（也许你只是在问题中省略了它），但如果它是每一行中的一个元素，那么不要使用id 属性（重复的id 是无效的html），请改用类名

【讨论】：