Jquery中的MVC3变更视图

我不熟悉MVC3和Jquery。也许我没有采取正确的方法，请告诉我是否有更好的解决方案

我想使用JQuery在我的MVC应用程序中更改视图。我在主页上有一个产品列表。当用户单击产品时，我使用Jquery向服务器发送带有产品ID的请求，并更改为产品详细信息视图。在更改视图之前，我会执行Jquery分解效果。我正在使用Jquery效果的回调函数来提交请求。当我调试代码时。调用product details控制器并返回details视图。但web浏览器不会更改“产品详细信息”视图中的内容。它会留在主页上

这是我的产品控制器：

public class ProductController : Controller
{

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

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

Jquery具有回调的爆炸效果：

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

$(".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

谢谢你的帮助

试试这个： 为测试编辑

$(".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;
});

试一试

编辑：

从更改控制器上的操作方法

public ActionResult Details(string productId)
{
    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”方法的任何优势。）

您实际上可以通过使用jquery AJAX（）而不是load（）来实现这一点。在你的控制器上 添加

[HttpPost]

以接收post数据。也就是说，您可以从控制器执行任何操作，无论是返回视图还是重定向到操作等等。

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);
});

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

这是我的产品控制器：

public class ProductController : Controller
{

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

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

---

我明白了！感谢@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;
}

---

分解是jqueryui的效果。我在复制你的代码时得到了完全相同的结果。唯一的区别是产品图像消失了，而不是爆炸。你可以测试代码以查看产品代码和结果，并检查它是否有效，然后你必须查看结果发送到哪里。我得到了相同的结果。当我调试代码时，我可以看到它击中产品控制器并详细说明操作。它返回视图。我可以右键单击并选择“转到视图”，然后进入正确的视图。我还可以在web浏览器的URL中键入../product/details并加载正确的页面。我尝试将产品Id完全从图片中删除。public ActionResult Details（）{return View（）；}函数productSelectedCallback（）{var prodId=$（this）.attr（“id”）；var targetUrl='/Product/Details/'；$（this）.load（targetUrl）；}@Ryand-发生了什么？您可以在调试模式下运行它，并在action方法处中断，看看它是否被调用？您是否遇到内部错误或其他问题？还有，你是返回View（）还是PartialView（）？@jdangelo是的，同样的事情发生了。我确实设置了一个断点。我返回一个视图（）；还有其他想法吗？谢谢我会推荐一个PartialView（否则你会返回一个完整的网页，而不是你感兴趣的一点点）。尝试在处理负载后显示元素$（这个）；另外，我会使用FireBug或其他HTTP检查器，这样您就可以在客户端监视您的呼叫的发出和返回，它会到达控制器。我在那里设置了一个断点，并跨过了它。它返回一个视图。但浏览器不会将新页面发回。它恢复到原始状态。我也尝试过使用httppost属性的ajax路由。同样的事情也会发生。我已经试过了。同样地，这没有多大意义。帖子不应用作GET。这消除了一些HTTP的优点，这些优点创造了内置的可伸缩性。当我设定动作的断点时。它点击actiona并返回视图。就像负载一样。下面是我用来进行ajax调用的代码。我能看到的唯一区别是URL，我没有把基放在它前面。但是我认为我的ajax调用是有效的，因为它击中了控制器和操作，dataType:'json'，contentType:'application/json，charset=utf-8'，async:false，beforeSend:function（）{}，success:function（data）{}，错误：函数（）{}）@这听起来可能是个愚蠢的问题，但是您是否正在将生成的视图推送到HTMLDOM中（您是否正在使用该视图执行任何操作？）浏览器在AJAX调用后不会自动执行任何操作，您会得到响应，然后使用它执行一些操作。