部分視圖不會在 asp.net MVC 中使用 ms ajax 更新

Question

我有一個搜索文本框和一個按鈕。 我想在單擊按鈕時使用 ajax 在部分視圖中顯示搜索結果。 當我在局部視圖中設置斷點時，我可以看到數據，但表單上沒有顯示任何內容。

我為搜索傳遞文本值的控制器：

[HttpPost]
        public async Task<ActionResult> Index(string searchtext)
        {

            // search data and put it in Results here ...
            ViewBag.Results = Results;

            return PartialView("_SearchResults");
        }

我的 index.cshtml 查看代碼：

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@using (Html.BeginForm())
{
    <input autofocus="autofocus" class="form-control" id="SearchStr" name="SearchStr" placeholder="search" required="required" title="Search" type="search" value="">

    @Html.SubmitButton("Search", "btnSearch")

    <div id="resultsDiv">
        @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.InsertAfter, UpdateTargetId = "resultsDiv" }))
        {
            <p>hre</p>
        }
    </div>
}


@section scripts
{
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script>
        $("#btnSearch").on("click", function (e) {

            e.preventDefault();

            $.ajax({
                type: "post",
                datatype: "json",
                url: "/Home/Index",
                data: {
                    searchtext: document.getElementById("SearchStr").value
                }
            });
        });
    </script>
}

這是我的部分觀點，在 brek 點我可以看到 51 個結果..

@if (ViewBag.Results != null)
{
    foreach (var person in ViewBag.Results.Data)
    {
        <div>
            <p>
                @person.FullName
            </p>
        </div>
    }
}

我在編譯和運行時沒有錯誤，瀏覽器也沒有錯誤......

我通過這個視頻一步一步地學會了這一點：視頻

Answer 1

試試這個

    <div id="resultsDiv"> </div>
    @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.InsertAfter, UpdateTargetId = "resultsDiv" }))
    {
        <p>hre</p>
    }

resultsDiv 將在完成 ajax 調用后更新

還要確保您的 foreach 循環數據

    foreach (var person in ViewBag.Results.Data)
{
    <div>
        <p>
            @person.FullName
        </p>
    </div>
}