.NET Core Pass Variable to Javascript from C#

Question

I'm trying to pass two arguments to the Authorization.js file. It is used to search in the variables that I sent from Index.cshtml file. Here at the end of the Index.cshtml file

<script src="~/AreasFolder/Authorization/js/Authorization.js"></script>
<script type="text/javascript">
$(document).ready(function () {


    var fork = '@Html.Raw(Json.Serialize(new ImOnTech.Hukuk.Web.Repository.RoleTreeRepository(_configuration).TaskItemRolsuzGetir()))';
    sayfaGruplariArray = JSON.parse(fork);

    var exec = '@Html.Raw(Json.Serialize(new ImOnTech.Hukuk.Web.Helpers.UserHelper(_roleManager).GetRoles()))';
    rollerArray = JSON.parse(exec);
  
    $("#sayfaAraTable").toggle(false);
    $('#sayfaAraTextbox').keyup(function () {
        sayfalariFiltrele(true);
    });

    $("#sayfaGrubuAraTable").toggle(false);
    $('#sayfaGrubuAraTextbox').keyup(function () {
        sayfaGruplariniFiltrele(true);
    });
    $("#kullaniciAraTable").toggle(false);
    $('#kullaniciAraTextbox').keyup(function () {
        kullanicilariFiltrele(true);
    });
    $("#rolAraTable").toggle(false);
});

In the controller, string ItemName returns NULL from Authorization.js:

Finaly, Authorization.js file:

var sayfaGruplariArray;
var rollerArray;

function sayfalariFiltrele(isAutoComplete) {
var content = $('#sayfaAraTextbox').val();
if (content.length == 0 && isAutoComplete) {
    $("#sayfaAraTable").toggle(false);
    //$("tr:not(:first)", "#sayfaAraTable").remove();

}
else {

    //$("tr:not(:first)", "#sayfaAraTable").remove();
    $.ajax({
        url: "/Authorization/Item/SayfaAra",
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
            itemName: content
        }),
        beforeSend: function (xhr) {
            //jQuery.blockUI({ message: 'Lutfen bekleyiniz', baseZ: 2000 });
            $('#sayfaAraTextbox').addClass('textboxLoadinggif');
        },
        success: function (result) {
            if (result.ErrorCode == "0") {
                $("#sayfaAraTable").toggle(true);
                var html = "";
                var sayfalarArray = result.SayfaListesi;

                if (sayfalarArray.length > 0) {
                    html += "<tr>";
                    html += "<th>İşlem adı</th>";
                    html += "<th>Açıklama</th>";
                    html += "<th>URL</th>";
                    html += "<th>Menüde görünsün</th>";
                    html += "<th style='width:1%'></th>";
                    html += "</tr>";
                }
                for (i = 0; i < sayfalarArray.length; i++) {
                    html += "<tr id='sayfaTr" + sayfalarArray[i].AuthorizationItemKey + "'>";
                    html += "<td>" + sayfalarArray[i].ItemName + "</td>";
                    html += "<td>" + sayfalarArray[i].Description + "</td>";
                    html += "<td>" + sayfalarArray[i].MenuLinkUrl + "</td>";
                    html += "<td>" + sayfalarArray[i].DisplayInMenu + "</td>";
                    html += "<td nowrap><a href=\"javascript:SayfaBilgisiniGetir(" + sayfalarArray[i].AuthorizationItemKey + ")\"title='Güncelle'><i class='fa icon-pencil fa-2x'></i></a>&nbsp;&nbsp;<a href='javascript:SayfaSilUyari(" + sayfalarArray[i].AuthorizationItemKey + ")' title='Sil'><i class='fa icon-trash fa-2x'></i></a></td>";
                    html += "</tr>";
                }

                //$("#sayfaAraTable").append(html);
                $("#sayfaAraTable").html(html);

            }
            else {
                $("#sayfaAraTable").toggle(false);
                toastr.warning(result.Result, "Uyarı", { timeOut: 3000 });
            }
            $('#sayfaAraTextbox').removeClass('textboxLoadinggif');
        },
        failure: function (xhr, ajaxOptions, thrownError) {
            $('#sayfaAraTextbox').removeClass('textboxLoadinggif');
            $("#sayfaAraTable").toggle(false);
            toastr.error("script failure: " + xhr.responseText, "Uyarı", { timeOut: 3000 });
        },

        error: function (xhr, ajaxOptions, thrownError) {
            $('#sayfaAraTextbox').removeClass('textboxLoadinggif');
            $("#sayfaAraTable").toggle(false);
            toastr.error("script error: " + xhr.responseText, "Uyarı", { timeOut: 3000 });
        }
    });
}

}

Any idea? What cause this problem? Thank you in advance.

Answer 1

You should use [FromBody] to get the json format data. Change it like below:

$.ajax({
    //...
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(content),
    //...
})

Controller:

public ActionResult SayfaAra([FromBody]string itemName)