Loading page to div containing mysql query code when results of query are returned

Question

I have a mySQL database I am using as a search function. The user inputs a query, and the search results are loaded. My html looks like:

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

My controller looks like:

        [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();

When my results load, the page loads to the top of the page. I would like to maintain the position of the page, or if it has to reload, have it do so by moving to the div that the search tool is contained in. (The column it is in is within a row with the id "projectassistant" I am unsure how to go about doing so. Any insight would be very appreciated. Thank you!!!

Answer 1

Just create a partial view , and use Ajax to load the changes asynchronic

Here is an example . Have other topics related to MVC, just watch the playlist. I learn a lot from there ;)

Answer 2

Create a partial View copy this porting into the partial 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 />
            }
        }

In Your main view (where you need to load the partial view).

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

Your controller must return partial view.

return PartialView(data);

Now write an ajax

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

Hope this will help.