Pass javascript variable through ajax actionlink to load partial view

Question

I am new to MVC and JQuery.

I have created one table with JQuery but I don't know how we add one actionlink in each row, and also, I need to call one partial view on the onclick event by passing the Java script variable to the partial view.

My code is given bellow:

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

here I got one error:

val is not in the current context

I checked a lot of similar post here and I understand one part of the code is run at the server (the Url.Action part) and the val.empID is only available once the code reaches the client browser.

but I need to load one partial view on click if there is any alternate way to do this......

Satpal · Accepted Answer · 2015-08-21 12:19:39Z

1

You can't pass client-side JavaScript variable to Server Side Helper function.

As @Html.ActionLink create an anchor tag, you can create it programatically. Here's an example:

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

edited Aug 21, 2015 at 12:19

answered Aug 21, 2015 at 12:00

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

3 Comments

user3501613 Over a year ago

i need to call one partial view using that ajax link how can i do this thing.

Satpal Over a year ago

@user3501613, Add a class to anchor and bind click handler with it. updated answer

Satpal Over a year ago

@user3501613, Where you want to load it? I have already given it in answer create a div with id myDiv

Light · Accepted Answer · 2015-08-21 12:23:33Z

0

You can't pass jquery variable to server control change your

trow.append('<td>' + '@Html.ActionLink("Edit", "Edit", new { id = val.empID })' + '</td>');

To

trow.append('<td>' + '<a href='#' class='preview' data-id='+val.empId+'></a>' + '</td>');

Add class in anchor tag preview and add one attribute 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
            }
        });
});

edited Aug 21, 2015 at 12:23

answered Aug 21, 2015 at 12:02

Light

1,09710 silver badges33 bronze badges

2 Comments

user3501613 Over a year ago

i tried that code earlier but i need to load one partial view which contains one callendar, whether we can load partial view with hyperlink.

Light Over a year ago

No you can't anchor tag will redirect to that page i will update my answer in short

Collectives™ on Stack Overflow

Pass javascript variable through ajax actionlink to load partial view

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related