Auto Complete in Razor MVC with JQuery and LINQ to Entities


I had to create an auto-complete text box this week in Razor and didn’t see anything specific to doing it in Razor so I thought I’d throw this out there. I would like to say this post for getting it to work in MVC was very helpful and it didn’t take much effort to move from that to Razor and the Entity Framework.

In my example below I’ll be auto populating the product name based on the existing product names in the database using LINQ to Entities.

Step 1 : Download the JQuery Auto-Complete Library from google code

http://code.google.com/p/jquery-autocomplete/downloads/list

Step 2: Extract the following files into your scripts directory

jquery.autocomplete.js
jquery.autocomplete.css
indicator.gif

You can move them around later but for now lets keep them all in one folder and modify the css file to point to our new location for the loading gif.

background : url(‘/scripts/indicator.gif’) right center no-repeat;

Step 3 : Build your controller class

I’m selecting the top 10, distinct where the product name contains the typed in text.


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

namespace MyNameSpace.Controllers
{
    public class AutoCompleteController : Controller
    {
        MyNameSpaceEntities mhgDb = new MyNameSpaceEntities();

        public ActionResult ProductName(string q)
        {
            var productNames = (from p in mhgDb.Products where p.ProductName.Contains(q) select p.ProductName).Distinct().Take(10);

            string content = string.Join<string>("\n", productNames);
            return Content(content);
        }

    }
}

Step 4:  Add the JS and CSS files to your view


<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Scripts/jquery.autocomplete.css")" rel="stylesheet" type="text/css" />

Step 5 : Bind the Textbox to the Controller


<div class="editor-label">
@Html.LabelFor(model => model.ProductName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ProductName)
@Html.ValidationMessageFor(model => model.ProductName)
</div>

<script type="text/javascript">

$(document).ready(function () {
$("#ProductName").autocomplete('@Url.Action("ProductName", "AutoComplete")', { minChars: 3 });
});

</script>

Step 6 : Build and Test

That’s all, there’s some tips around styling and parameters for autocomplete in the link to the other blog post I linked to above. I’d be interested in seeing a better LINQ statement if anyone has one.

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

namespace MyHobbyGear.Controllers
{
public class AutoCompleteController : Controller
{
MyHobbyGearEntities mhgDb = new MyHobbyGearEntities();
//
// GET: /AutoComplete/

public ActionResult Manufacturer(string q)
{
var manufacturers = (from p in mhgDb.Products where p.ManufacturerName.Contains(q) select p.ManufacturerName).Distinct().Take(10);

string content = string.Join<string>(“\n”,manufacturers);
return Content(content);
}

public ActionResult ProductName(string q)
{
var productNames = (from p in mhgDb.Products where p.ProductName.Contains(q) select p.ProductName).Distinct().Take(10);

string content = string.Join<string>(“\n”, productNames);
return Content(content);
}

}
}

Advertisements

Meta Tags for public facing websites


I recently took an attempt at writing a web service that allowed me to get details about a web page similar to what you see when you paste a link in face book. In doing this I learned that there are quite a few meta tags a publicly facing site should have that go beyond the basic SEO tags we’ve been putting in for years.

The SEO tags are Title, Description, Keywords and Canonical.

Title is the title you see in the top of the browser window as well as the title search engines give to your page.

<title>My Page Title Goes Here</title>

Description
is not visible in the browser window but it used below the title of your page in search engines to describe your page.

<meta name=”description” content=”This is the best page in the world, you should visit it so you know what everyone else is talking about”>

Keywords keywords should contain a comma seperated list of the search terms you are targeting. They say the search engines no longer use this so you may want to save yourself some maintenance time and stop supporting this term.

<meta name=”keywords” content=”my keyword1, my keyword 2″/>

Canonical is a relatively new one that is for search engines. If you can access a page from multiple URL’s the canonical tag should be the most human readable version that you want the search engines to display.

If you support friendly urls

something like http://www.mywebsite.com/Articles/1/Title-Of-My-Story

is preferred over http://www.mywebsite.com/articles?id=1

In this case you would place the tag below in both versions of the page.

<link rel="canonical" href="http://www.mywebsite.com/Articles/1/Title-Of-My-Story">

Now the new stuff I’m seeing is used to describe your page to non search engines but things like Browsers, IPhones, Mashups and Facebook.

Shortcut_Icon used in favorites/bookmarks
sample from cnn.com
<link type=”image/x-icon” href=”http://i.cdn.turner.com/cnn/favicon.ico&#8221; rel=”shortcut icon”>

Apple Touch Icon points to hi-res icon for Apple iTouch Devices.
sample from stackoverlfow.com
<link href=”http://sstatic.net/stackoverflow/img/apple-touch-icon.png&#8221; rel=”apple-touch-icon”>

image_src is picked up by things like facebook and google news to show the image associated with your pages content.
sample from cnn.com article
<link rel=”image_src” href=”http://i.cdn.turner.com/cnn/.element/img/3.0/newsscanner/no_image_cnn_90x51.jpg“/>

Open Graph tags for facebook
If you care about what a link to your site looks like when someone puts a link up in facebook you can control it with open graph tags.
There is more info on open graph here on facebook.

Here’s a youtube video sample using open graph

    <meta property="og:url" content="http://www.youtube.com/watch?v=i4SkO3ypCXw" />
    <meta property="og:title" content="Drunken Master Trailer" />
    <meta property="og:description" content="Wong Fei Hong (Jackie Chan) is sent to train under his uncle, a wine guzzling master famous for crippling his students. Desperate to escape this brutal teach..." />
    <meta property="og:type" content="video" />
    <meta property="og:image" content="http://i2.ytimg.com/vi/i4SkO3ypCXw/default.jpg" />
    <meta property="og:video" content="http://www.youtube.com/e/i4SkO3ypCXw" />
    <meta property="og:video:type" content="application/x-shockwave-flash" />
    <meta property="og:site_name" content="YouTube" />

C# Webservice for getting Link details like facebook with Open Graph Support


Was working on customizing the CK Editor for a site I’m working on and thought after using sites like facebook where they just paste a link and it auto formats it with details people are not going to want to use the actual link button. That’s too much work. I started looking around for a CK Editor Plugin that did the ‘facebook magic’ for me but I couldn’t find one. So I started looking at facebook, digging through their api and decided I needed to build a webservice to do this.

Here’s what I did:

1.  Use HtmlAgilityPack for html parsing.
2.  Get the basic info from standard ‘head’ tags.
3. Check to see if the site supports facebooks ‘open graph’
4.  If we still don’t have an image loop though all the images on the page. Download them and check they are atleast 50 pixels, ‘score’ them based on the alt tag being compared to the title and h1 tag.
5. If the link is an image itself set the link type to 2. (Link type of 0 = non html or image.)

Read more of this post