MVC3 从 Jquery 更改视图

Question

我是 MVC3 和 Jquery 的新手。也许我没有采取正确的方法，如果有更好的解决方案，请告诉我。

我想使用 JQuery 来更改我的 MVC 应用程序中的视图。我在主页上有一个产品列表。当用户点击一个产品时，我用 Jquery 向服务器发送一个带有产品 ID 的请求，并切换到产品详细信息视图。在我更改视图之前，我会做 Jquery 爆炸效果。我正在使用 Jquery 效果的回调函数来提交请求。当我调试我的代码时。调用产品详细信息控制器并返回详细信息视图。但是 Web 浏览器不会更改产品详细信息视图。它停留在主页上。

这是我的产品控制器：

public class ProductController : Controller
{

    public ActionResult Details(string productId)
    {
        return View();
    }
}

带有回调的jQuery爆炸效果：

$(".productOriginal").click(function () {
            $(this).hide("explode", {}, 1000, productSelectedCallback);
});

jQuery 回调：

function productSelectedCallback() {
   var prodId = $(this).attr("id");
   var data = { productId: prodId.toString() };
   $(this).load('/Product/Details');
}

除了 .load 之外，我还使用了 .post 和 .ajax 并得到了相同的结果。所以，我必须从根本上错过一些东西。

我正在使用默认注册路由。 products 文件夹的设置与 home 文件夹相同，并且有一个 details.cshtml。

感谢您的帮助！

Answer 1

试试

function productSelectedCallback() {
   var prodId = $(this).attr("id");
   var targetUrl = '/Product/Details/' + prodId.toString();
   $(this).load(targetUrl);
}

编辑：

从

更改控制器上的操作方法

public ActionResult Details(string productId)
{
    return View();
}

到

public ActionResult Details(int id)
{
    return View();
}

或您的 jQuery 代码：

function productSelectedCallback() {
   var prodId = $(this).attr("id");
   var targetUrl = '/Product/Details/?productId=' + prodId.toString();
   $(this).load(targetUrl);
}

您可能没有路由设置来在您的操作中采用“productId”。您仍然可以使用它（如果您不想配置路由），但它需要在查询字符串中。

编辑 2：

鉴于您的最后评论，我不确定您是否真的希望将 AJAX 用于您的解决方案，因为您正试图从一个页面重定向到另一个页面。我建议将您的返回类型更改为 RedirectToAction 结果。这将告诉浏览器您需要重定向，但这需要在您的产品详细信息操作以外的操作中完成（否则您将获得无限的重定向循环）。

试试这样的：

// In the home controller where Id = the product id
public ActionResult RedirectToProductDetails (int id)
{
    // Use whatever names you want for Id and ProductId, respectively
    return RedirectToAction ("Details", "Products", new { id = id });
}

// And then in your Product Controller:
public ActionResult Details (int id)
{
    var MyProduct = // Get your product from the database or whatever
    return View (MyProduct);
}

（请注意，这实际上会导致客户端两次旅行，从而有效地消除了使用“AJAX”方法的任何优势。）

Answer 2

JQuery 回调

function productSelectedCallback() {
   var prodId = $(this).attr("id");
    var BaseUrl = 'http://' + top.location.host ;

    $.ajax({
                type: 'POST',
                url: BaseUrl + '/Product/Details',
                data: ({ productId: prodId.toString() }),
                success: function (resp) {

                }
            });
}

CallJquery 带有回调的爆炸效果：

$(".productOriginal").click(function () {
            $(this).hide("explode", {}, 1000, productSelectedCallback);
});

这是我的产品控制器：

public class ProductController : Controller
    {
        [HttpPost] 
        public ActionResult Details(string productId)
        {
            return View();
        }
    }

Answer 3

您实际上可以通过使用 jquery ajax() 而不是 load() 来实现。在你的控制器上 添加[HttpPost] 接收帖子数据。也就是说，你可以从你的控制器做任何你想做的事情，无论你是想返回视图还是重定向到动作等等。

Answer 4

试试这个： 编辑测试

$(".productOriginal").click(function (event) {
     event.stopPropagation();

     var 
        _this = this,
        prodId = $(this).attr("id"); // is string

     alert("Id product: " + prodId);

     $(this).hide("explode", 1000,
        function() {
           var data = { productId: prodId };
           $(_this).load('/Product/Details', data, function(responseText){
                alert("responseText :" + responseText);
           });
        }
     );

     return false;
});

Answer 5

我明白了！感谢@jdangelo。我试图使用错误的工具来解决问题。没有理由向服务器发布任何内容。我已经有一个产品 ID。我可以从客户端重定向。

代替：

function productSelectedCallback() {
   var prodId = $(this).attr("id");
   var targetUrl = '/Product/Details/?productId=' + prodId.toString();
   $(this).load(targetUrl);
}

我用过这个：

function productSelectedCallback() {
   var prodId = $(this).attr("id");
   var targetUrl = '/Product/Details/?productId=' + prodId.toString();
   top.location.href = targeUrl;
}