Question

此脚本在名为otf.js的文件内运行。下面列出的表单在共享文件夹的_layout.cshtml中运行。此脚本将在主网站页面上执行而不会出现任何问题，但任何其他页面都不会重定向用户。我确实使用fiddler2来查看ajax是否返回信息并发现它确实恢复了数据，但它不会重定向并将数据传递到主页面。

$(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-otf-target"));
            $target.replaceWith(data);


        });
        return false;
    };

    var submitAutocompleteform = function(event, ui) {
        var $input = $(this);
        $input.val(ui.item.label);
        var $form = $input.parents("form:first");
        $form.attr("action", "/home/index"); // doesn't work on other pages
        $form.submit();

    };

    var createAutocomplete = function() {
        var $input = $(this);

        var options = {
            source: $input.attr("data-otf-autocomplete"),
            autoFocus: "true",
            select:  submitAutocompleteform

        };
        $input.autocomplete(options);
    };

    var getPage = function() {
        var $a = $(this);

        var options = {
            url: $a.attr("href"),
            data: $("form").serialize(),
            type: "get"
        };

        $.ajax(options).done(function(data) {
            var target = $a.parents("div.pagedList").attr("data-otf-target");
            $(target).replaceWith(data);
        });
        return false;
    };


    $("form[data-otf-ajax='true']").submit(ajaxFormSubmit);
    $("input[data-otf-autocomplete]").each(createAutocomplete);
    $(".main-content").on("click", ".pagedList a[href]", getPage);

});

我的网站布局视图中的表单：

 <form action="@Url.Action("Index","Home")" method="get"
                    data-otf-ajax="true" data-otf-target="#restaurantList" >
                    <input type="search" name="searchTerm" data-otf-autocomplete="@Url.Action("Autocomplete","Home")"/>
                    <input type="submit" value="Search By Name" />
                </form>

自动完成功能会获取餐馆列表，但不会将我重定向回/ home / index /并保存我要查找的内容。

Answer 1

为了使这个ajax函数无缝地工作，我需要将所包含的div放在围绕JUST @RenderBody（）的主体中，如下所示：

    <div id="body">            
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            <div id="restaurantList"> 
            @RenderBody()
                </div>
        </section>
    </div>

我过去曾尝试过这个，但我的问题变成了pagedlist功能，无法正常工作。这是因为下面列出的代码：

    $.ajax(options).done(function(data) {
        var target = $a.parents("div.pagedList").attr("data-otf-target");
        $(target).replaceWith(data);
    });
    return false;
};

本质上，代码是使用属性“data-otf-target”找到div的父级并替换它。此错误仅发生在其他页面上，因为其他页面未调用部分视图来呈现餐馆列表。因此，当使用自动完成ajax并且用户单击其中一个pagedlist图标时，我需要确保正在重新创建名为“restaurantList”的div。

我通过用以下代码替换ajax代码来完成此操作：

    $.ajax(options).done(function (data) {
        var target = $a.parents("div.pagedList").attr("data-otf-target");
        $(target).replaceWith("<div id='restaurantList'>" + data + "</div>");

    });

感谢您的关注并感谢所有有用的编辑。

Ajax，我想在布局视图中使用搜索框，但是当我不在“home / index”时它会失败

1 个答案: