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 Callback

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

试试这个： 编辑测试

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

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

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

来自Jquery的MVC3 Change View

5 个答案: