Asp.net MVC 电子商务应用程序 - 添加到购物车实施
假设我正在渲染产品列表,每个产品旁边都有“添加到购物车”链接/按钮。
我还有一个带有 AddToCart 操作的 CartController ,它接受 Product 类型的参数。
将产品添加到购物车后,用户应停留在同一页面(产品列表) - 不要重定向到购物车或其他内容。
我正在渲染购物车摘要部分视图,该视图应该自行更新。
所以我的问题是关于“添加到购物车”链接/按钮的实现。
我应该使用: Html.ActionLink(...)
或 Html.BeginForm() 和提交按钮。
也许还有其他方法...
在每种情况下如何发送产品信息?
谢谢
Let say I am rendering list of products with Add To Cart link / button next to each.
I also have a CartController with AddToCart Action that accept a parameter of Product type.
After product is added to cart user should stay on the same page (Product list) - not to be redirected to Cart or something.
I am rendering Cart summary partial view that should update itself.
So my question is about implementation of the Add To Cart link / button.
Should I use: Html.ActionLink(...)
or Html.BeginForm() and Submit button.
Maybe there is other ways...
How do I send Product info in each case?
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我建议对 CartController.AddToCart 使用 jQuery.post() 请求。 使 AddToCart 成为部分视图。 然后显示一个模式弹出窗口(页面顶部的 div),显示该产品已添加到购物车......然后淡出!
把事情简单化。
现在请记住,您的某些用户将无法支持 jquery/javascript。 因此,将初始的“添加到购物车”按钮发布到“添加到购物车”页面(不是部分页面......完整页面)......这可以将它们返回到原始页面。 然后将 jquery 函数点焊在“添加到购物车”按钮的顶部。 这样你就可以很好地覆盖两个世界。
看一下不显眼的 javascript/jquery 的概念。
I suggest using a jQuery.post() request to your CartController.AddToCart. Make AddToCart a partial view. And then show a modal popup (div on top of your page) that shows that the product was added to the cart...then do a fade out!
Keep it simple.
Now keep in mind that some of your users won't be able to support jquery/javascript. So make the initial add to cart button post to an add to cart page (not partial page..full page)...which can return them to the original page. Then spot weld your jquery function on top of the add to cart button. This way you cover both worlds nicely.
Take a look at the concept of unobtrusive javascript/jquery.
我这样做的方法是为每个添加按钮创建一个表单(可能还有数量),因为您希望您的 AddToCart 操作无论如何都只接收 POST 操作,这样您就可以处理所有添加到购物车逻辑,然后重定向到您的主要目录视图(或类似的东西:)
The way I do it is to have a form for each add button (with maybe the quantity also), since you want your AddToCart action only receive POST actions anyway, that way you process all the add to cart logic and then redirect to your main catalog view (or something like that :)
我再次考虑如果用户没有 javascript 会发生什么。 现在这种情况不太可能发生,但是您是否想因为有人不小心关闭了 javascript 而失去一笔销售?
所以我要做的是创建有点典型的 AddToCart 链接 ()。 然后,AddToCart 控制器将执行其操作并重定向回产品列表页面(您可能必须传递一个参数来指定要返回到哪个页面)。
所以这是要考虑的第一步——关闭 JavaScript。 现在你可以考虑如何用 javascript 来实现。
捕获点击事件( $('a.add').click(...) ),然后您可以执行两件事。 一种方法是调用 URL(您可以从事件对象中获取它),然后单独更新购物车。 您还可以向 URL 添加参数,以便显示购物车部分视图,执行类似(凭记忆编写)的操作:
James
Again I'd take into consideration what happens if the user doesn't have javascript. It's not very likely these days, but do you want to lose a sale just because someone accidently turned off javascript?
So what I'd do is create the somewhat typical AddToCart link (<a class="add" href="/Shop/AddToCart/5">). The AddToCart controller would then do it's stuff and redirect back to the product listing page (you might have to pass a parameter to specify which page to go back to).
So that's the first step to consider -- javascript turned off. Now you can think about how to do it with javascript.
Capture the click event ( $('a.add').click(...) ) and then you can do two things. One would be to call the URL (you can get it out of the event object) and then separately update the cart. You can also add a parameter to the URL so that it displays the cart partial view, doing something like (written from memory):
James