部分视图不使用异步请求进行更新 [英] Partial view not rendering with asynch request for update

问题描述

是在我的一个异步调用中jquery文件（ otf.js ）在我的主页（ index.cshtml ）中更新我的餐馆列表，并在筛选餐馆结果的表单中输入搜索字词。 otf.js 在一个包中，并在布局视图中呈现。

is to make an asynchronous call in my jquery file(otf.js) that updates my restaurant list in my home page (index.cshtml) with a Search term entered in the form that filters the restaurant results. otf.js is in a bundle, and is rendered in the layout view.

是我输入一个搜索词并提交我的表单，并且列表按预期更新，但是当输入新搜索字词并点击提交，列表不会更改。每当我输入一个新的搜索结果并且点击提交时，它都需要改变。

is that I enter a search term and submit my form, and the list updates as expected, but when entering a new search term and clicking submit, the list does not change. It needs to change every time I enter a new search result and click submit.

$(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);
});

---

index.cshtml

---

---

index.cshtml

---

@model IEnumerable<OdeToFood.Models.RestaurantListViewModel>

@{
    ViewBag.Title = "Home Page";
}
<hr />

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

<div id="restaurantList">
    @Html.Partial("_Restaurants", Model)
</div>

---

_Restaurants.cshtml（局部视图） h2>

---

---

_Restaurants.cshtml (a partial view)

---

@model IEnumerable<OdeToFood.Models.RestaurantListViewModel>

   @foreach (var item in Model)
    {
        <div>
            <h4>@item.Name</h4>
            <div>
                @item.City, @item.Country

            </div>
            <div>
                Reviews: @item.CountOfReviews

            </div>
            <hr />

        </div>
    }

推荐答案

问题在于< div id =restaurantList> 包装在 @ Html.Partial（_ Restaurants，Model） line在 index.cshtml 中，它需要包装在局部视图 _Restaurants.cshtml @foreach 代码块中>

The problem is that <div id="restaurantList"> is wrapping around the @Html.Partial("_Restaurants", Model) line in index.cshtml, and it needs to be wrapped around the @foreach code block in the partial view _Restaurants.cshtml

我对这段代码做了这个修改，而且每次点击搜索按钮时餐厅列表都会更新，而不仅仅是第一次。

I made this change to my code, and presto, the restaurant list was updated every time i clicked the search button, not just the first time.

现在唯一的问题是为什么这会导致列表在第一次之后不更新？

Now the only question is why does this cause the list not to update after the first time?

这篇关于部分视图不使用异步请求进行更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！