返回查询结果时将页面加载到包含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");
}
});

希望这会有所帮助。