MVC Storefront Part 14: Ajax With Shawn Burke

MVC doesn’t have a PostBack model and has lost a lot of the drag/drop ASP.NET Ajax functionality that was provided with .NET 2.0. In this screencast I show you how can leverage the existing AjaxControlToolkit bits, as well as do a nice Ajax-powered asynchronous form post.

Warning: This Screencast Will Self-Destruct In 5, 4, 3…
Before you watch this screencast, know that Phil and team are adding Ajax love into the MVC framework as we speak. I don’t have a release schedule, but this is one major effort they are making. What you are about to see will be obsolete in a matter of months.

Why am I showing it then? Because I like the power of the ASP.NET Ajax core scripts. There’s a lot you can do there, and if you don’t want to use our abstraction layer (i.e. roll your own stuff) you can – these scripts make it easy.

What I wanted to show you today was how the ASP.NET Ajax bits work, and can be extended to help you work with your site.

It’s very, very simple and my boss, Shawn Burke, will walk me through plugging ASP.NET Ajax into our site.

I should mention as well that Stephen Walther has a great post here, where I “borrowed” some code from.

Watch It Here

Download the Code Here

Technorati Tags: aspnetmvc

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.

Tags: aspnetmvc

This entry was posted on Tuesday, June 10th, 2008 at 10:03 pm and is filed under MVC Storefront. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Comments to “MVC Storefront Part 14: Ajax With Shawn Burke”

Martin says:

June 11, 2008 at 6:00 am

Another great screencast thank you.

paulo says:

June 11, 2008 at 9:04 am

Hi Rob,

Just a question comes to me : why do you not use subsonic for MVS storefront ?

Is it to keep this tutorial as simple as possible ?

in fact, it plans and you want to keep it secret ?

Subsonic do not fit very well with this architecture (i don’t think so because subsonic is a tool, not an orm for example, that fits very well with anything)

Or other reason, maybe ?

Thanks for your great serie

Paulo

paulo says:

June 11, 2008 at 9:06 am

erratum : i rewrite my previous post cause of potential misunderstandings

Hi Rob,

Just a question comes to me : why do you not use subsonic for MVS storefront ?

- Is it to keep this tutorial as simple as possible ?

- in fact, it plans and you want to keep it secret ?

- Subsonic do not fit very well with this architecture (i don’t think so because subsonic is a tool, not an orm for example, that fits very well with anything) ?

- Or other reason, maybe ?

Thanks for your great serie

Paulo

Tuan says:

June 11, 2008 at 9:37 am

Hi ROb;

I have been searching all around for using Ajax in MVC and you just made my dream came true, thanks so much for this wonderful screen cast, I managed to get it into my application straight away.

In this application, I also used UI library of Jquery(ui.jquery.com) and found it such a great replacement for ajax toolkit and much lighter sometimes.

Now I am using both Jquery for ui purpose and your solutio for the web request.

I also follow all your screen casts and managed to make it into a vb application now,it was such a good learning process for me.

Thanks millions!!!!!

Steve says:

June 11, 2008 at 10:17 am

Just promise me when MS adds their ‘javascript love’ that it doesn’t interfere with my jQuery love

Jamie says:

June 11, 2008 at 10:30 am

@Steve: I’m with you! jQuery is light and does pretty much everything you’d ever need it to do in a much simpler fashion (for those of us that actually understand client-side programming anyway). I’d be happy never using Microsoft’s bloated client-side junk when something as elegant as jQuery is available.

Jamie says:

June 11, 2008 at 10:33 am

Just to expound upon my last thought:

MVC is like someone at Microsoft finally said "Hey, there are folks out there that actually understand how HTTP works and would like to work in a lighter, more logical manner – let’s build something for them".

MS AJAX is still the same old "Make it easy for Mort" implementation as WebForms.

Hopefully whatever they’re planning for an MVC/AJAX union isn’t just bolting on the existing AJAX stuff.

Jeff says:

June 11, 2008 at 12:57 pm

@Jamie, @Steve: I second this. I am not to familiar with jquery yet, but as I start building out my mvc app it has been my selected. Asp.net AJAX was great because webforms because it made life really easy for webforms. But things like jquery are pretty easy to use with MVC as it seems to me, and hopfully they don’t make that harder.

The point the Rob makes about somtimes open source isn’t an option is a good one so I am glad to see that there is work around making the asp.net ajax work more easily but hopefully they dont make it more difficult for the people that want to use another library.

Because it isn’t so hard to implement ajax in an mvc application right know (plenty of erticles on the subject) I wish that we would be getting some direction were reusable controls are going, and how we should go about making controls(like web form controls that we have in out tools bar) for mvc that dont require the runat server. I actually thought that this would be easy until I tried it. I think the what Rob Started with the componentController was a start (but it needs to be routable for ajax, and would be great if there would be a way to apply filters to it)

Rob Conery says:

June 11, 2008 at 4:03 pm

@Steve, @Jamie, @Jeff…

>>>I’d be happy never using Microsoft’s bloated client-side junk when something as elegant as jQuery is available<<<

