クエリの結果が返されたときにmysqlクエリコードを含むdivにページをロード

Question

私は検索機能として使用しているmySQLデータベースを持っています。ユーザがクエリを入力し、検索結果がロードされる。

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

私のコントローラは次のようになります： 私のHTMLは次のようになります

 [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

部分ビューを作成すると、このポーティングを部分ビデオにコピーします。 w

@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（部分表示をロードする必要がある）。

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

コントローラは部分表示を返す必要があります。

return PartialView(data); 

今これは役立つ

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

希望AJAXを書きます。

Answer 2

ちょうどここexampleがあるpartial viewを作成し、

asynchronic変更をロードするためにAjaxを使用しています。 MVCに関連する他のトピックがあります。再生リストを見るだけです。）