javascript - 返回查询结果时加载包含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 />
                }

我的 Controller 看起来像:

        [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

创建一个局部 View ，将此移植复制到局部 View 中

 @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 />
            }
        }

在您的主视图中(您需要加载部分 View 的位置)。

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

您的 Controller 必须返回部分 View 。

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");
}
});

希望这会有所帮助。