返回查詢結果時將頁面加載到包含mysql查詢代碼的div中

Question

我有一個用作搜索功能的mySQL數據庫。 用戶輸入查詢，並加載搜索結果。 我的html看起來像：

<div class="col-md-2" style="text-align:left; background-color: #c6bcb9;">
            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()

                <fieldset style="border:0;">
                    <div class="name-field">
                        <div class="form-group"><br />
                           <div style="color: gray; font-size: 18px;">@Html.LabelFor(model => model.name, "Search Project Assistant:", htmlAttributes: new { @class = "control-label" }) </div><br />
                            @*<div class="col-md-10">*@
                                @Html.TextBoxFor(model => model.name, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.name, "", new { @class = "text-danger" })
                            @*</div>*@
                        </div>
                    </div>
                    <input type="submit" value="Search Tool"/>
                </fieldset><br />
            }
            @*Following the structure of cipt*@
            @if (ViewBag.PROJ != null)
            {
                <h4 style="color:black;">Search Results</h4>
                foreach (var item in ViewBag.PROJ)
                {
                    <a href="@item.url"> @item.name</a><br />
                }

我的控制器看起來像：

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Training([Bind(Include = "name")] searchlinks searchlinks)
        {
            var q = from obj in db.searchlinks
                    where obj.name.Contains(searchlinks.name)
                    orderby obj.name
                    select new SearchResultsViewModel()
                    { name = obj.name, url = obj.url };
            ViewBag.PROJ = q;

            return View();

加載我的結果時，頁面將加載到頁面頂部。 我想保持頁面的位置，或者如果必須重新加載，可以通過移至包含搜索工具的div來保持。（它所在的列位於id為“ projectassistant”的行內“我不確定該怎么做。任何見解將不勝感激。謝謝！！！

Answer 1

只需創建一個局部視圖 ，然后使用Ajax異步加載更改

這是一個例子 。 還有其他與MVC相關的主題，只需觀看播放列表即可。 我從那里學到了很多；）

Answer 2

創建一個局部視圖，將此移植復制到局部視圖中

 @if (ViewBag.PROJ != null)
        {
            <h4 style="color:black;">Search Results</h4>
            foreach (var item in ViewBag.PROJ)
            {
                <a href="@item.url"> @item.name</a><br />
            }
        }

在您的主視圖中（您需要在其中加載局部視圖）。

<div id="loadpartialview"></div>

您的控制器必須返回部分視圖。

return PartialView(data);

現在寫一個ajax

$("#SearchBtn").click(function () {
       path =  "/controller/Actionmethod";
        $.ajax({
        type: "GET",
        url: path,
        success: function (dataval) {
            $('#loadpartialview').html(dataval);
        }
    });
} else {
    alert("Field Empty");
}
});

希望這會有所幫助。