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
            }
        });
});

通过ajax actionlink传递javascript变量来加载局部视图

2 个答案: