开发者

MVC3 Razor jQuery autocomplete passes old value to Action

I am trying to implement auto complete however I'm finding that it is not passing the partial string, I'm using MVC3, the razor view engine and jquery to put it all together.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">  </script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript">   </script>

<script type="text/javascript">
$(function (request) {
    alert("test:" + $("#searchTerm").val());
    $("#searchTerm").autocomplete({
        source: "/Home/GetAccounts/" + $("#searchTerm").val(),
        type: 'POST',
        dataType: 'json',
        data: request.term,
        minLength: 3,
        select: function (event, ui) {
            window.location.href = 'Home/GetAccounts/' + ui.item.value;
        }
    });
});

</script>

@using (Html.BeginForm())
{               
 <form method="post" action=""&开发者_Go百科gt;
 <input id="searchTerm" name="searchTerm" type="text" />
     <input type="submit" value="Go" />
 </form>

}  

And Below is the Controller

    public ActionResult GetAccounts(string id)
    {
        var accounts = NavRepository.GetAccountsBasedOnString(id);
        var accountStrings = new string[accounts.Count];
        var count = 0;

        foreach (var account in accounts)
        {
            accountStrings[count] = account.AccountID;
            count++;
        }

        return Json(accountStrings, JsonRequestBehavior.AllowGet);
    }

I did hunt around a few places (such as http://jqueryui.com/demos/autocomplete/#remote-jsonp ) including here but I just can't seem to crack this one.

Additional Here is how I write my routes.

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

        routes.MapRoute(
            "Default", // Route name
            "{controller}/{action}/{id}", // URL with parameters
            new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
        );

    }

And as noted in the comments if i set value="test" for searchTerm it only sends this string


The problem is that when you set the source of your autocomplete it takes the value of the textfield at the moment this is done (i.e. at DOM load) => the value is empty at this stage. The document.ready event handler doesn't take a request object.

You could pass a function to the source property when wiring your autocomplete:

$(function() {
    $('#searchTerm').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '@Url.Action("GetAccounts", "Home")',
                data: { id: request.term },
                dataType: 'json',
                type: 'POST',
                minLength: 3,
                select: function (event, ui) {
                    window.location.href = '@Url.Action("GetAccounts", "Home")' + ui.item.value;
                }
          });
    });
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