The technique is simple; you dynamically load a partial view into the DIV dialog  . There are a few tricks to wire up the validation, and to identify success over failure. .

Get the source code by clicking here, take a look and let me know what you think.

Parser Error Message: The string ‘fb:like:layout’ contains too many device filters. There can be only one.

But first a bit of background: Addthis.com is one of the most popular widgets out there for social sharing. With a few simple clicks you can provide your users with the ability to easily share your content pretty much everywhere.

One of the features they offer is the ability to add the “Facebook Like” button, and for that, their code generator will give a snippet containing  something like this:

<a class="addthis_button_facebook_like" <strong>fb:like:layout="button_count"</strong>> </a>

What they are doing is passing extra information to their widget on how to display the facebook like button. However, IIS 7.0 seems to get confused by the colons in the attribute name (‘fb:like:layouts) and thows a parser error. Interestingly enough, this only happens when they are two colons in the attribute name; one colon will work (try it).

I did not have time to investigate the root cause of this; however I needed a quick fix, and it basically came to this: Add the property with Javascript!

1. Remove problematic the attribute from the tag, and add an id so you can recognize it later. The tag will then be as follow:

<a class="addthis_button_facebook_like" id="facebookLike"> </a>

2.  Now add some javascript to manually add the property, I am using  jQuery, and it looks like this::

$(function () { $("facebookLike").attr("fb:like:layout","button_count");});

That is it! A simple and fast work around

For reference:

• AddThis.com
• Facebook Social Widgets

Basically all you have to do is place an HTML file on your root folder with the following name: “App_Offline.htm”. Once the file is found, ASP.NET will shut-down the application and stop processing any incoming requests.  Once your down time is over, remove the file (or rename it to something like _App_Offline.htm) and your application will come back to life

Make sure your file should be at least 512 bytes otherwise you will get some IE errors (404 Errors) . The application still won’t process any requests, but the user will see an error. If your page is small and you don’t want to include more information than necessary, the trick is to include some commented code to your file to trick IE into thinking the file is bigger than it is.

Well, that is it. Better late than never I hope it helps people who might have missed this like my self.

In a nut shell, Silicon Halton is a group dedicated to connecting and creating strong and local relationships for hi tech entrepreneurs and leaders in the Halton region.