That’s the thing really – people always think MS Ajax is "bloated" – but that’s not the case. jQuery 1.2.6 is 98K, MS Ajax is 82K. Odd isn’t it?

They have a different focus, but dismissing it as "bloated" without using it is a disservice yes?

>>>MS AJAX is still the same old "Make it easy for Mort"<<<

No, it isn’t. It’s actually a very powerful set of Javascript bits. The abstraction of the core types is something I think is killer – DateTime, TimeSpan, String, etc – really, check it out before you diss it.

>>>I wish that we would be getting some direction were reusable controls are going<<<

I will be talking more about this.

Paulo says:

June 12, 2008 at 9:55 am

hello

Rob, please could you answer to my questions ?

Many thanks

Jeff says:

June 12, 2008 at 10:55 am

@Rob I wasn’t really agreeing to the bloat part(Although, I am suprised to see that the core is smaller than jquery). Just really that I liked how flexible MVC is to use any library and that I hope that part didn’t go away. I like that MVC team is working on Ajax I just hope it doesn’t interfire with the ability to make use of another library or make it more cumbersome to use another library. My choice for Jquery wasn’t realy because of size ad bloat but that as somone not extreamly familiar with client side javascrip their documentation is great. Asp Ajax seem to be a litle behind in this area as it was up intil this point drag, drop, and configure for winforms.

Anyway, I am glad to here that you will be addressing reusable controls. As this is what I am most interested in right now.

Ajay says:

June 16, 2008 at 10:52 am

Hi Rob,

I am following MVC very closely and your fantastic shows too.

I have a question regarding the Html.RenderComponent helper method.

from your code –

( <%=Html.RenderMappedComponent<Commerce.MVC.Web.Components.UserSession.UserSessionController>(x=>x.Summary()) %> )

I have a requirement where I need to build this dynamically as the information about which component to load/render is being retrived from configuration.

What are the options I have?

Thanks & Regards,

Ajay

Rob Conery says:

June 16, 2008 at 10:32 pm

Hi Ajay- if it’s simple logic you can run an if statement – if it’s more than that I’d make a helper out of it.

The idea here is that these are visual elements – can you give me more detail?

Ajay says:

June 17, 2008 at 2:41 am

Hi Rob,

the idea here is that the view pages are not pre-designed. Components are built and kept. User can select the list of components and also supplies the CSS.

The selected list of components are stored in the database. And during building that view, I need to get the list of all components and their actions, and dynamically call the RenderComponent method in the generic view which will emit the HTML from all those components and will show the dynamic view containing the components that user wanted.

Thanks & Regards,

Ajay

philip says:

June 17, 2008 at 1:40 pm

Hello,

I have been following along with your development of the MVC Storefront and was just looking over the Linq-to-sql implementation and was wondering about the lifetime of the DataContext.

In the SqlCatalogRepository its constructor takes a "DB" data context, which implements IDisposable. The SqlCatalogRepository class, however, does not implement IDisposable and I wonder if that is scalable? Could this lead to starvation of sql connections or other resources on a busy web site?

thanks,

Philip

Rob Conery says:

June 17, 2008 at 11:48 pm

Philip – the intent is to have it managed by the DI container, which in this case is StructureMap. When I ask StructureMap for an instance of the SqlCatalogRepository, it will "inject" an instance of the DataContext.

It manages this context by the declaration:

ForRequestedType<DB>()

.TheDefaultIs(() => new DB())

.CacheBy(InstanceScope.Hybrid);

"InstanceScope.Hybrid" is another way of saying "Request lifetime".

I need to make sure this works as intended – but right now that’s what I will aim for.

Rob Conery says:

June 17, 2008 at 11:56 pm

@paulo:

>>why do you not use subsonic for MVS storefront ?<<

SubSonic doesn’t have IQueryable setup yet.

>>- Is it to keep this tutorial as simple as possible ?<<

>>- in fact, it plans and you want to keep it secret ? <<

>>- Subsonic do not fit very well with this architecture (i don’t think so because subsonic is a tool, not an orm for example, that fits very well with anything) ?<<

Weird question Paulo. SubSonic is an ORM tool, it just doesn’t have IQueryable yet. I will use it in the future though.

Elijah Manor says:

June 18, 2008 at 11:18 am

I would love to check out your demo code, but it doesn’t seem to work. Can you please check into this? Thanks!

Paulo says:

June 18, 2008 at 6:31 pm

Thanks rob

but sorry, subsonic that i like so much is not an ORM but a super database access tool and this is why i love it

Rob Conery says:

June 18, 2008 at 6:37 pm

@Elijah: generally a little more info is needed :p

@Paulo: Yah, it’s an ORM

Elijah Manor says:

June 19, 2008 at 3:26 pm

Sorry, I had meant that the demo code wasn’t available for download from your blog. It seems it was just an issue w/ the codeplex site, because shortly after (maybe 30 mins) the page rendered w/o error.

Now that I’ve had a chance to look at your code, I successfully implemented the TextBoxWatermark like your video.

