Monthly Archives: November 2013

jQuery IP Location Plugin – jqIpLocation Example


In this post, we will see how to get location of an IP address. To achieve this, we will use jquery’s popular plugin “jqIpLocation”.

About jqIpLocation plugin:

jqIpLocation is a jQuery Plugin that returns the location of an IP address in JSON format. You can get country, country code, city name, region name, latitude and longitude information about IP address location.

Now Let’s see how it works with an Example.

1. Create a new asp.net project in Visual Studio, name it as “jqIpLocationPluginExample”.

2. Select the Empty template for web forms.

3. Once the project is created, add a webpage, call it as “Default.aspx”.

4. Download the plugin from here. Extract the rar file and copy the folder to our project.

5. Include the Javascript resources into our Default.aspx page’s <head> section.


<head>
<script src="jqIpLocation/jquery-1.6.3.min.js"></script>
 <script src="jqIpLocation/jqIpLocation.js"></script>
</head>

6. Create a table on page, consider following code snippet.


<table class="CSSTableGenerator">
 <tbody>
 <tr>
 <td>IP</td>
 <td>
 <asp:Label ID="lblIP" runat="server" ClientIDMode="Static"></asp:Label>
 </td>
 </tr>
 <tr>
 <td>Country</td>
 <td>
 <asp:Label ID="lblCountry" runat="server" ClientIDMode="Static"></asp:Label>
 </td>
 </tr>
 <tr>
 <td>Country Code</td>
 <td>
 <asp:Label ID="lblCountryCode" runat="server" ClientIDMode="Static"></asp:Label>
 </td>
 </tr>
 <tr>
 <td>City</td>
 <td>
 <asp:Label ID="lblCity" runat="server" ClientIDMode="Static"></asp:Label>
 </td>
 </tr>
 <tr>
 <td>Region</td>
 <td>
 <asp:Label ID="lblRegion" runat="server" ClientIDMode="Static"></asp:Label>
 </td>
 </tr>
 <tr>
 <td>Latitude</td>
 <td>
 <asp:Label ID="lblLatitude" runat="server" ClientIDMode="Static"></asp:Label>
 </td>
 </tr>
 <tr>
 <td>Longitude</td>
 <td>
 <asp:Label ID="lblLongitude" runat="server" ClientIDMode="Static"></asp:Label>
 </td>
 </tr>
 </tbody>
 </table>

If you observe, I have applied “CSSTableGenerator” class to table, which I have generated from here. I have added it in “StyleSheet1.css” file in the project and included the reference for the same.

7. Add the following Javascript code that will returns you IP Location information in JSON format.


<script type="text/javascript">
 $(function () {

var ipAddress = "213.243.4.20";

$.jqIpLocation({
 ip: ipAddress,
 success: function (location) {
 $("#lblIP").text(ipAddress);
 $("#lblCountry").text(location.countryName);
 $("#lblCountryCode").text(location.countryCode);
 $("#lblCity").text(location.cityName);
 $("#lblRegion").text(location.regionName);
 $("#lblLatitude").text(location.latitude);
 $("#lblLongitude").text(location.longitude);
 }
 });

});
 </script>

8. Now save everything and run the project, you will see following output.

Please note: I have hard coded IP address, you can change and try with some another IP.

Live Demo 1 | Live Demo 2

Source Code Download:

Github [Repository Link]

Box.com [Direct Download Link]

Advertisements

FeedEk jQuery RSS, ATOM Feed Plugin in ASP.NET MVC


In this article, let’s see an example of jQuery’s one of the popular plugin – FeedEk.

About FeedEk jQuery Plugin

FeedEk is a jQuery RSS/ATOM Feed Reader/Importer/Parser. You can obtain feeds easily from any domain.

Example:

1. Create a new project, name it as “FeedEkPluginExample”.

2. Select the empty MVC template and click ok.

3. Download the FeedEk plugin here. Include the FeedEk files in the solution.

4. Now let’s add a controller and view. Right click on “Controllers” folder in the solution and select Add >> Controller, you will see following window.

Select MVC 5 Controller – Empty option and click on “Add” button.

5. Name it as “HomeController” as shown in the following screen and click “Add”.

6. Now let’s add a view for this controller. Right click on “Views” folder in the solution and select Add >> View, you will see following window and click “Add”.

7. Include the following Javascript resources into _Layout.cshtml page’s <head> section.


<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/FeedEk/js/FeedEk.js"></script>

8. Include the FeedEk css file reference in Index.cshtml file.


<link href="~/Scripts/FeedEk/css/FeedEk.css" rel="stylesheet" />

9. Add a placeholder for the widget to your page.


<div id="divRss">
</div>

10. Add the following javascript that will populate the placeholder.


<script type="text/javascript">
$(function () {
$('#divRss').FeedEk({
FeedUrl: 'http://www.asp.net/rss/spotlight',
MaxCount: 5,
ShowDesc: true,
ShowPubDate: true,
DescCharacterLimit: 150,
TitleLinkTarget: '_blank'
});
});
</script>

There are different options which you can try. Take a look here for documentation.

11. Now if you run the application, you will see following output on the page

Live Demo

Source Code Download:

Github [Repository Link]

Box.com [Direct Download Link]