预填充 jquery 令牌输入值

Question

在我的页面中，我正在读取存储在表格中的数据。我在页面中有两个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" })

在预选值旁边，您需要使用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 属性值的令牌填充它。

编辑

根据对问题的编辑，如果您需要回发一个值（应该是 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
      ....