在ASP.net中使用ajax在表中搜索數據MVC

我想根據文本框中的搜索條件在表中顯示數據。我已經實現了它，但不使用Ajax，但不知道如何使用jquery調用控制器方法並更新表數據。請嘗試解決我的問題。謝謝...在ASP.net中使用ajax在表中搜索數據MVC

Index.cshtml

@model IEnumerable<MvcApplication4.Models.tbl_product> 
@{ 
    Layout = null; 
} 

    <!DOCTYPE html> 
<html> 
<head> 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script> 
    <title>Index</title> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#Button1').click(function() { 
       alert("button clicked"); 
       $.ajax({ 
        type: 'POST', 
        contentType: "application/json; charset=utf-8", 
        url: 'Home/Index', 
        data: "{'searchString':'" + document.getElementById('searchString').value + "'}", 
        async: false, 
        Success: function (response) { 
         alert("Success"); 

          window.location.reload(); 
        }, 
        error: function() { alert("error"); } 
       }); 

      }); 
     }); 
    </script> 
</head> 
<body> 
    @* @using (@Html.BeginForm("Index", "Home")) 
    {*@ 
    @Html.TextBox("searchString"); 
    <input type="button" value="filter" id="Button1" /> 
    @* }*@ 
    <table id="showData"> 
     @{Html.RenderPartial("SearchList");} 
    </table> 
</body> 
</html>

SearchList.cshtml（部分圖）

@foreach (var item in Model) 
{ 
<tr> 
<td>@item.ProductName</td> 
<td>@item.ProductId</td> 
<td>@item.ProductDesc</td> 
</tr> 
}

HomeController.cs

public class HomeController : Controller 
    { 
     // 
     // GET: /Home/ 
     ProductEntities dbentity = new ProductEntities(); 
     public ActionResult Index() 
     { 
      return View(dbentity.tbl_product.ToList()); 
     } 

     [HttpPost] 
     public ActionResult Index(string searchString) 
     { 
      var query = dbentity.tbl_product.Where(c => c.ProductName.Contains(searchString)); 
      return View(query.ToList()); 
     } 

    }

來源

2013-12-09 user2802591

你的Ajax請求應該是這樣的：

 $.ajax({ 
     url: '/<ControllerName>/<MethodName>', 
     type: "POST", 
     data: requestData, 
     contentType: "application/json;charset=utf-8", 
     success: function (data, textStatus, XMLHTTPRequest) { 

      //Success callback handling 
     }, 
     error: function (XMLHTTPRequest, textStatus, errorThrown) { 
      //Error callback handling 
     }, 
     cache: false //whether you want to cache the response or not. 
    });

來源

2013-12-09 10:23:06

我改變了上面的代碼並實現了ajax，但它不工作，表沒有更新。 – user2802591

$.ajax({ 
      url: '/ControllerName/ActionName', 
      type: "POST", 
      data: {criteria: 'criteria'}, 
      contentType: "application/json", 
      success: function (data) { 
      //Replace existing table with the new view (with the table). 
      } 
     });

//寫入沒有密鑰控制器的ControllerName。

來源

2013-12-09 10:27:10 Hadash

我做了更改，但ajax部分沒有執行，我編輯了我的上面的代碼... – user2802591

我不會給你確切的答案，而是幫助你得到它。

有兩個步驟：

首先你必須得到一定的要求正在做，響應正在得到瀏覽器。

要做到這一點，你可以

做你的方法：只留下alert("Success");，並檢查它正在運行。
好於此，使用F12打開瀏覽器的開發者控制檯（我更喜歡Chrome，但您也可以使用IE或FireFox + FireBug附加組件）。設置斷點並檢查變量值和代碼流。見tutorial for Chrome developer tools。
設置在服務器上的動作斷點，並檢查它的執行

二一旦你確定冷杉部分做工精細，用你的更迭功能，以取代在接收到的數據表中的內容響應。你可以用jQuery以幾種方式做到這一點。例如，

$('#showData').html(response);

再次，您可以執行此代碼並檢查瀏覽器中開發者控制檯的響應內容。當你開始使用JavaScript時，這會讓事情變得更加容易。（如果你的動作產生了整個表格，你可以使用jQuery的replaceWith來代替目標，而不是它的內容，不要在這種情況下使用它）。

FINAL NOTE：請刪除此代碼window.location.reload(); !!!這會使用當前URL重新加載整個頁面，所以無論您事先做了什麼，都會丟失。

來源

2013-12-09 11:30:49 JotaBe

   $.ajax({ 
        type: 'POST', 
        contentType: "application/json; charset=utf-8", 
        url: 'Home/Index', 
        data: JSON.stringify({'searchString':document.getElementById('searchString').value }), 
        async: false, 
        Success: function (response) { 
         alert("Success"); 
         //append the data in between table tbody like, 
         $('table tbody').html(response); 
         //No window.location.reload(); It will cause page reload initial data will appear in grid. 
        }, 
        error: function() { alert("error"); } 
       }); 
       return false

希望這會有所幫助。

來源

2013-12-09 11:32:44

$（'table tbody'）。html（response）; –

在ASP.net中使用ajax在表中搜索數據MVC

回答

相關問題