如何制作返回特定View的Jquery函数？ （不局部视图）

Question

我有一个页面（客户订单视图），其中包含从数据库（客户采购订单中的产品）生成的项目列表。我想对它进行编码，以便如果用户单击某行（一个div元素），它将在不同的视图中加载，并且还根据单击的行提供数据。

换句话说，我想要一个单击事件，该事件将键值发送到控制器，并返回产品View以及带有相关数据的模型。

现在，如果我要在同一个View上执行所有操作，则可以轻松地使用ajax函数执行此操作，只需将Partial View返回到适当的元素即可。那我很熟悉。但是我想加载一个全新的视图。我该怎么做？

出于美学原因，我也不想将行变成常规链接。我宁愿使用click事件。

Answer 1

我将在每个DIV上使用HTML数据属性来存储产品ID，例如

<div class="product-row" data-productid="123">Row content here<div>

然后使用JQuery创建一个单击处理程序，将用户带到适当的页面。您可以使用Razor HTML Helper来构造URL，但是由于您不知道它们会提前单击哪个ID，因此您将不得不花一些技巧来向URL添加正确的ID：

$(document).on('click', '.product-row', function() {
    var productId = $(this).data('productid');
    var url = '@Url.Action("Details", "Product", new { Id = "productId" })';
    var url = url.replace("productId", productId);
    window.location.href = url;
});

这将拦截div上的所有点击，构建URL，并将用户带到它。