从jquery渲染部分视图不起作用

本文关键字:视图 不起作用 染部 jquery | 更新日期: 2023-09-27 18:21:03

我在使用jquery呈现部分视图时遇到了一些问题。即使不止一次(在这里)被问到,我也没有找到对我有效的解决方案:我的观点:

@model IEnumerable<OdeToFood.Models.RestaurantListViewModel>
@{
    ViewBag.Title = "Home Page";
}
<form method="get" action="@Url.Action("Index")" data-otf-ajax="true" data-otf-target="#restaurantlist">
    <input type="search" name="searchTerm" />
    <input type="submit" value="Search By Name" />
</form>
@Html.Partial("_Restaurants", Model)

我的部分观点:

@model IEnumerable<OdeToFood.Models.RestaurantListViewModel>
<div id="restaurantList">
    @foreach (var item in Model)
    {
        <div>
            <h4>@item.Name</h4>
            <div>@item.City, @item.Country</div>
            <div>REviews: @item.CountOfReviews</div>
            <hr />
        </div>
    }
</div>

otf.js:

$(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;
    };
    $("form[data-otf-ajax='true']").submit(ajaxFormSubmit);
});

我的控制器的索引操作:

 public ActionResult Index(string searchTerm = null)
        {
            var model =
                _db.Restaurants
                .OrderByDescending(r => r.RestaurantReviews.Average(a => a.Rating))                
                .Where(r => searchTerm == null || r.Name.StartsWith(searchTerm))
                .Select(r => new RestaurantListViewModel
                {
                    Id = r.Id,
                    Name = r.Name,
                    City = r.City,
                    Country = r.Country,
                    CountOfReviews = r.RestaurantReviews.Count()
                }
                )
                .Take(10);
            if (Request.IsAjaxRequest())
            {
                return PartialView("_Restaurants", model);
            }
            return View(model);
        }

我的问题是,当我按下搜索按钮时,什么都不会发生。我添加了一个测试警报,如:

$.ajax(options).done(function (data) {
            var $target = $($form.attr("data-otf-target"));
            alert('test');
            $target.replaceWith(data);
        });

当我点击搜索按钮时,就会显示警报,但在网站上什么也没发生。有人知道我的问题是什么吗?

从jquery渲染部分视图不起作用

您将#restaurantlist作为目标,而div id实际上是restaurantList。大写"L"。