Sending Json data to @Html.Actionlink() in Jquery in MVC4

Question

I'm binding html table with json data with the help of jquery. And I've successful done that. Also want to bind actionlink through jquery into the table with passing an Id coming from Json Data. But getting error.

I've searched for it also gone through this article Embed Html.ActionLink in Javascript in Razor

The answer in this article is working if I pass static Id to the actionlink. But gives error for id coming from Json data.

below is my code.

@{
    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>

Help will be appreciated.

Answer 1

You can't pass JavaScript variable to Html.ActionLink.

Html.ActionLink function will render an anchor tag. I would suggest you to render an an anchor manually and set is value like

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

Add link like

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