0

我正在使用在http://loopj.com/jquery-tokeninput/上找到的 tokeninput 控件——我相信它很受欢迎。

我有以下代码可以很好地用作者姓名填充输入框 - 但我想在用户处于 EDIT 会话时使用在数据库中找到的值预填充控件，即查找已经为该记录找到的作者（看起来像这样）：

在此处输入图像描述

这是代码：

 $("#authorlist").tokenInput('/author/getauthors/', {
        hintText: "Enter surname",
        searchingText: "Searching...",
        preventDuplicates: true,
        allowCustomEntry: true,
        highlightDuplicates: false,
        tokenDelimiter: "*",
        theme: "facebook"
//        prePopulate: [{"id": 5016, "name": "Test 1" }]
    });

显然，这已经获得了完整的作者列表（/author/getauthors/）——但它也需要从该列表中预先填充，作者已经找到了该记录——这就是我似乎无法弄清楚的一点。

我可以看到您可以在 javascript 中使用 prePopulate （我已将其注释掉）并且我在 Edit.cshtml 中找到了作者值，即

@foreach(var item in Model.AUTHORs.Select(model => new { model} ))
        {
            <div type="hidden" id="authorHidden" > @item.model.FULL_NAME</div>
        }

因此，这只是将这些值放入某种 json 格式并让 tokeninput 控件填充它们以准备好在表单加载并向用户显示时的情况。

在 Edit.cshtml 中显示 tokeninput 控件的其他代码是：

<div class="editor-label">Authors</div>
     <div class="authors">
         <div class="editor-field">
             <input type="text" id="authorlist" name="tiAuthors" />
         </div>
     </div>

非常感谢任何帮助或指示。

4

1 回答 1

5

您可以在视图内的输入中使用 HTML5data-*属性来放置您想要预填充的作者列表：

<input type="text" id="authorlist" name="tiAuthors" data-authors="@Json.Encode(Model.AUTHORs.Select(a => new { id = a.AuthorId, name = a.AuthorName })))" />

进而：

$('#authorlist').tokenInput('/author/getauthors/', {
    hintText: 'Enter surname',
    searchingText: 'Searching...',
    preventDuplicates: true,
    allowCustomEntry: true,
    highlightDuplicates: false,
    tokenDelimiter: '*',
    theme: 'facebook',
    prePopulate: $('#authorlist').data('authors')
});
于 2012-07-10T09:59:26.510 回答