I have been attending Silicon Halton’s meetings (and un-meetings) for a few months now (http://www.siliconhalton.com/); I am both impressed and encouraged by the groups potential; obviously there is networking and the possibility of making new business connections, but the group also aims to play a role in the Halton business community as a whole… and that is what’s kept me going back!

Meet up #11 – Improving Silicon Halton’s Business Directory

The Topic

On meet up #11, we followed the un-meeting format again: I pitched the topic of Improving the Silicon Halton’s Business Directory. It proved to be a popular one attaining the most votes among all the topics suggested – and I winning me VMware t-shirt in the process J

The Problem

We are a group of IT Business in Halton region; however, there is no easy way for members or external users to find a suitable service provider within the group.

So the problem can be summarized as not having a useful Member Directory. This challenge came to me when one of my projects required some development on Silverlight; my first idea was to locate a member on Silicon Halton that could partner with me to be able to provide a solution. However, I was discouraged to notice that there wasn’t a member directory that could help me with the search.

At the same time, I realized that other members searching for my areas of expertise would have a hard time finding my company or me…

The Discussion

We started the discussion re-iterating the problem: The need for a member directory: this meant that members would have to build a searchable member profile; which we haven’t done .

However, not all the participants felt the pressing need of a business directory; so we quickly turned into proposing ways to utilize the Linked In Group so it would serve the purpose of a business directory.

Some of most relevant suggestions included:

• Post into the boards when looking for certain expertise.
• Create one single Discussion within the group where all the companies can post their profile. The discussion would be searchable, thus addressing the need of members to search for other members’ expertise.
• Create a Company Profile on Linked In, and join with it the Silicon Halton Group.
• Do Job Postings on Linked In that would only apply to a Group.
  Note: I investigated this point, and from the initial Job Post form, it does not seem possible.

Conclusions

These are some of the conclusions reached by the group:

• Linked In could be leveraged to find members by posting into the Discussion forums, improving personal profiles and creating company profiles.
• Company members need more opportunities to present their business to the group; either on LinkedIn or at Meetings, there is a need to know what each other do, so we can find points of collaboration and be able to provide referrals.
• While LinkedIn addresses the problems for Members, any external user/company looking for services will still encounter challenges when looking for specific providers.

–

Thanks to everyone that participated; the creativity and resourcefulness of the members came through but certainly the problem will not go away. Although it might not be a pressing need right now, in the future Silicon Halton should consider a business directory with full profiles to be able to properly showcase and promote their members.

Our Objective

When a user clicks the “Delete” button on a list (or elsewhere), we are going to show a confirmation dialog. If the user confirms, the record will be deleted. If he/she cancels, no action will be taken. In essence, this is what we are trying to do:

Requirements

To implement this solution you will need to have the jQuery and jQueryUI libraries.

Approach

1. Modify the repeater.

We will start by reviewing the code for a strongly-typed view for the “List” content; the repeater part looks like this:

<% foreach (var item in Model) { %>
<tr >
<td><%: item.Name %></td>
<td>
<%: Html.ActionLink(“Edit”, “Edit”, new {  id=item.Id  }) %> |
<%: Html.ActionLink(“Delete”, “Delete”, new { id = item.Id }, new { @class = “delete-link” })%>
</td>
</tr>
<% } %>

This is pretty much what is automatically generated, with the difference that I have added a class to the delete action link (bolded above). These will help me identify the object with jQuery.

The repeater above generates the following HTML:

<tr>
   <td>Item 1td>
   <td>
      <a href="/Brand/Edit/18">Edit</a> |
      <a class="delete-link" href="/Brand/Delete/18">Delete</a>
    </td>
</tr>    		

Notice that the Delete link is already pointing to the Controller/Action we want.

2. Add the confirmation message

You will need to add a div tag with the confirmation message to display, simply add this:

<div id="delete-dialog" title="Confirmation">
<p>Are you sure you want to delete this Brand?</p>
</div>		

You can change the title of the confirmation box by changing the “Title” property on the div.

3. Add the jQuery

This jQuery can be added in individual pages, in my case I added it on the Master Page so it would be reusable across many pages.

Let’s go by steps; first we need to override the delete link behaviour. Here is how:

var deleteLinkObj;
// delete Link
$('.delete-link').click(function () {
    deleteLinkObj = $(this);  //for future use
    $('#delete-dialog').dialog('open');
    return false; // prevents the default behaviour

});

The snippet above is basically overriding the default functionality of all objects that have the class “delete-link”. Now, instead of directing to the specific controller/action, it will open a dialog (with ID “delete-dialog” -> the div we added on step 2).

Notice we are storing the clicked object on a variable; this is so the dialog knows which link was the one clicked.

Now we need to initialize the Dialog and its behaviour. Here we go:

$('#delete-dialog').dialog({
  autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
  buttons: {
     "Continue": function () {
          $.post(deleteLinkObj [0].href, function (data) {  //Post to action
             if (data == '<%= Boolean.TrueString %>') {
                deleteLinkObj.closest("tr").hide('fast'); //Hide Row
                //(optional) Display Confirmation
             }
             else {
                //(optional) Display Error
             }
            });
          $(this).dialog("close");
       },
      "Cancel": function () {
          $(this).dialog("close");
          }
      }
 });

Let’s brake it down to the important parts:

$.post(linkObj[0].href, function (data) {…

What we are doing here is posting into the objects href attribute which is something like /Brand/Delete/18. So we are posting to the Delete action of the Brand controller with an specific ID. The controller as we will see next, will return on the data either True or False, indicating success/failure.

When the post is successful, we now need to remove the item from the list. We do it with this simple line:

linkObj.closest(“tr”).hide(‘fast’);

What we are doing is locating the closes tr parent, and hiding it… Simple! (You’ve got to love jQuery).

4. Prepare the controller

Your page is now ready, but we need to add the logic on the controller action; there is not view related to the delete action, so you only need to implemented the HttpPost action. This is actually very simple, in my case, here is how I do it:

[HttpPost]
        public ActionResult Delete(int id)
        {
            try
            {
                BrandRepostory rep = new BrandRepostory ();
                rep.DeleteById(id);
                return Content(Boolean.TrueString);
            }
            catch
            {//TODO: Log error				
                return Content(Boolean.FalseString);
            }
        }

That is it! This implementation is highly reusable, just remember to:

1. Mark the delete button with the class
2. Add the div for the confirmation message
3. Make sure the javascript code is available for the pages you need.
4. Implement the controller action

Hope this helps..

UPDATE! Related Post: Editing rows with the jQueryUI Dialog Form and Ajax

Visual Studio 2010 (again..)

Before we continue with the new topics, let me comment on a couple points I forgot on part one.

Extension Gallery

It is now simpler than ever to extend VS2010 functionality. On the Start Page, you will find a link to the extension gallery where you will be able to download extensions both free and commercial.

I already used it, I was able to find a OpenId template from the gallery, installed it and used it immediately.

Code Snippets Usage and Management

I’ve never used the code snippets before and now I am addicted. For Web Page development it makes it very easy to work on the Source view without having to switch to the Design view, which I find saves me a ton of time.

Code snippets are really easy to use. For a sample type this on an ASPX page on vs2010: updatepanel+TAB. The entire update panel tag gets generated and you simply have to fill the extra information.

But it gets better/smarter. if you do: requiredfieldvalidator+TAB, it creates the required field validator tag, but if it is right after a text box, it actually fills in the ControlToValidate property… Sweet!

Now, if you want to change the keywords, simply go to “Tools–>Code Snippet Manager…” and update whatever you need, or create new snippets.

Test Manager

The installation of VS2010 now installs Microsoft Test Manager 2010. I do have to say, that it seems to require Team Foundation Server (TFS), which means I couldn’t really try it.

From the demonstration, this tools is pretty powerful, it allows recording, and re-running the test cases is pretty simple. There are also plenty of new templates to help jump-start the test case creation process.

I am not in QA, so unfortunately that was the extend of my notes on this subject. Although I do have to say, this was also the shorter presentation, only around 15 min.

Integration With Share Point

Right up front I have to say I am not a Share Point Development; the presenter said at the begginig somethign along these lines: “… if you are not a share point developer, be glad that you missed all the previous versions …”.

Apparently, integration with Share Point has not been the easiest thing before; but from what I can see, VS2010 integrates with Share Point 2010 very naturally. You could develop for previous versions of Share Point if required, but the new integration features mostly target the new version.

We were shown how to create web parts in 5 mins; connecting to local or external resources, such as web services and databases.

But the coolest thing I saw, was how to consume data from share point from external applications. From what I’ve heard this was not too easy before; but now, most of the Share Point data is exposed via RESTful services.

ASP.Net Development

JQuery & Ajaxtoolkit

Apparenty, Microsoft is getting behind jQuery. Although the Ajaxtoolkit will still be supported and improved, MS has decided to put support jQuery rather than developing it’s own javascript library.

This is of course a two way street. Microsoft will support jQuery, but jQuery will start to provide better support to ASP.Net and the ajaxtoolkit.

Client ID Improvements

We have all had issues with the Client ID… ASP.Net automatically generates a client id for all your server controls. The problem is that those ids are usually built based on the location of the control in the page, and can be very long as they include the names of all the containers above it.

Now you have a bit more control over the client id, making it more predictable. There is a new property called “ClientIDMode”, that will give you the chance to decide how the id is rendered. For more info on this, you can go to http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx

Rewrite URL (Routing)

Your urls have to be SEO compliant, right? Usually that means that you have to download a 3rd party URL Rewriter. Well, now there is a new way of doing it and they are calling it Routing. Here is a nice sample from Scott Gu’s blog: http://weblogs.asp.net/scottgu/archive/2009/10/13/url-routing-with-asp-net-4-web-forms-vs-2010-and-net-4-0-series.aspx

Meta Tags

They made it easier to create the page Meta Tags:

Page.MetaDescription
Page.MetaKeyword

Do I need to say more?

——-
Well, this entry got long as well. I hope this gives you an insight of what was discuss in the event and what features are new on VS2010.

I recommend the following series from ScottGu: http://weblogs.asp.net/scottgu/archive/2009/08/25/vs-2010-and-net-4-series.aspx

Visual Studio 2010 & .Net Framework 4.0 – General

Threading/Parallel processes

Threading and/or parallel processing has been made simpler to the developers. A few concepts were discusses such as:

• Barrier/Cancellation: Basically you can introduce a barrier or “staging point”, which is a point that all processes running would have to reach before continuing. You can assign cancellation tokens to processes to cancel the threads all-together.
• Work Queue/”Work Stealing”: Meaning that each thread has a work queue to process, but when a parallel process is free, it can “steal” work from another stack different from it’s own.

The syntax to make this work is also very simple to use, as simple “Parallel.Invoke (… )” does the trick for some of the cases.

Now, a word of caution, even though this has been made simpler, parallel programming should be designed correctly and carefully… I found the following MS white paper very informative: Patterns For Parallel Programming.

Contracts for Functions

This feature I really liked. Usually at the beggining of my functions I have a series of validators that usually go like this:

if (id < 0) throw new [Exception] ("Id can not be less 0");

Well, the concepts of contracts for functions have been introduced. The contracts get enforced both at compilation and run time.  Using the contracts, the above statement becomes (In my opinion, it looks cleaner, and more intuitive):

Contract.Requires(id < 0, "Id can not be less 0");

In addition to “Requires”, you get functions like “Invariant” and “Ensures”, which covers most of the needs.

For more information on contracts, go here: http://msdn.microsoft.com/en-us/magazine/ee236408.aspx

Dependency Graphs

Visual Studio now comes with a great tool for Architects; either to keep track of your solution dependencies and architecture, or to reverse engineer an existing solution.

The dependency graph is created dynamically from your code, and a dgml file (Directed Graph Map Language) is generated. You can navigate through the graph, search, etc.  The document generated is pretty much a Visio Diagram, and it can be printed, exported, etc.

On Visual studio, you would go to the new “Architecture” option and select  to “Generate Graph”.

UML / Modeling

One of the coolest things I saw here was the ability to generate a sequence diagram from the code. Simple right-click on your function and say “Generate Sequence Diagram”… A configure a few options, like the depth you want to get. That’s it! Is going to be great for technical documentation!

SQL Server 2008 Export to Azure

It seems that one of the thing MS wanted to highlight on this event, in addition to VS2010, was Azure. They showed us how SQL Server 2008 has an option to export to MS SQL Azure by “Generating Scripts”. In theory you would simply select Azure as your “Scripts for Server Version”. However I found that I do not have this option, I am not sure if I need to install anything extra (anyone?).

So I looked around and found this article: http://msdn.microsoft.com/en-us/library/ee730904.aspx. Shows you how to migrate to azure, but not with the option they showed at the event.

Silverlight

I didn’t know much about Silverlight, so most of the presentation was new to me. But here are the things I gathered:

• Silverlight now has an out-of-browser mode; allows you to run silverlight apps as an win apps. The application generated is cross-platform so it would work on MAC and PC.
• Better integration between Visual Studio 2010 and Expression Blend.

Wow, this getting pretty long… I’ll have to split this post in two.

Part 2 will include comments on :

• VS2010 Test Manager
• VS2010 integration with Share Point
• ASP.Net improvements

http://ricardocovo.wordpress.com/2010/05/07/notes-form-visual-studio-2010-at-the-movies-event-part-2/

For developers on  Microsoft’s technologies, and in general for most start-up, it was always been hard to come up with the money for the MSDN Subscription that can be up to 6K a year. Company with competitive technologies which are open source, this is a major disadvantage for MS.

On top of this, if you developed your site on microsoft’s technologies, shared hosting was always much  more expensive for licensing issues.

Well, it seems that MS has noticed they are loosing too many start ups and are doing something about it…

The first step Microsoft took (a few years ago) to resolve this was to make deals with hosting companies so the hosting plans could be competitive and comparable with each other. Lunar pages for example offers Windows Hosting from 9.95 a month, including one instance of SQL Server.

Now it seems MS wants to make sure start-ups can seriously consider Microsoft’s technologies from the begging. MS BizSpark allows companies less than 3 years old and with less than 1million in revenue to get all MS Development tools pretty much for free for three years (you have to pay US$100 at the end of the period)!

You will need to have a company web site and an an email address from  your company domain (I don’t think you can put gmail/yahoo/etc).

I just signed up today… It seems that I get all Visual Studio, SQL Server, and even operating systems!  It also seem you get good discounts for dedicated servers in a variety of providers, such as Server Beach.

This is a great move! Without having to worry about the price tag, you can now objectively consider the technology options…And for people like me, that mostly have experience in MS technologies, it means that I don’t have to worry about coming up with funding for the development tools up front.

Now, if they could only make it free for ever…

Personally, I also like to have a single source image; that way, I don’t have to create all the sizes I need before hand. But most importantly, if I need a new size in the future I don’t have to create that new size for all the images I already have.

When working on enterprise environment, people tend consider only solutions by big companies which tend to be pretty expensive. People that can’t afford these solutions try to create the component them selves, which can be very time consuming (if done correctly).

I’ve been u sing Spry Photo for a while (http://www.spryphoto.com/). You can see it in action in http://www.clickclassified.ca and http://www.storybank.com.

With Spry Photo, I get all that I need for image resizing and more… All of it for a very reasonable price. In addition to resizing, it provides cropping,  image conversion, variant quality (affects image sizes) and text overlay (a great way to protect your content).

The integration with ASP.Net which is very simple and straight forward… I noticed they now have a PHP version which I haven’t tried.

TIP

In my integration of this product I added an extra step, I generated a CustomControl that inherits from the Image control. This control receives a source url but also an Alias. This alias is translated inside the control to the properties requried by the image server to generate my image.

In my case, I keet the Aliases in the database, but this is just one or many possible implementation. In any case, having the combination of the custom control and alias allows me to have something like this:

<cc:PortalImage id=”image” runat=”server” src=”/UserPicture.JPG” Alias=”Thumb” />

and translate it into:

<img src=”http://www.storybank.com/ImageServer/SpryIS.aspx?img=../UserPicture.JPG&cell=40,40,0xffffff&qlt=90&cvt=jpg”>

Doing this will save you time, and if done correctly you can re-use it in upcoming projects.

I hope you find this helpfull.

-Ricardo

I was suprise to see that while they had php and java libraries/samples already available, but they did not have a .Net one. I searched on their forums and on the web and did not find a library I could use.

Since I had to interact with the api, I decided to make a library, and publish it as an open source component so other developers can use it.

 You can find the library at: http://www.codeplex.com/oodlenet; all the references, source code & samples are included in the workspace.

 I hope this helps!