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

Question

我是MVC和JQuery的新手。

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

我的代碼如下所示：

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不在當前上下文中

我在這里檢查了很多類似的帖子，並且我了解代碼的一部分在服務器上運行（ 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
            }
        });
});