0

部分ビューで Jquery オートコンプリートの結果を表示することは可能ですか? これが私が今示している方法です。結果のスタイルをより細かく制御できるように、部分ビューで結果を表示することを望んでいました。

 $(document).ready(function () {
        $('*[data-autocomplete-url]')
            .each(function () {
                $(this).autocomplete({
                    source: $(this).data("autocomplete-url"),
                    minLength: 2,
                    messages: {
                        noResults: "",
                        results: function () { }
                    },
                    select: function (event, ui) {
                        return false;
                    },
                });
            }).data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                    .data("item.autocomplete", item)
                  )
.append('<table><tr><td valign="top"><img style="width:30px;height:30px;" src="' + "/Images/Image.jpg" + '" /></td><td valign="top">' + item.FirstName + item.LastName + '</td></tr></table>')
                                       .appendTo(ul);
            }
    });

また、ユーザーが結果からアイテムを選択したときに、ID を渡してコントローラー アクションを呼び出したいのですが、このコード サンプルを提供してもらえますか?

Asp.net MVC 4 を使用しています。

ありがとう ！

4

1 に答える 1

1

jQuery のみを使用して部分ビューをレンダリングすることはできません。ただし、部分ビューをレンダリングするメソッド (アクション) を呼び出して、jQuery/AJAX を使用してページに追加することはできます。ユーザーがアイテムを選択するか、アイテムにカーソルを合わせている間、jquery 関数を使用し、ajax を使用して ID をサーバーに渡し、Partail View を返します。

$.get( '<%= Url.Action("details","user", new { id = Model.ID } %>', function(data) {
    $('#detailsDiv').replaceWith(data);
});

かみそり

$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
    $('#detailsDiv').replaceWith(data);
});

ユーザーコントローラーには、次のことを行う details という名前のアクションがあります。

public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return Partial( "UserDetails", model );
}

これらのリンクを参照すると、より良いアイデアが得られます。 ASP.NET MVCで jQuery を使用して部分ビューをレンダリングするhttp://www.codeproject.com/Articles/41828/JQuery-AJAX-with-ASP-NET-MVC、 ASP.NET MVC AJAX with jQuery

ありがとう。これがお役に立てば幸いです。

于 2012-11-20T11:05:36.627 に答える