Kendo Ui web列表查看

我正在使用kendo ui的Listview。我沒有服務器包裝類，我正在使用免費的Web版本。Kendo Ui web列表查看

public ActionResult Index() 
     { 

      return View(); 
     } 



public ActionResult GetCandidateSearch() 
     { 
      IhrmsEntities Entity = new IhrmsEntities(); 
      List<VW_CANDBASICSEARCH> lstCandidateSearch = Entity.VW_CANDBASICSEARCH.Take(50).ToList(); 
      return Json(lstCandidateSearch,JsonRequestBehavior.AllowGet); 
     }

我index.cshtml

<div> 
@Html.Partial("~/Views/Home/PvCandidateBasicSearch.cshtml") 
</div>

我PvCandidateBasicSearch.cshtml

<div class="gridHolder" style="width: 100%"> 
    <div id="listCandidateView" class="itemDisplay"></div> 
    <div id="pager"></div> 
</div> 

<script type="text/x-kendo-tmpl" id="template"> 
    <div class="itemDisplay"> 
     <div class="text-label">${CAND_NAME} </div> 
     <div class="text-label">${CAND_LOCATION} </div> 
     <div class="text-label">${CAND_MOBILE} </div> 
     <div class="text-label">${CAND_PRE_EMAIL} </div> 
     <div class="text-label">${CAND_SKILL} </div> 
     <div class="text-label">${CAND_CITY} </div> 
     <a href="/Home/EditCandidate?id=${CAND_ID}" >Edit</a> 
     <a href="/Home/DeleteCandidate?id=${CAND_ID}" >Delete</a> 
    </div> 
</script> 






<style type="text/css"> 
    .text-label { 
     font-size: large; 
    } 



.itemDisplay { 
margin: auto; 
padding: 6px 8px; 
width:auto; 
min-width:200px; 
height: auto; 
min-height:100px; 
border: 1px solid #999999; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
font-weight: normal; 
background: #deefff; 
} 

    .gridHolder{width: 100%; height:auto; min-height:300px; margin:auto;} 
</style>

我在layout.cshtml的JavaScript代碼如下

給出：我的控制器代碼在下面給出

<script type="text/javascript"> 

    var dataSource = new kendo.data.DataSource({ 

     transport: { 
      read: { 
       url: '/Home/GetCandidateSearch', 
       type: "GET", 
       dataType: "json" 

      } 
     }, 
     pageSize: 15 

    }); 

    $("#pager").kendoPager({ 

     dataSource: dataSource 
    }); 

    $("#btnSearch").click(function() { 


     LoadListView(); 

    }); 
    function LoadListView() { 


     $("#listCandidateView").kendoListView({ 

      dataSource: dataSource, 
      pageable: true, 
      template: kendo.template($("#template").html()) 
     }); 


    } 


</script>

當我第一次點擊搜索按鈕時，它將完全轉到GetCandidateSearch操作方法並顯示結果。但是當我第二次單擊搜索按鈕時，它不會執行操作方法。 Plz幫助我。

來源

2014-01-21 amitabha

做了以下幫助？如果是這樣，請將其作爲答案 – Martin

您誤解了數據源的概念。

數據源是一個對象，用於保存從請求中收集的數據。在第二次點擊你只需把數據源重新綁定到ListView ...

基本上，你需要綁定列表視圖網頁加載，然後「點擊」數據源，做datasource.read()

試試這個：

var dataSource = new kendo.data.DataSource({ 

    transport: { 
     read: { 
      url: '/Home/GetCandidateSearch', 
      type: "GET", 
      dataType: "json" 

     } 
    }, 
    pageSize: 15 

}); 
$(document).ready(function() { 
    $("#listCandidateView").kendoListView({ 
     dataSource: dataSource, 
     pageable: true, 
     template: kendo.template($("#template").html()) 
    }); 
}); 


$("#btnSearch").click(function() { 
    $("#listCandidateView").datasource.read(); 
});

不是說確切的代碼可以工作，但它應該給你一個方法的想法。

來源

2014-01-21 13:45:03 Martin

Kendo Ui web列表查看

回答

相關問題