Question

我们再来一次......

VS 2012 MVC 5，bootstrap 3.1.1，jQuery 2.1.0，JQuery UI结合1.10.4，MS jQuery Unobtrusive Ajax 3.1.1

我有一张表格：

<form method="get" action="@Url.Action("Catalog")" data-cs-ajax="true" data-cs-target="#productList">

你会注意到像Scot Allen的OdeToFood例子这样的数据属性...

我找到了表单，因为有人点击了我的目录中的类别链接（类别15）。所以原始的URL请求是

的/ home /目录/ 15

页面看起来像这样（它仍然非常简单）...

Initial Page load

在表单上我有一个DropDownListFor：

   @Html.DropDownListFor(m => m.Id, Model.CategoryItems, new { onchange = "$(this.form).submit();" })

当您在下拉列表中选择项目时，页面会提交。

我也有一些jQuery：

$(function () {

var ajaxFormSubmit = function () {
    var $form = $(this);

    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-cs-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
      //  var options = {};
        //$newHtml.effect("highlight");
        //$newHtml.effect("highlight", options, 500, doneEffect);
    });

    return false;
};

这是通过一些Query来解决的，这也是文档就绪函数...

$("form[data-cs-ajax='true']").submit(ajaxFormSubmit);

所以，你不喜欢你在目录中看到的内容，并继续选择一个不同的目录类别来设置@ Model.Id - 类别......

当您在javascript中的ajax调用之前中断时：

 $.ajax(options)

选项如下：

    -   options {...}   Object
    +   __proto__   {...}   Object
    data    "Id=16" String
    type    "get"   String
    url "/home/Catalog/15"  String

好的 - 所以这里很烦人的功能＆＃39; ＃1。

为什么现在没有网址/ home / Catalog / 16 ??

...冠

所以你去服务器，获取新的类别项目并通过局部视图返回...

public ActionResult Catalog(int Id = 0, int page=1)

我理解控制器动作中的新类别，因为我添加了一个黑客（我讨厌这个）：

if (Request.Params["Id"] != null)
{
   Id = int.Parse(Request.Params["Id"]); // here, Request.Params["Id"] was 16 and not the url Id 15
}

当它返回到jQUery成功回调：

       $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-cs-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        var options = {};
        $newHtml.effect("highlight", options, 500, doneEffect);
    });

它正确地查找并替换新类别中新一批项目的返回HTML。

然而......现在为了很棒的功能＆＃39; ＃2

当渲染最终网页时，所有项目现在都以某种方式隐藏... arg ...它们都被正确渲染，但注意是可见的

Highlighted area with f12 debug features in IE

所以我的问题是： -

为什么ID不更新路由值而不是仅仅保留为Request.Param？
隐藏的结果到底是什么？如何让我的物品展示？

任何帮助表示赞赏

[编辑：] - 我认为可见性是因为我的js文件以错误的顺序加载 - 我会验证。仍需要帮助，路线值不会更改为新的Id值 - 即使是在＆＃39; get＆＃39;！

Answer 1

您是否要求使用Javascript库/代码来解释设置MVC后端的路由？

真的不能那样做。浏览器不知道引用了什么类型的后端。它也可以是PHP驱动的后端，路由值完全不同。 15可以是会话cookie。或者一个子目录。你根本无法知道。

您真正想要的是网址为/Home/Catalog（没有添加任何内容）。

然而，奇怪的是@Url.Action("Catalog")在未指定时会包含任何属性。我有多个项目，我执行完全相同的任务，它只留下"/controller/method"。

我感觉页面上的某些内容正在将表单操作从正确的 URL更改为当前 URL。您可以尝试在代码中直接粘贴@Url.Action("Catalog")吗？像这样：

var options = {
    url: "@Url.Action("Catalog")", //notice the additional "quotes"!
    type: $form.attr("method"),
    data: $form.serialize()
};

假设没有修复它，我们仍然可以手动修复它。

首先：/Home/Catalog/16和/Home/Catalog?id=16相等。前者只是后者的简写符号但如果你将两者结合起来：/Home/Catalog/15?id=16，则/15会否决?id=16参数。

由于您的Ajax通话目前同时发布了两个ID，因此您继续请求ID为15的页面。这解释了您没有看到任何更改的原因。

要解决此问题，您需要做的就是确保/15没有添加到ajax网址。有一些方法可以做到这一点，有些方法比其他方法更优选：

如前所述，@Url.Action("Catalog")应该可以解决问题。尝试直接粘贴它，以防止任何恶意代码片段错误地改变页面加载和表单提交之间的表单操作。此外，如果这不起作用，请尝试对URL进行硬编码。我确信你的代码应该按照预期的方式工作，但是在这里工作可能会产生一些外部影响。
您可以手动切断最后一部分：var correctURL = wrongURL.substring(0, wrongURL.lastIndexOf('/'));。这是一种纠正它的直接方式，但如果其他一切都失败了......
还有其他方法，但它们与先前的建议相同或更具风险。

如果您找到更改过的网址的原因，请告诉我。

Ajax成功返回正确的数据，但jQuery替换屏幕'视觉'空白

1 个答案: