How to append Ajax.ActionLink in the table body using jquery?

Question

Here is my ajax code:

<script>
$(document).ready(function () {

    $("#BtnSearch").click(function () {
        var SearchBy = $("#SearchBy").val();
        var SearchValue = $("#Search").val();
        var SetData = $("#DataSearching");
        SetData.html("");
        debugger;
        $.ajax({
            type: "POST",
            contentType: "html",
            url: "/SelectDeal/GetSearchingData?SearchBy=" + SearchBy + "&SearchValue=" + SearchValue,
            success: function (result) {
                debugger;
                if (result.length == 0) {
                    SetData.append('<tr style="color:red"><td colspan="3">No Match Data</td></tr>');
                }
                else {
                    $.each(result, function (i, item) {
                        //var clientName = item.

                        var DealDateString = item.Deal_Date;
                        var valDealDate = new Date(parseInt(DealDateString.replace(/(^.*\()|([+-].*$)/g, '')));
                        var finalDealDate = valDealDate.getMonth() + 1 + "/" + valDealDate.getDate() + "/" + valDealDate.getFullYear();

                        var ValidityDateString = item.Validity_Date;
                        var valValidityDate = new Date(parseInt(ValidityDateString.replace(/(^.*\()|([+-].*$)/g, '')));
                        var finalValidityDate = valValidityDate.getMonth() + 1 + "/" + valValidityDate.getDate() + "/" + valValidityDate.getFullYear();

                        var val = "<tr>" +
                       "<td>" + finalDealDate + "</td>" +
                       "<td>" + item.Total_Amount_Remaining + "</td>" +
                       "<td>" + item.Dealer_Name + "</td>" +
                       "<td>" + finalValidityDate + "</td>" +
                       "<td>" + item.Location + "</td>" +
                       "<td>" + item.Deal_Amount + "</td>" +
                       "<td>" +  @Ajax.ActionLink("Recieve payment", "myAction", new AjaxOptions
                           {
                               HttpMethod = "GET",
                               InsertionMode = InsertionMode.Replace,
                               UpdateTargetId = "dialog_window_id",
                           }) +  "</td>" +
                       "</tr>";

                        SetData.append(val);
                    });
                }
            },
            error: function (data) {
                alert(data);
            }
        });
    });
});
</script>

I want to append Ajax.ActionLink in the setData variable which is actually a <tbody> element. It is not working. However, If I remove @ajax.actionLink from the above code, it works perfectly fine. Is there any way I can solve this problem?

Answer 1

If you look at the view source of the page, you can see that the current code will generate code like this

 "<td>" +  <a data-ajax="true" data-ajax-method="GET"

That is invalid because it looks like we are trying to concatenate the string "<td>" to a variable starts like <a ! , hence causing the issue.

You do not need any string concatenation. Use the output rendered by your C# code(call to the Ajax.ActionLink method) inside the td.

The Ajax.ActionLink method will render markup like below where you have double quotes for the attribute values. So you should use single quotes for your string concatenation operator (to val variable)

<a data-ajax="true" data-ajax-method="GET"

This should work.

'<td>@Ajax.ActionLink("Recieve payment", "Ajax.ActionLink", new AjaxOptions
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "dialog_window_id",
    }) </td>' +