预填充 jquery 个令牌输入值

Question

在我的页面中，我正在读回 table 中存储的数据。我在页面中有两个 textboxfor，并附有 jQuery 输入令牌插件。一旦页面被查看，数据就会到来并且插件被附加但是一旦插件被附加，框中的现有值就会丢失并且它变成空白。插件仍然有效。

@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 { data_code = Json.Encode(new { id = Model.provider_diagnosis_dtls[i].diagnosis_code, name = Model.provider_diagnosis_dtls[i].diagnosis_code }), @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" })
            </td>
        </tr>
    }
}

$(document).ready(function () {
    $(".diag").tokenInput("@Url.Action("SearchDiagnosis","Preapproval")", {
        theme: 'facebook',
        preventDuplicates: true,
        searchingText: 'Searching diagnosis code...',
        tokenLimit: 1,
        hintText: 'Diagnosis Code'
    });
});

文本框内的代码丢失的原因是什么？我是否缺少任何特定代码。

@Html.TextBoxFor(m=> m.provider_diagnosis_dtls[i].diagnosis_code, new { data_code = Json.Encode( new { id = Model.provider_diagnosis_dtls[i].diagnosis_code, name = Model.provider_diagnosis_dtls[i].diagnosis_code }), @class = "diag" })

这是我尝试使用 HTML5 的 data_* 属性恢复令牌输入值的地方。

已编辑

输入的token有两个属性id,name。 name 属性是显示文本，id 值是将在提交期间传递给控制器的值。因此，如果 id 和 name 的值相同，则可以正常使用以下答案。

展示值和提交值不一样的场景如何实现。 IE。例如：要显示的文本是 'XYZ' 但提交时要提交的值是 '123'

Answer 1

首先，不需要在 TextBoxFor() 助手中包含 new { data_code = Json.Encode( new { id = Model.provider_diagnosis_dtls[i].diagnosis_code, name = Model.provider_diagnosis_dtls[i].diagnosis_code })，因为您只需要元素的 value。可以只是

@Html.TextBoxFor(m=> m.provider_diagnosis_dtls[i].diagnosis_code, new { @class = "diag" })

在预 select 值旁边，您需要使用 tokenInput 的 prePopulate 选项将 id 和 name 属性设置为初步显示。您的脚本需要

$(document).ready(function () {
  $('.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'
    });
  });
});

$.each() 函数循环遍历每个文本框并将插件附加到它，并根据 diagnosis_code 属性.

的值用标记填充它

编辑

根据对问题的编辑，如果您需要 post 返回一个值（应该是 diagnosis_code 属性的值，但想要显示不同的文本值基于另一个模型属性，那么您需要包含一个 data- 属性。例如，如果您希望显示文本基于 diagnosis_desc 属性那么帮手将是

@Html.TextBoxFor(m=> m.provider_diagnosis_dtls[i].diagnosis_code, new { @class = "diag" data_text = Model.provider_diagnosis_dtls[i].diagnosis_desc })

并将脚本修改为

    $(document).ready(function () {
  $('.diag').each(function() {
    $(this).tokenInput('@Url.Action("SearchDiagnosis","Preapproval")', {
      prePopulate: [{id:$(this).val(), name: $(this).data('text')}], // modify this
      ....

预填充 jquery 个令牌输入值

Pre populate jquery token-input values

asp.net-mvc

jquery

jquery-tokeninput