Jquery external file problem

Question

Hi

I have this script that works fine when placed in the view directly,

 
$(document).ready(function () {
    $('#btnSearch').on('click', function () {
        var strSearch = $('#Search').val()
        $.ajax({
            url: '@Url.Action("SearchAccountByNumber", "AccountDetails")',
            type: 'GET',
            contentType: 'apllication/html; charset=utf-8',
            data: { 'strAccountNumber':strSearch },
            dataType: 'html',
            success: function (result) {
                $('#dvAccountDetails').html(result)
                $('#dvAccountTransactions').empty()
            }
        })
    })
})

 

but on I move it to an external js file and reference the file in the view it doesn work, the url turn into something like this.

https://localhost:44332/AccountDetails/@Url.Action(%22SearchAccountByNumber%22,%20%22AccountDetails%22)?strAccountNumber=111-2340-908

 

thank you for your help.