Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Monday, November 23, 2009

TweetGIS

I just wanted to talk about a little project I did early in the year for ESRI's 2009 Developer Summit's Dev Challenge contest. At the time people were just starting to understand what Twitter was and how to use it. So I thought it would be a really neat way to use Twitter as an editing status feed on parcel data. It would tweet when someone edited the attributes of a parcel and include a link to the parcel that was edited. It would also tweet when a new user was created and when one returned.

Since ESRI's Javascript framework doesn't support attribute editing I separated the data from the features. I put the attribute data inside Google Spreadsheets, which I found out does not have a record limit.

The project is made up of 2 apps. The front end which consist of html, jQuery and ESRI's JSAPI Framework. Then the server side piece which I used ASP.NET MVC, TweetSharp library and Google's Spreedsheet API.

The project came together really well and took 2 weeks of late nights.

Here is a presentation I did on it

Demo

Source Code
Posted by Donny at 9:33 AM 2 comments
Labels: , , , , ,

Tuesday, May 26, 2009

Using jQuery Plugin Uploadify with Asp.net MVC

Just started using this great jQuery plugin called Uploadify, that lets you upload multiple files to the server. It uses flash to queue the files and send them one by one to the server. Plus provides feedback and all other types of goodies. The implementation is pretty straight foward.

Just add this client side code.

<script type="text/javascript" src="/Content/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/Content/js/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#fileInput").uploadify({
 uploader: "/Content/swf/uploadify.swf",
 script: "/UIImageViewer/Upload",
 cancelImg: "/Content/imgs/cancel.png",
 auto: true,
 folder: "/uploads",
 onError: function (a, b, c, d) {
 if (d.status == 404)
   alert("Could not find upload script. Use a path relative to: "+"<?= getcwd() ?>");
 else if (d.type === "HTTP")
   alert("error "+d.type+": "+d.status);
 else if (d.type ==="File Size")
   alert(c.name+" "+d.type+" Limit: "+Math.round(d.sizeLimit/1024)+"KB");
 else
   alert("error "+d.type+": "+d.text);
 }
});
});
</script>
<body>
<input type="file" name="fileInput" id="fileInput" />
</body>


Then create a controller with a "Upload" action.
  public string Upload(HttpPostedFileBase FileData)
{
 /*
 *
 * Do something with the FileData
 *
 */
 return "Upload OK!";
}


The tricky part, which drove me crazy, is that you need to use the "HttpPostedFileBase" class NOT the "HttpPostedFile" class. If you use the other class the script will return a "IO Error #2038" error message.

Posted by Donny at 2:22 PM 26 comments
Labels: , ,

Wednesday, January 7, 2009

Asp.net MVC & jQuery the new standard

Wow its been a while since I'v posted something. Been busy at work and settling into the new house, holidays and every other crazy thing that happens around this time of the year.

But what I really want to talk about is the new ASP.NET MVC & jQuery and how this will be the standard way of building sites on the ASP.NET framework. I know its a bold disclaimer, but I fully believe it after using both on a couple of projects and coming away thinking.... why wasn't it always this fun to build sites in Dot Net!

To begin with the MVC part stands for Model-View-Controller. This is a very old concept dating back to 1979 which was described by Trygve Reenskaug, then working on Smalltalk at Xerox PARC(..I'm always surprised at the amount of ground breaking technology that went on at Xerox back than.).
In MVC, the model represents the information (the data) of the application; the view corresponds to elements of the user interface such as text, checkbox items, and so forth; and the controller manages the communication of data and the business rules used to manipulate the data to and from the model.




You gain a lot by separating your website out like this. It makes it super easy to run Unit Tests against all 3 levels. You also lose the ViewState dead weight. No more limitation on just 1 form and the post back model goes right out the door. Now the down side is most server controls that use ViewState will not work. But MVC makes up for this with HtmlHelpers. Plus you get really nice looking REST like urls. Like so http://stackoverflow.com/questions/tagged/asp.net-mvc. Notice you don't see the ".aspx" ext or any extensions. You may think "who cares, so your url looks pretty". Yeah I thought the same thing also, but what makes this important is the url is self describing. It now has meaning and that meaning can be parsed and indexed by the all mighty GOOGLE search engine. You know what that means. Better search indexes, higher ranking and more eye balls finding your site!!

These nice urls are pointers to actions in your controller.
An action is basically a function waiting to be called by a url. And just like any function you can pass parameters to it and it can output data from it. This is huge because now not just your front end .aspx page have access to your logic, but so does anything that can communicate through http. This is what makes MVC such an easy fit for AJAX. You can call that action url right in Javascript and have it return some string information or better yet JSON objects.

This is where jQuery comes in handy.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.




jQuery makes javascript fun again. Like when you first discovered all the cool little floating boxs and color changing scripts you can do with it. You can even make it snow on your web site with Javascript. But than all the different browsers decided, they knew the best way to implement javascript. You had to add all that browser checking code mixed in with your logic and boiler plate code....ahhhhhhhhhhhh!!!. No wonder most people ran screaming and called javascript a toy language. jQuery takes care of all that and comes up with a genuis way of traversing the DOM using selectors.

jQuery selectors are a combination of CSS 1-3 & XPath. Essentially, the best parts from both of these query languages were taken, combined, and used to create the final jQuery expression language.


What really makes jQuery shine is the fact that its very extensible. There are 100s of plug-ins on the site. From form valadation plugin-ins, auto-complete controls with ajax to a full Grid control with built in search using local or remote data, column resizing and ording.

jQuery was so powerful that Microsoft decided to include it with its ASP.NET MVC Beta release.

Just imagine the possibilities. I know its a different way of thinking and building a site from a .NET view. But this is the way all major web platforms are built. Ruby on Rails, PHP, Java..etc. It makes sense for the web and makes development life a lot easier.

If you want some tutorials on some of the topics I talked about ScottGu's Blog has some really nice posts that get into the details of ASP.NET MVC.

jQuery's site has a lot of nice documentation on what jQuery is and how it works.
Posted by Donny at 8:40 PM 1 comments
Labels: , , ,
Subscribe to: Posts (Atom)