1

VS.NET 2010 + MVC 3.0 アプリケーションを使用していますが、テキスト ボックスでオートコンプリートの問題が発生しています。http://jqueryui.com/demos/autocomplete/の例に従ってい ました。ここで、json アクションによってソース配列を設定したいと思います。このページの読み込みでは、IndexKPIOrder.js の json で GetKPIs アクションを呼び出しています。アクション GetKPIs が適切に起動され、_list0 が入力されますが、txtKPIs テキスト ボックスでオートコンプリートが行われません。

任意の提案をいただければ幸いです。

これが私がやっていることです。

インデックス.cshtml:

@using NegTl.DomainModel.Model.UserCatalogues
@model IEnumerable<KPIOrder>
@{
ViewBag.Title = "KPI Ordering";
}
@section JavaScript
{
    <script type="text/javascript" src="@Url.Content("~/Scripts/helpers.js")" ></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/Views/KPIOrder/IndexKPIOrder.js")" ></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ui.core.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ui.widget.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ui.position.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ui.autocomplete.js")"></script>
}
<p>
    @Html.ActionLink("Create New", "Create")    
</p>
    @Html.TextBox("txtKPIs", "", new { style = "width:300px;" })
<div>
    @{
        var grid = new WebGrid(Model,
            defaultSort: "KPIOrdering",
            rowsPerPage: 20);
    }
    @grid.GetHtml(mode: WebGridPagerModes.All,
            columns: grid.Columns(
                            grid.Column(columnName: "KPIName"),
                            grid.Column(columnName: "KPIHeading"),
                            grid.Column(columnName: "KPIOrdering"),
                            grid.Column(columnName: "IsKPI"),
                            grid.Column(columnName: "IsNumeric"),
                            grid.Column(columnName: "IsNative"),
                            grid.Column(columnName: "Actions", header: "Actions", canSort: false, format: @<text>
    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
    @Html.ActionLink("Details", "Details", new { id = item.Id }) |
    @Html.ActionLink("Delete", "Delete", new { id = item.Id })</text>)
        )
    )
</div>
@using (Html.BeginForm("NoAction", "KPIOrder", FormMethod.Post, new { id = "mockFormForAction3" })) { }

コントローラ：

public class KPIs
{
    public int KPIOrder { get; set; }
    public string KPIName { get; set; }
}
...
public JsonResult GetKPIs()
{
    try
    {
        List<KPIs> _list0 = new List<KPIs>();

        SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NegociationToolEntities"].ConnectionString);
        myConnection.Open();

        SqlCommand cmd = new SqlCommand(ConfigurationManager.AppSettings["KPIListSP"], myConnection);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.CommandTimeout = 0;

        SqlDataReader reader = cmd.ExecuteReader();

        while (reader.Read())
        {
            _list0.Add(new KPIs { KPIOrder = Convert.ToInt32(reader["KPI_Order"]), KPIName = Convert.ToString(reader["KPI_Name"]) });
        }

        return Json(new { status = "OK", data = _list0 }, JsonRequestBehavior.AllowGet);
    }
    catch(Exception ex)
    {
        return Json(new { status = "FAIL", message = ex.Message }, JsonRequestBehavior.AllowGet);
    }
}

IndexKPIOrder.js:

$(document).ready(function () {

    var availableTagsLoad = [""];

    var url = getRootUrlFromFormAction("mockFormForAction3") + "GetKPIs";

    $(function () {
        $("#txtKPIs").autocomplete({
            source: availableTagsLoad
        });
    });

    $.ajax({
        dataType: 'json',
        delay: 400,
        autofill: true,
        selectFirst: false,
        highlight: false,
        url: url,
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            if (response.status == "OK") {
                $.each(response.data, function (index, kpi) {
                    availableTagsLoad.push(kpi.KPIName);
                });
            }
            else {
                $('#errorMessage').html(response.message);
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            $('#errorMessage').html(errorThrown);
        }
    });

})
4

1 に答える 1

1

解決策は、次のように、配列の作成直後にオートコンプリート機能を移動することでした:

$(document).ready(function () {

    var availableTagsLoad = [];
    var url = getRootUrlFromFormAction("mockFormForAction3") + "GetKPIs";

    $.ajax({
        dataType: 'json',
        delay: 400,
        autofill: true,
        selectFirst: false,
        highlight: false,
        url: url,
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            if (response.status == "OK") {
                $.each(response.data, function (index, kpi) {
                    availableTagsLoad.push(kpi.KPIName);
                });

                $("#txtKPIs").autocomplete({
                    source: availableTagsLoad
                });
            }
        }
    });
})
于 2012-10-09T14:47:45.583 に答える