← Back to all blogs

Recent Posts

Building multiple column displays in MVC

Looping through a list of objects to display a table of the items is easy in MVC. All you need to do is: 1: <table>

POSTing and GETting with jQuery and MVC

The jQuery library has an extensive set of AJAX functions which make it very easy to handle website functionality with all the Ajaxy goodness you’ve come to expect. However there are some gotcha’s when working with MVC and I thought I’d take some time to talk about them. The first thing to remember is to decorate your Actions with the appropriate Http verbs, either [HttpPost] or [HttpGet]. By default MVC 2 only allows [HttpPost] requests when requesting a Json response. Phil Haack has a great article on this at http://haacked.com/archive/2009/06/25/json-hijacking.aspx. In a project I am working on I want users to be able to add other users as friends, see if their friend is online, and if necessary, delete a friend. This jQuery function allows a user to add a friend: 1: function acceptFriend(friendId) {

Uploading photos with MVC

There are many articles online talking about MVC, but not many showing how to upload files. In a project I'm working on I need to have my users upload photographs and wanted them to be able to preview the photo before submitting it. Here's a screen shot of what I'm talking about. The application allows the user to select a photo, which is then previewed. The user can then add a caption and description of the photo. During this first round the Save button is bound to the following jQuery script: 1: function uploadMemberPhoto(elem) {

jQuery and MVC–Part 4, now with Wijmo!

In part three of this series I talked about how to extend jQuery with plugins, went through the steps of writing a plugin, and then demonstrated how to use it in a standard HTML page. I showed you a popular Table Sorter plugin and showed how to initialize it with different options. In this last article I will show you one more plugin, the Wijmo Grid, and how easy it easy to implement it's different options and features. I will also show you some of the cool things that Wijmo can do to help spruce up your web forms and pages. Going back to the Student Course Admin form I've been using for these articles, I am generating a table of student data in an ASP.NET MVC app. One thing I did add since the last article was the ability to filter the students by their first or last name. This was done by adding some JavaScript and an Ajax call which gets a new set of data from the server, then replaces the original table with the new table. 1: function getStudentsByName(elem) {

jQuery and MVC–Part 3

In the last article I talked about MVC and doing some nifty Ajax functionalities with jQuery. In this article I will go over jQuery plugins, what they are and how to create them. jQuery Plugins jQuery has a plugin architecture which allows you to package up commonly used functions into a plugin. Chances are if you have a complex JavaScript function, someone has more than likely written a plugin to handle that particular functionality. The jQuery.com site has an extensive plugin library and it can sometimes be fun to browse through it to see what people have come up with. Plugins are fairly easy to write, once you have gotten the basics of jQuery down. Here is a tooltip plugin that I wrote in just a few minutes. 1: (function ($) {

jQuery and MVC Part 2

In our last episode we went over the basics of JavaScript and the jQuery library. In this installment I will show you the basics of MVC and how it renders HTML differently than Web Forms pages, and finish up showing some basic Ajax with jQuery. When ASP.NET first arrived it was a good thing. Web Forms allowed developers to build websites in a way that was very similar to how Windows Forms applications where built, with drag and drop of controls and a "code behind" architecture. Web Forms served their purpose for many, many applications in the enterprise, and many commercial applications, both large and small were successfully built using this technology. When "Web 2.0" arrived, complete with Ajaxy interactions, Microsoft put forth their own brand of controls to handle this, and for the most part this worked, and continues to work well. However the Web Forms framework makes it difficult to build clean, lean web sites, as the technology depends on many different things in the rendered HTML to make it usable when posting back to the server. Two of the main items are ViewState and Control Rendering. ViewState is sent to the browser as a way to capture what is on the page, and what has been changed when the request is sent back to the browser. For ViewState to work, controls on the page need to be rendered with specifically named ID's. This makes it difficult to use JavaScript to find elements on the page by their ID. For example adding a button to a page that is using an ASP.NET Master Page will render the following HTML: Source code: 1: <asp:Panel ID="Panel1" runat="server">

Desert Code Camp

JavaScript delete confirmation with the C1 ASP.NET GridView

The ComponentOne ASP.NET GridView allows you to add a Delete button to remove a record from the DataTable. However there isn't a native way to add a confirmation that you really want the record deleted. It's always best to check for sure when it comes to destructive actions, so I did some spelunking and came up with a way to do it. 1. Add a Template Field column to the grid by using either the property builder, or in the declarative code of your .aspx page. 2. Go into source view and add an ItemTemplate, then an asp:ImageButton.

Silverlight Grid for Easy Data Visualization

My recorded webinar, "Silverlight Grid for Easy Data Visualization" is up on Vimeo. You can see it here, http://www.vimeo.com/16241316. And as promised I've uploaded the Slides and Code. You can get them in the attachments.

So Cal Code Camp–USC