jquery - MVC3 从 Jquery 更改 View

Question

我是 MVC3 和 Jquery 的新手。也许我没有采取正确的方法，请让我知道是否有更好的解决方案。

我想使用 JQuery 更改 MVC 应用程序中的 View 。我的主页上有一个产品列表。当用户单击产品时，我使用 Jquery 向服务器发送带有产品 ID 的请求，并更改为产品详细信息 View 。在我改变 View 之前，我做了Jquery爆炸效果。我正在使用Jquery效果的回调函数来提交请求。当我调试我的代码时。调用产品详细信息 Controller 并返回详细信息 View 。但网络浏览器不会更改产品详细信息 View 。它保留在主页上。

这是我的产品 Controller :

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 并得到了相同的结果。所以，我一定从根本上错过了一些东西。

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

感谢您的帮助!

Answer 1

尝试

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

编辑:

更改 Controller 上的操作方法

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”方法的任何优势。)