0

ここhttp://loopj.com/jquery-tokeninput/にある tokeninput コントロールを使用しています。これは非常に人気があると思います。

入力ボックスに著者名を適切に入力する次のコードがありますが、ユーザーが編集セッションにいるときに、データベースで見つかった値をコントロールに事前入力したい、つまり、そのレコードで既に見つかっている著者を見つけたい (見えるこのようなもの）：

ここに画像の説明を入力

コードは次のとおりです。

 $("#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 形式に入れ、トークン入力コントロールを取得して、フォームが読み込まれてユーザーに表示されるときに備えて値を設定するだけです。

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 に答える