?
Solved

MVC JQuery URL.Action question

Posted on 2013-01-28
7
Medium Priority
?
378 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 800 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
PowerShell Core for Advanced Linux Administrators

Understand advanced principals around Powershell Core with a focus on the Linux Administrator.  This course covers how to administer numerous environments across multiple platforms including Linux, Azure, AWS, and Google Cloud from a single shell instance.

 
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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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)
Suggested Courses

743 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