在 MVC4 中的 Jquery 中将 Json 数据发送到 @Html.Actionlink()

Question

我在 jquery 的帮助下将 html 表与 json 数据绑定。我已经成功地做到了。 还希望通过 jquery 将 actionlink 绑定到表中，并传递来自 Json Data 的 Id。 但出现错误。

我也通过这篇文章搜索过 Embed Html.ActionLink in Javascript in Razor

如果我将静态 Id 传递给操作链接，本文中的答案将起作用。但是对于来自 Json 数据的 id 会给出错误。

下面是我的代码。

@{
    ViewBag.Title = "DeviceManagement";
}
<div class="acc-container" style="width:950px;">
        <fieldset>
            <br />
            <div class="container_12_840">
                <div class="grid_2" style="width: 230px;">Device Registered To</div>
                <div class="grid_3">
                    @Html.DropDownListFor(model => model.PersonId, Model.DeviceOwner, "-- Select Owner --",  new { id = "OwnerDrp" })
                </div>
                <div class="linebreak"></div>
                <br />
                    <div style="clear: both;">
                        <div id="search-form">
                            <table cellpadding="0" cellspacing="0" width="100%" id="table111">
                                <tbody>
                                    <tr>
                                        <th>Device Number</th>
                                        <th>Serial Number</th>
                                        <th>Type</th>
                                        <th>Owner</th>
                                        <th>Active</th>
                                        <th>Created</th>
                                        <th>Actions</th>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                <div class="rowspace"></div>
            </div>
        </fieldset>
    </div>

        <script>
                $(document).ready(function () {
                    $('#OwnerDrp').change(function () {
                        var id = $(this).val();
                        $.getJSON("/Device/GetModuelOwnerDevice", { Id: id },
                        function (data) {
                            $.each(data, function (i, obj) {
                       // this will work with static id
                               var setting = '@Html.ActionLink("Settings", "DeviceSetting", new { id = 1})';

                       // this will not work and give error saying "obj" not in scope
                               var setting = '@Html.ActionLink("Settings", "DeviceSetting", new { id = obj.DeviceInfoId})';

                                var html = "<tr><td style='text-align: center;'>" + obj.DeviceNumber + "</td>";
                                html += "<td style='text-align: center;'>" + obj.SerialNumber + "</td>";
                                html += "<td style='text-align: center;'>" + obj.Name + "</td>";
                                html += "<td style='text-align: center;'>" + obj.FirstName + "</td>";
                                html += "<td style='text-align: center;'>" + obj.Active + "</td>";
                                html += "<td style='text-align: center;'>" + obj.DateCreated + "</td>";
                                html += "<td style='text-align: center;'>" + setting + "</td>";
                                $("#table111 tr:last").after(html);
                            });
                        });
                    });

                });

            </script>

我们将不胜感激。

Answer 1

您不能将 JavaScript 变量传递给 Html.ActionLink。

Html.ActionLink 函数将呈现一个锚标记。我建议您手动渲染一个锚点并设置类似的值

var url = '@Url.Action("DeviceSetting", "Controller", new { id = 1})';
url = url.replace("1", obj.DeviceInfoId)

添加类似的链接

html += "<td style='text-align: center;'><a href='"+ url + "'>Settings</a></td>";