1

I using code from this blog Autocompletion Textbox in MVC Using jQuery

but my jQuery isn't firing. I suspect its to do with my selector. I am using MVC as well but I don't see how that would make the javascript any different.

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using UserManager.Models;

namespace UserManager.Controllers
{
    public class UserManagerController : Controller
    {
        //
        // GET: /UserManager/

        public ActionResult Index()
        {
            try
            {
                var data = new UserManager.Models.UserManagerTestEntities();
                return View(data.vw_UserManager_Model_Add_Users.ToList());

            }
            catch (Exception ex)
            {
                return View(ViewBag);
            }

        }

        public ActionResult CreateUser()
        {

            var data = new UserManager.Models.UserManagerTestEntities();
            ViewBag.Message = "Create New User";
            return View();
        }

        public ActionResult LookUpGroupName(string q, int limit)
        {
            //TODO: Map list to autocomplete textbox control
            DAL d = new DAL();
            List<string> groups = d.groups();

            var GroupValue = groups
                .Where(x => x.StartsWith(q))
                .OrderBy(x => x)
                .Take(limit)
                .Select(r => new { group = r });

            // Return the result set as JSON
            return Json(GroupValue, JsonRequestBehavior.AllowGet);
        }
    }
}

@model UserManager.Models.vw_UserManager_Model_Add_Users
@{
    ViewBag.Title = "Create New User";
}
<h2>
    CreateUser</h2>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>New User Details</legend>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.salutation)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.salutation)
            @Html.ValidationMessageFor(model => Model.salutation)
        </div>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.firstname)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.firstname)
            @Html.ValidationMessageFor(model => Model.firstname)
        </div>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.lastname)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.lastname)
            @Html.ValidationMessageFor(model => Model.lastname)
        </div>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.password)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.password)
            @Html.ValidationMessageFor(model => Model.password)
        </div>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.email)
            @Html.ValidationMessageFor(model => Model.email)
        </div>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.isactive)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.isactive)
            @Html.ValidationMessageFor(model => Model.isactive)
        </div>
        <div class="editor-label">
            @Html.Label("Group Name")
            <!-- GroupName -->
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.group_name)
            @Html.ValidationMessageFor(model => Model.group_name)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
}
<script type="text/javascript">
    $(document).ready(function () {
        $("#group_name").autocomplete('@Url.Action("LookUpGroupName")', 
        {
        dataType: 'json',
        parse: function (data) {
            var rows = new Array();
            alert("before loop");
            for (var i = 0; i < data.length; i++) {
                rows[i] = { data: data[i], value: data[i].group, result: data[i].group }
            }
            return rows;
        },
        formatItem: function (row, i, max) {
            return row.group
        },
        width: 300,
        highlight: false,
        multiple: true,
        multipleseparator: ","
    });
});

</script>

HTML rendered to browser:

<input name="group_name" class="text-box single-line" id="group_name" type="text" value=""/>

Probably something simple I just cant see it. Any ideas? Thanks!

4

3 に答える 3

1

作成する要素にIDを追加するとは思わない@Html.EditorFor(model => Model.group_name)ため、セレクターは一致しません。次のようなIDを追加できます。

@Html.EditorFor(model => Model.group_name, new { ID = "group_name"})

さらに、jqueryでIDを選択したく#group_nameない場合は、IDが実際にすべての要素で始まる要素が実際に多数あり、選択する場合を除いて、代わりにIDセレクターを使用するgroup_nameことをお勧めします。一度にすべての要素。

アップデート

セレクターで始まる属性を使用しinput[id^=group_name、タイプミスがあります。]セレクターにクロージングがありません。それでも、すべてがで始まるIDを持つ複数の要素を選択するつもりがない場合はgroup_name、マークアップはそうではないことを示します。次に、代わりにIDセレクターを実際に使用する必要があります。

于 2012-11-01T15:24:45.430 に答える
0

これでテストランを実行します

 $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "Scala",
            "Scheme"
        ];
        $( "#group_name" ).autocomplete({
            source: availableTags
        });
    });
于 2012-11-01T15:48:18.870 に答える
0

MVC3 Razorを使用する場合、この構文は機能しません。

$("#postTags").autocomplete('<%=Url.Action("LookUpGroupName",) %>',

これは、RazorEngineがWebFormsEngine構文を理解していないためです。代わりに私は使用しました：

$("#group_name").autocomplete('@Url.Action("LookUpGroupName")',

ActionResult名のみを受け入れるオーバーロードされたメソッドを使用しました。これは私にとってはうまくいきましたが、ソリューションの設定が異なる場合は、ControllerとActionResultの両方の引数を指定する必要があるかもしれません。

最後に、AJAXリクエストが行われているときにエラーコード500が発生していました。これは、LookUpGroupNameメソッドで、次のコード行をリファクタリングする必要があったためです。

return Json(GroupValue);

に：

return Json(GroupValue, JsonRequestBehavior.AllowGet);

私の元の投稿には、将来の参照用にすべての正しいコードが含まれています。

于 2012-11-02T09:14:55.400 に答える