通過ajax actionlink傳遞javascript變量來加載部分視圖

Question

我是MVC和JQuery的新手。

我已創建了一個表，JQuery的，但我不知道我們如何添加的每個列中，actionlink，而且，我需要由Java腳本變量傳遞到局部視圖呼籲onclick事件一個局部視圖。

我的代碼是波紋管式給出：

function loadData(data) { 

     var tab = $('<table class="myTable"></table>'); 
     var thead = $('<thead></thead>'); 
     thead.append('<th>Id</th><th></th>'); 
     thead.append('<th>Username</th>'); 



     tab.append(thead); 
     $.each(data, function (i, val) { 

      var trow = $('<tr></tr>'); 
      trow.append('<td>' + val.empID + '</td>'); 
      trow.append('<td>' +"" + '</td>'); 
      trow.append('<td>' + val.empName + '</td>'); 
      trow.append('<td>' + '@Html.ActionLink("Edit", "Edit", new { id = val.empID })' + '</td>'); 


      tab.append(trow); 
     }); 

在這裏我得到了一個錯誤：

val is not in the current context

我查了很多類似的帖子在這裏，我理解的代碼的一部分運行在服務器（Url.Action部分）和val.empID僅在代碼到達客戶端瀏覽器時纔可用。

，但我需要的，如果沒有做到這一點任何替代方式來加載上點擊一個局部視圖......

Answer 1

可以客戶端無法通過JavaScript變量服務器端助手功能。

由於@Html.ActionLink創建了一個錨標籤，您可以通過編程方式創建它。這裏有一個例子：

function loadData(data) { 

    $.each(data, function(i, val) { 
     //Create Static URL and use -1 as placeholder 
     var url = '@Url.Action("actionName", "controllerName", new { id = -1 })'; 

     //replace the place holder with the value which you want 
     url = url.replace('-1', val.empID); 

     //Generate the anchor 
     var anchor = '<a class="myClass" href="' + url + '">Edit</a>' 

     //Append anchor 
     trow.append('<td>' + anchor + '</td>'); 


     tab.append(trow); 
    }); 

} 

$(document).on('click', '.myClass', function(evt) { 
    evt.preventDefault(); 

    //Code to load your partial view 
    $('#myDiv').load(this.href); 
}); 

Answer 2

你不可錯過的jQuery變量服務器控件更改

trow.append('<td>' + '@Html.ActionLink("Edit", "Edit", new { id = val.empID })' + '</td>'); 

要

trow.append('<td>' + '<a href='#' class='preview' data-id='+val.empId+'></a>' + '</td>'); 

添加類錨標記preview，並添加一個屬性data-id

$('#tbId').on("click", ".preview", function (e) { 
     e.preventDefault(); 
     var id = $(this).attr("data-id"); 
     var url = '@Url.Action("Edit", "Edit")' + '/' + id; 
     $.get(url, function (data) { 
      if (data != "") { 
       $('.preview-body').html(data); // it is my modal 
       $('#myModal').modal("show"); // show preview in my modalbox 
      } 
     }); 
});