基於查詢過濾數據並使用部分視圖返回結果

我想基於查詢過濾數據。我正在使用局部視圖來顯示過濾的數據。但是，在局部視圖中沒有更新。我怎樣才能解決這個問題？基於查詢過濾數據並使用部分視圖返回結果

控制器類：

public IActionResult Index() { 
    IEnumerable<Organisation> organisations = _organisationRepository.GetAll().OrderBy(b => b.Name).ToList(); 

    if (isAjaxRequest()) { 
     string text = Request.Form["text"].ToString(); 
     return PartialView("_Organisations", _organisationRepository.GetByName(text).ToList()); 
     } 

     return View(organisations); 
    } 

private bool isAjaxRequest() { 
     return Request != null && Request.Headers["X-Requested-With"] == "XMLHttpRequest"; 
    }

組織視圖：

<form asp-controller="Organisation" asp-action="Index"> 
<div class="form-inline"> 
    <div class="form-group"> 

     <label for="text">Filteren in organisaties</label> 
     <input type="text" name="text" id="text" required pattern="^([0-9]{4}|[a-zA-Z]+)$"> 

     <label for="selected"></label> 
     <select name="selected" id="selected" class="form-control"> 
      <option value="name">Naam</option> 
      <option value="postalcode">Postcode</option> 
     </select> 
    </div> 

    <button type="submit" class="btn btn-default" id="search">Zoeken</button> 
</div> 
</form> 

<div id="partial"> 
    @Html.Partial("_Organisations", Model); 
</div>

局部視圖：

<table class="table table-striped table-condensed table-bordered"> 
<tr> 
    <th>Naam</th> 
    <th>Adres</th> 
    <th></th> 
</tr> 

@foreach (var item in Model) { 
    <tr> 
     <td> 
      @item.Name 
     </td> 
     <td> 
      @item.Location.ToString() 
     </td> 
     <td> 
      <a onClick="showForm(this, @item.OrganisationId)" href="#">Selecteer</a> 
     </td> 
    </tr> 
}

JavaScript文件：

$("#search").click(function() { 
    $.ajax({ 
    url: "Organisation/Index", 
    type: "post", 
    data: $("form").serialize(), 
    success: function (result) { 
     $("#partial").html(result); 
     } 
    }); 
});

任何幫助，將不勝感激！

來源

2017-02-20 dddroog

第一個答案（不正確）：如果不是拼寫錯誤，你忘了$ jquery $("#search").click(function() {。

新回答：我想這裏是bug：你必須防止點擊事件的正常行爲。改變你的javascript函數（2次修改）：

 $("#search").click(function (e) { 

      e.preventDefault(); 

      $.ajax({ 
       url: "Organisation/Index", 
       type: "post", 
       data: $("form").serialize(), 
       success: function (result) { 
        $("#partial").html(result); 
       } 
      }); 
     });

現在的功能參數以E（事件），我們使Ajax調用之前，我們需要調用e.preventDefault();的錯誤是，Ajax調用返回的局部來看，#partial HTML進行了更新，但之後的正常行爲「點擊」將重新加載頁面用HTTP GET請求

來源

2017-02-20 20:36:51

這是一個錯字！感謝讓我知道我改變了它的問題！ – dddroog

好的。代碼中必須存在另一個我們看不到的小錯誤。你有沒有試圖檢查每一個電話？ 1.在阿賈克斯$呼叫 2.將斷點在索引操作控制器的門口放一個斷點在JavaScript（在調試Visual Studio中運行） 3.將partialview結果在一個變量之前返回它，把一個斷點，以確保您從視圖 4.把第二個斷點在Javascript中獲得的東西，在成功的功能這是一個良好的開端。告訴我們是否達到了哪個斷點 –

好，所以前兩個斷點已經達到。我繼續調試時發現了一些奇怪的東西。當我在html輸入框中沒有輸入任何文本時，控制器中的變量文本是空的，它返回一個包含所有包含「空」字符串的元素的局部視圖，在我的例子中就是所有元素。奇怪的是，當我在html輸入框中輸入文本時，控制器返回視圖（組織），然後返回部分視圖，但在頁面上沒有任何視覺變化。 – dddroog

基於查詢過濾數據並使用部分視圖返回結果

回答

相關問題