15

MVC 4 にオートコンプリート機能を追加しようとしているときに、明らかな何かが欠けていると思います。他の投稿で見つけたものから、例をまとめることができましたが、コントローラーのメソッドが呼び出されていません。

私がこれまでに試したこと...

_レイアウト

@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")

コントローラ

Public Function Numbers(term As String) As ActionResult
    Return Json(New String() {"one", "two", "three", "four", "five", "six"}, JsonRequestBehavior.AllowGet)
End Function

ビュー (今のところホーム/番号をハードコーディングしました)

<div class="editor-label">
    @Html.LabelFor(Function(model) model.Number)
</div>
<div class="editor-field">
    @Html.EditorFor(Function(model) model.Number)
    @Html.ValidationMessageFor(Function(model) model.Number)
</div>

<script type="text/javascript">
    $(function () {
        $("#Number").autocomplete({
            source: 'Home/Numbers',
            minLength: 1
        });
    });
</script>

アプリを実行してテキストボックスに入力しても何も起こりません。「Numbers」関数にブレークポイントを設定しましたが、呼び出されないようです。

私のプロジェクトはここにあります http://www.filedropper.com/testapp

4

4 に答える 4

16

レイアウトの要素@Scripts.Renderの下部に行があり、その後にスクリプトをセクションに配置する必要がある場合:body@RenderBody()scripts

@section scripts
<script type="text/javascript">
    $(function () {
        $("#Number").autocomplete({
            source: '@Url.Action("Numbers","Home")',
            minLength: 1
        });
    });
</script>
End Section

スクリプトは jQuery に依存しているため、jQuery を最初にロードする必要があります。

または、@Scripts.Render宣言をheadレイアウトの に移動するだけで、コードをセクションに配置する必要はありませんscripts(ただし、セクションを使用した方がよいでしょう)。

于 2012-11-19T16:25:04.573 に答える
1

jQuery ライブラリが適切に機能するように、Chrome でエラーを制御することをお勧めします。問題がなければ、このスクリプトを試してください:

$(document).ready(function () { 
    $("#Number").each(function () {
        $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
    });
});

次に、Razor (C#) で:

<input type="text" id="Number" data-autocomplete="@Url.Action("Action","Controller")" autocomplete="on" />

「input」タグを使用する代わりに Razor Html Helpers を使用する場合、id 属性は Model.Member と同じ名前です。コントローラーでは、コードに記述されているように、「用語」名で文字列を入力する必要があることに注意してください。セキュリティ上の理由から、サイト テクノロジーを示す js ファイルでパラメーターを使用することは避ける必要があります。上記で宣言されたメソッドは、js ファイルを使用してリソースのアドレスを取得することはありません。

于 2012-11-19T16:41:14.587 に答える
1

これは、オートコンプリート テキスト ボックスの例の全コード プロジェクトです。

http://blogs.msdn.com/b/stuartleeks/archive/2012/05/02/asp-net-mvc-amp-jquery-ui-autocomplete-part-2-editorfor.aspx

于 2012-11-30T13:08:39.300 に答える
0

ビューページ用

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<input type="text" id="txtmasterserach" name="txtmasterserach" placeholder="City, region, district or specific hotel"  autocomplete="off"/> 
 <input type="hidden" name="hidenkeyvalues" id="MovieID" /> 

<script type="text/javascript">
    $(document).ready(function () {
        $("#txtmasterserach").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Company/getautobox",
                    type: "POST",
                    dataType: "json",
                    data: { Prefix: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { value: item.Id, label: item.name };
                        }))
                    }
                })
            },
            select: function (event, ui) {
                $("#MovieID").val(ui.item.value);
                $("#txtmasterserach").val(ui.item.label);
                event.preventDefault();
                return false;
            },
            focus: function (event, ui) {
                $("#MovieID").val(ui.item.value);
               // $("#txtmasterserach").val(ui.item.label);
                event.preventDefault();
                return false;
            },
            messages: {
                noResults: "", results: ""
            }
        });
    });
    </script>

コントローラの場合:

public class companyController : Controller
{
public JsonResult getautobox(String Prefix)
    {
        SqlConnection con = new SqlConnection();
        con.ConnectionString = ConfigurationManager.ConnectionStrings["Connection"].ConnectionString;
        SqlCommand cmd = new SqlCommand("procedurename", con);
        cmd.Parameters.AddWithValue("@prefix", Prefix);
        cmd.CommandType = CommandType.StoredProcedure;
        DataSet ds = new DataSet();
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        da.Fill(ds);
        List<autosearchdatalist> auto = new List<autosearchdatalist>();
        if (ds.Tables[0].Rows.Count > 0)
        {
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                auto.Add(new autosearchdatalist
                {
                    Id = ds.Tables[0].Rows[i]["Id"].ToString(),
                    name = ds.Tables[0].Rows[i]["hotelname"].ToString()
                });
            }
        }
        if (ds.Tables[1].Rows.Count > 0)
        {
            for (int i = 0; i < ds.Tables[1].Rows.Count; i++)
            {
                auto.Add(new autosearchdatalist { 
                    Id = ds.Tables[1].Rows[i]["Id"].ToString(),
                    name = ds.Tables[1].Rows[i]["hotelname"].ToString() 
                });
            }
        }
        if (ds.Tables[2].Rows.Count > 0)
        {
            for (int i = 0; i < ds.Tables[2].Rows.Count; i++)
            {
                auto.Add(new autosearchdatalist
                {
                    Id = ds.Tables[2].Rows[i]["Id"].ToString(),
                    name = ds.Tables[2].Rows[i]["hotelname"].ToString()
                });
            }
        }
        String msg = "";
        return Json(auto);
    }
}

ルーター設定をデフォルトのままにしないと、アクションが呼び出されません

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "company", action = "Index", id = UrlParameter.Optional }
        );
    }
}
于 2017-01-10T05:29:41.777 に答える