2017-12-02 262 views
0

我想從ASP.NET Core 2.0中的Razor頁面獲取一些數據。無法在Razor頁面中使用ajax獲取json數據

但問題是它不返回任何數據。 我也嘗試調試它,它根本不會觸發該方法(OnGetProducts)。

模型Index.cshtml.cs:

private IProductRepository _productRepository; 

    public IndexModel(IProductRepository repository) 
    { 
     _productRepository = repository; 
    } 

    public void OnGet() 
    { 

    } 

    public IActionResult OnGetProducts(int page) 
    { 
     var model = _productRepository.GetProducts().Skip(page * 10).Take(10); 

     return new JsonResult(model); 
    } 

剃刀頁面Index.cshtml

<div id="products"> 
</div> 

@section scripts{ 

<script> 
    $(function() { 
     getProducts(0); 

    }); 


    var isInitialized = false; 

    function getProducts(page) { 
     $.ajax({ 
      type: 'GET', 
      url: "Products", 
      contentType: "application/json", 
      dataType: "json", 
      data: { 
       handler: 'Products', 
       page: page 
      }, 
      success: function (datas) { 
       console.log(datas); 
      } 
     }); 
    } 
</script> 

} 

附:此頁面位於文件夾Pages/Products/Index.cshtml(.cs)

+1

我的第一本能,如果我試圖調試一個失敗的ajax調用將設置錯誤回調,看看它是什麼告訴我出錯了...... –

+0

也在您的瀏覽器中點擊F12,並看看網絡選項卡+控制檯。 – CalC

+0

我問了一個類似的問題,並最終得到它的工作(請參閱prev評論),但決定爲AJAX調用創建Web API控制器是更簡單和更好的方法。 –

回答

0

我通常使用razor函數來生成URL,而不是在js中對其進行硬編碼。如果您的操作沒有被觸發,假設您並非意外地處於發佈模式,這是因爲該URL沒有指向正確的位置。首先設定JS在剃刀像這樣的變量:

var productsURL = @Url.Context("~/products"); 

而且運行YOURDOMAIN /產品在您的瀏覽器,如果你得到一個404

或者我用這個功能來直接使用JS C#對象:

public static IHtmlContent ToJS(this IHtmlHelper htmlHelper, object obj) 
    => htmlHelper.Raw(JsonConvert.SerializeObject(obj)); 

有了一個靜態類創造了這個功能,你還可以創建一個js對象直接是這樣的:

<script> 
    var products = @Html.ToJS(repository.GetProducts().Skip(page * 10).Take(10)); 
</script> 

當然這隻會在頁面加載時創建對象,如果你想在頁面加載後改變它,你可以考慮通過ajax創建一個局部視圖。另請注意,第二種方法比ajax的第一種方法要慢。