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.

please check the updated question.. I've paste my view code

Krunal Patil
– Krunal Patil

2013-11-29 12:44:33 +00:00
Commented Nov 29, 2013 at 12:44 — Krunal Patil
– Krunal Patil, Commented Nov 29, 2013 at 12:44

Satpal · Accepted Answer · 2013-11-29 12:49:49Z

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>";

answered Nov 29, 2013 at 12:49

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Krunal Patil Over a year ago

It did work for me. I appreciate your quick response. Thank you.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related