网页设计:点击购买按钮后返回

时间:2013-03-28 16:18:17

标签: html .net

我想知道点击其中一个项目的购买按钮时的最佳做法是什么。我希望它看起来像是唯一发生的事情是购物车再闪一个项目。我应该怎么做才能实现这个目标。我应该通过POST操作发送大量信息,以便我可以重新创建相同的页面并滚动到相同的位置(这将非常不方便),或者是否有更智能和更好的解决方案。我正在使用Visual Studio和MVC 3

你可能已经明白我对网页设计很陌生,尽管我现在和过去15年一直在做一些工作。

此致

1 个答案:

答案 0 :(得分:1)

优良作法是设计您的网站,使其在非js环境中正常运行。在这种情况下,您的按钮将提交完整页面刷新的表单。您的页面已重新加载,您的购物篮现在向用户显示其中还有一个额外的项目。

为了让我们的用户获得更好的体验,我们可以使用AJAX调用来增强提交操作。

这可以通过在jQuery中编写一个AJAX调用来完成,该调用触发按钮的click事件(或提交表单事件)。

在表单提交上使用jQuery的示例

$('form').submit(function(e){
    e.preventDefault(); //prevents full post-back

    $.ajax({
      type: "POST",
      url: "\\somesite\endpoint",
      data: $(this).serialize()
    }).done(function( bacon ) {
       alert( "Receive: " + bacon );
    });
});

MVC 3 Ajax扩展程序

MVC3也有一些AJAX扩展方法来帮助我们。特别是Ajax.BeginForm

@using (Ajax.BeginForm())
{
    /* Your form elements here */

    <input type="submit" value="OK" />
}

以下是有关如何使用它的简单示例How to use ajax beginform