How can I add BuyProductDialog to CategoryListPage?

[SteveHiner]

Here's what I'm trying to accomplish.

I want to have a page that lists products in a category, each product with its own row.
Each row should have the ability to let the customer select options for that product and add it to their cart.

I modified the CategoryListPage and added the BuyProductDialog to it and got it to display correctly, however, I have two major problems.

1) When any Add To Cart button is clicked it fires off a validation request and shows the validation errors in all ByProductDialog controls on the whole page, not just the one the button was clicked in.
2) When the Add To Cart button is clicked the event never gets back to the server. I've stepped through the javascript (thank you Visual Studio 2008) and don't see anything obviously wrong but I'm no javascript expert. The code on the server for that button is just never fired off.

As far as I can tell BuyProductDialog was really intended to only be used on a product page where there would only be one of them. I think I'm abusing it since I want to show multiple instances on one page and they're getting confused. Currently I've directly embedded a call to the BuyProductDialog right in my custom version of CategoryListPage. The item template now looks like this:

Code: Select all

<ItemTemplate>
    <div style="float:left;width:66%" id="ProductDetailsDiv" runat="server">
        <asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder>
    </div>
    <div style="margin-top:10px;margin-bottom:20px;float:right;width:34%" id="BuyProductDiv" runat="server" visible='<%#((CatalogNodeType)Eval("CatalogNodeType")) == CatalogNodeType.Product %>'>
        <uc:ProductPrice ID="Price" runat="server" Product='<%#Container.DataItem%>' />
        <asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>
        <uc:BuyProduct ID="BuyProduct" runat="server" ShowWishlist="false" CompactMode="true" ShowMSRP="false" ShowPrice="false" ShowSku="false" ShowSubscription="false" Product='<%#Eval("ChildObject")%>' visible='<%#((CatalogNodeType)Eval("CatalogNodeType")) == CatalogNodeType.Product %>' />
    </div>
</ItemTemplate>

Please help me figure this out. It's one of the last things I need to work out on this site and it's been driving me crazy. Can/should this be handled by modifying scriptlets? I haven't really figured out when I should modify a scriptlet and when I should modify aspx and cs files. Since I'm a software developer I probably jump into the code a bit too quickly.

[mazhar]

Set AddToCart button's CausesValidation property to false so that it will not fire validation request to all of the buyproduct controls.

[SteveHiner]

Thank you! That solved the biggest hurdles.

The Page_Init method pulls the product ID out of the query string but since it's on a category page the query string only has the category id in it. I'll have to put the product id in the viewstate or something.

Turning off validation really just postponed the work I'm going to have to do. Eventually I'm going to have to get validation working in the page so I can't keep it turned off forever but at least for now it makes the page (mostly) function.

From a quick glance over the code it looks like it doesn't do any backend validation for the stuff validated in the browser. Is that the case? If so, that's bad. I, personally, run with javascript turned off in my browser since that's where a lot of security vulnerabilities are. If a customer has javascript turned off it means they can send data to the backend that hasn't been validated. You always have to validate on the backend too - you can't ever trust something coming from the user's browser.

Any other advice is welcome.

[mazhar]

We used the ASP.NET Validation controls for the validation purposes. The good thing is that these controls automatically performs a validation twice, once in client's browser and then on server when the form is submitted to the server ASP.NET automatically validates again the form on server. This is just to make sure that form will be validated in any case either the browser's java script is enable or disabled.

[sfeher]

Were you able to make this work correctly?
I have a client with similar interest on this and we want to enable this same functionality.

Running
AbleCommerce for ASP.NET
VERSION: 7.0.7.14600
MSSQL v2005
AC SCHEMA v2005
.NET CLR v4.0.30319.235


Not sure if what you had done on the prior version was applicable to my version above.
I have only a single 'option' that we'd want to display on our site, so it doesn't have the concern of multiple selections per product. But this functionality would be a huge step forward for my client.

Thanks in advance!