I tried to extend this technique to the CascadingDropDownBehavior. It worked on the top level dropdownlist, but when I dynamically add another dropdownlist I am having some issues.

Is there something special I need to do to integrate the AjaxControlToolkit.Resources, because I get the following error "AjaxControlToolkit.Resources is undefined" on line 110 from CascadingDropDownBehavior.js

Any thoughts would be greatly appreciated. Thanks!

Here is my code…

Sys.Application.initialize();

Sys.Application.add_init(function() {

$create(

AjaxControlToolkit.CascadingDropDownBehavior,

{

"Category":"CustomerA",

"ClientStateFieldID":"hiddenFieldClientCustomerId",

"PromptText":"<Select Customer>",

"LoadingText":"<Loading…>",

"ServiceMethod":"GetCustomers",

"ServicePath":"/WebServices/CustomerService.asmx",

"id":"exCascadingDropDown"

null,

$get("ddlCustomer")

);

});

function addChildCustomer( parentId, id )

{

Sys.Debug.trace(’addChildCustomer: parentId=’ + parentId + ‘; id=’ + id);

var controlId = "ddlCustomer" + id;

$("#divCustomers").append("<select id=’" + controlId + "’ class=’dropDownList’ onchange=’addChildCustomer( this.id, this.value );’ />");

$(’#’ + controlId).highlightFade({ speed:1000 });

Sys.Application.add_init(function() {

$create(

AjaxControlToolkit.CascadingDropDownBehavior,

{

"Category":controlId,

"ClientStateFieldID":"hiddenFieldClientCustomerId",

"ParentControlID": parentId,

"PromptText":"<Select Customer>",

"LoadingText":"<Loading…>",

"ServiceMethod":"GetCustomers",

"ServicePath":"/WebServices/CustomerService.asmx",

"id":"exCascadingDropDown" + id

null,

$get(controlId)

);

});

}

</script>

</div>

janis says:

June 20, 2008 at 4:48 am

hi rob

i have question that are offtopic. i don’t see any email address so that’s why i write it here.

i seen your tutorials on asp.net i would like to have the info about the theme color coding you use on visual studio.

other question is will there be in the future a button in vs that i don’t see the comments(because i write a lot of them) and some time’s it bug me..or do you have a plugin for me..

please mail me about it.

thx in advance

kevin says:

June 20, 2008 at 9:30 am

@Janis

blog.wekeroad.com/…/rails-y-textmat

Joel says:

June 22, 2008 at 1:44 am

Rob,

Are you going to be performing paging on your product lists. I would like to see this implemented with your current repository patter. Would use your PagedList<t> that you posted a while ago?

Thanks

Joel

Brad says:

June 22, 2008 at 2:37 am

How do I get the database for the Storefront demo?

Rob Conery says:

June 22, 2008 at 3:39 am

@Joel: yes – I just popped paging in and will document it shortly.

@Brad: The DB is in a BAK file in the Data project (in the DB folder).

Angel Escobedo says:

June 23, 2008 at 3:08 pm

I think that mvc.net framework would be more accepted if in next releases plays more with components for examples grids that search on remote or local, updaters components and all of Asynchronous jscript can resolve in a better way, maybe .net developers prefer to use this components in contrast to use or learn new third party frameworks.

Al says:

June 24, 2008 at 4:46 pm

I think I have a man crush on you! Thank you for the series, they have been greatly helpful.

Florian Salbrechter says:

July 10, 2008 at 5:26 am

Hi Rob!

Thanks for the screencast!

Just downloaded your last example (change set 9325) and wanted to note that there’s a small typo.

In Catalog/Index.aspx the url ‘/asynch/callback’ should be changed to ‘/async/callback’ to match the Callback route.

best regards,

flo

almny says:

May 6, 2009 at 12:25 pm

i want to download all viedo how i get the url to it ?

snowwhite says:

July 1, 2009 at 8:32 pm

I’m not good at explaining, so just go to my poop dofus power leveling
it supposed focus dofus kamas,high level with high equipment,^_^
don’t miss it

Learn ASP.NET MVC
Search for:
Subscribe
The Lounge

Ads by The Lounge
Tags
alt-net ASP.NET aspnetmvc Blather C# 3.0 code-generation Commerce Starter Kit crazytalk fitness fud Gadgets Games geekout General Google hawaii In My Face jQuery Kona LINQ meme microsoft musings MVC Off-topic OLAP open-source oxite PayPal Rails security Silverlight SQL Server SubSonic sucka t4 TDD Team Foundation thoughts Tips utility Vista Whatever xss
About Me

I'm Rob Conery and I work on the ASP.NET Team here at Microsoft.

I write this here blog and I'm not shy about my opinion, which of course is my own :). I'm working on it being that of the company - but I think it will take a bit of time.

I am also the creator of SubSonic, the No BS Data Access tool. You can read all about it here on my blog, or on the project site.

If you have a question or a thought- you can email me at my full name at Gmail, or you can send me an email at Microsoft (robcon).

MVC Storefront Part 14: Ajax With Shawn Burke

Learn ASP.NET MVC

Subscribe

The Lounge

Tags

About Me