Hanalei, Hawaii 9/2/2010
438 Posts and Counting

MVC Storefront Part 14: Ajax With Shawn Burke

Tuesday, June 10, 2008 -

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:

Related


Gravatar
Martin - Wednesday, June 11, 2008 -

Another great screencast thank you.

Gravatar
paulo - Wednesday, June 11, 2008 -

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

Gravatar
paulo - Wednesday, June 11, 2008 -

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

Gravatar
Tuan - Wednesday, June 11, 2008 -

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!!!!!

Gravatar
Steve - Wednesday, June 11, 2008 -

Just promise me when MS adds their 'javascript love' that it doesn't interfere with my jQuery love :)

Gravatar
Jamie - Wednesday, June 11, 2008 -

@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.

Gravatar
Jamie - Wednesday, June 11, 2008 -

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.

Gravatar
Jeff - Wednesday, June 11, 2008 -

@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)

Gravatar
Rob Conery - Wednesday, June 11, 2008 -

@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.

Gravatar
Paulo - Thursday, June 12, 2008 -

hello

Rob, please could you answer to my questions ?

Many thanks

Gravatar
Jeff - Thursday, June 12, 2008 -

@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.

Gravatar
Ajay - Monday, June 16, 2008 -

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

Gravatar
Rob Conery - Monday, June 16, 2008 -

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?

Gravatar
Ajay - Tuesday, June 17, 2008 -

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

Gravatar
philip - Tuesday, June 17, 2008 -

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

Gravatar
Rob Conery - Tuesday, June 17, 2008 -

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.

Gravatar
Rob Conery - Tuesday, June 17, 2008 -

@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 ?<<

No

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

No

>>- 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.

Gravatar
Elijah Manor - Wednesday, June 18, 2008 -

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

Gravatar
Paulo - Wednesday, June 18, 2008 -

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

Gravatar
Rob Conery - Wednesday, June 18, 2008 -

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

@Paulo: Yah, it's an ORM :)

Gravatar
Elijah Manor - Thursday, June 19, 2008 -

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...

<script src="/Scripts/CascadingDropDownBehavior.js" type="text/javascript"></script>

<script type="text/javascript">

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,

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,

null,

$get(controlId)

);

});

}

</script>

<div id="divCustomers">

<select id="ddlCustomer" class="dropDownList" onchange="addChildCustomer( this.id, this.value );" />

<input type="hidden" id="hiddenFieldClientCustomerId" />

</div>

Gravatar
janis - Friday, June 20, 2008 -

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

Gravatar
kevin - Friday, June 20, 2008 -

@Janis

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

Gravatar
Joel - Sunday, June 22, 2008 -

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

Gravatar
Brad - Sunday, June 22, 2008 -

How do I get the database for the Storefront demo?

Gravatar
Rob Conery - Sunday, June 22, 2008 -

@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).

Gravatar
Angel Escobedo - Monday, June 23, 2008 -

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.

Gravatar
Al - Tuesday, June 24, 2008 -

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

Gravatar
Florian Salbrechter - Thursday, July 10, 2008 -

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

Gravatar
almny - Wednesday, May 06, 2009 - i want to download all viedo how i get the url to it ?