創建一個與JavaScript函數一起使用的ActionLink

Question

我有一個數據表，在該數據表上我設置了一個Html.ActionLink。當我點擊該動作鏈接時，我想將該項目的id發送給javascript函數，並在下面顯示一個新的數據表格，其中包含屬於上述數據表中所選項目的所有內容。例如，如果我在表格中單擊學生姓名，我希望所有學生成績和考試出現在單獨的數據表中。我從來沒有使用JavaScript很多，所以我不知道我怎麼能做到這一點。如果有人可以請指向正確的方向或給我一些提示，我會很感激。

原第一數據表：

@foreach (var item in ((List<Epic>) ViewData["selectedestimate"])) 
{ 
    <tr> 
     <td> 
      @* @Html.ActionLink(@item.Name, "action", "controller", new {id = item})*@ 

      <a href="#" onclick="StoryClick(@item.Id);">@item.Name</a> 
     </td> 

的Javascript調用：

<script type="text/javascript"> 
function StoryClick(story) { 
    $.get("@Url.Action("action", "controller")", function (response) { 
     $('#stories').accordion({ collapsible: true }); 
    }); 
} 
</script> 

的ActionController：

public List<EpicDetails> getEpicDetails(int id) 
{ 
    return eRepository.getItemsById(id).tolist(); 
} 

或者我需要一個ActionResult？

public Actionresult Details(int id) 
{ 

} 

我意識到，我現在甚至還沒有接近，但它只是B/C我不知道採取什麼步驟來做到這一點。最終我會做一個手風琴，並把手錶放在手風琴裏。

Answer 1

在這種情況下，我喜歡實際上保持<a>ActionLink生成，只需添加JavaScript來增強鏈接的行爲。所以，你的觀點就不會真正改變（我添加了類，使我們可以在以後的事件處理程序綁定到它）：

@Html.ActionLink(@item.Name, "action", "controller", new {id = item, @class = "item-link" }) 

然後寫一些jQuery的（它看起來像你已經擁有jQuery的依賴。如果沒有，我可以修改答案使用JavaScript的香草）到事件處理程序的鏈接綁定item-link類：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a.item-link").click(function (event) { 
      event.preventDefault(); // Stop the browser from redirecting as it normally would 
      $.get(this.href, function (response) { 
       // Do whatever you want with the data. 
      }); 
     }); 
    }); 
</script> 

而且，是的，在控制器的操作方法應該返回一個ActionResult。我很難說什麼類型的ActionResult不知道你應該在客戶端上消費什麼類型的數據，但是如果你想在頁面上注入HTML，你可以這樣寫：

public ActionResult Details(int id) 
{ 
    var itemDetails = /* Get details about the item */; 
    return PartialView("Details", itemDetails); 
} 

然後，在JavaScript你可以這樣寫：

$("a.item-link").click(function (event) { 
    event.preventDefault(); // Stop the browser from redirecting as it normally would 
    $.get(this.href, function (response) { 
     $("element_to_populate").html(response); 
    }); 
}); 

凡element_to_populate將指向要注入HTML選擇。

Answer 2

我強烈建議在客戶端使用JavaScript模板（我更喜歡handlebars.js）並將您的學生數據作爲JsonResult返回。這將使您的帶寬使用率降至最低。

但是，因爲你看上去更舒服的剃鬚刀，你可以使用你所有的模板，從您的控制器/視圖返回純HTML，然後使用這個JavaScript代替

<script type="text/javascript"> 
$(function() { 
    $("a.item-link").click(function (event) { 
     event.preventDefault(); // Stop the browser from redirecting as it normally would 
     $("#gradesContainer").load(this.href, function (response) { 
      //Do whatever you want, but load will already have filled up 
      //#gradesContainer with the html returned from your grades view 
     }); 
    }); 
}); 
</script> 

在您的主頁上，學生列表的下方，你只需要添加

<div id="gradesContainer"></div> 

你的其他控制器是這樣

public ActionResult TestGrades(int id) { 
    var model = getTestGradesModel(id); 
    return View(model); 
} 

如果你的客戶端返回JSON的JavaScript模板它看起來像

public ActionResult TestGrades(int id) { 
    var model = getTestGradesModel(id); 
    return new JsonResult() {Data = model}; //no view here! 
}