Solved

MVC JQuery URL.Action question

Posted on 2013-01-28
7
375 Views
Last Modified: 2013-02-04
Any idea why this would not be working.   I have the following view file below.   This does not work and get into the GetProducts action in my HomeController and auto complete is not working.  This is the Index view in the Home Controller.   If I hit localhost then "Home/GetProducts?term=k" for example this works fine.   If I place in the 2nd code snippet the auto complete also works fine.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="../../Content/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(function () {
                $("#products").autocomplete({
                    source: '<%=Url.Action("GetProducts") %>',
                    minLength: 2
                });
            });
    </script>

</head>
<body>
    <label for="products">Find:</label>
    <input type="text" id="products" />
</body>
</html>

Open in new window


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="../../Content/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>
    <script>
        $(function () {
            var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
            $("#products").autocomplete({
                source: availableTags
            });
        });
	</script>
</head>
<body>
    <label for="products">Find:</label>
    <input type="text" id="products" />
</body>
</html>

Open in new window

0
Comment
Question by:sbornstein2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 200 total points
ID: 38832747
work fine for me :
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Index</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/overcast/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#customers').autocomplete({
            source: '<%= Url.Action("GetCustomers") %>',
            minLength: 2
        });
    });
</script>
</head>
<body>
    <div>
        <label for="customers">Find:</label>
        <input type="text" id="customers" />        
    </div>
</body>
</html>

Open in new window


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

namespace MvcApplication3.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetCustomers(string term)
        {
            AdventureWorksLT2012_DataEntities db = new AdventureWorksLT2012_DataEntities();
            var customers = from cust in db.Customer.Where(c => c.LastName.StartsWith(term))
                            select cust.LastName;
            customers = customers.Distinct();
            return Json(customers, JsonRequestBehavior.AllowGet);
        }
    }
}

Open in new window

0
 

Author Comment

by:sbornstein2
ID: 38832927
I have a break point just to see if I am even getting into the GetProducts but nothing is getting to it.
0
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
LVL 82

Expert Comment

by:leakim971
ID: 38832939
could you provide a link to see your page?
Try the two jQuery plugins I provided with the CSS link (don't download them), just use the direct links to googleapis
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/overcast/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js" type="text/javascript"></script>

Open in new window

0
 

Author Comment

by:sbornstein2
ID: 38835927
Still does not work, I also tried the http links instead.  It seems like I am not even getting into the GetProducts.  Here is exactly what I have.  I created a table called Products using Entity Framework.

View:
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="../../Content/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>

    <script type="text/javascript">
            $(function () {
                $('#products').autocomplete({
                    source: '<%= Url.Action("GetProducts") %>',
                    minLength: 2
                });
            });
    </script>

</head>
<body>
    <label for="products">Find:</label>
    <input type="text" id="products" />
</body>
</html>

Open in new window


HomeController:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TestProj.Models;

namespace TestProj.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetProducts(string term)
        {
            SportsStoreEntities db = new SportsStoreEntities();
            var products = from prod in db.Products.Where(p => p.Name.StartsWith(term))
                            select prod.Name;
            products = products.Distinct();
            return Json(products, JsonRequestBehavior.AllowGet);
        }

    }
}

Open in new window


I even tried just passing an array or single string value to the return Json but the problem does not seem there.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38836135
could you provide a link to see your page?
0
 

Author Closing Comment

by:sbornstein2
ID: 38851683
thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question