Как вызвать метод контроллера в Javascript

Question

Добрый день

У меня есть эта javascript функция ниже, которая заполняет proposalwaitingapproval, все загружается нормально, но проблема в том, когда я нажимаю кнопку редактирования:

  cell += '<a href="@Url.Action("Create", "Home", new { id = proposal.Id })" class="btn btn-link" style="text-decoration:none">';
            cell += '<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit';
            cell += '</a>';

Когда я нажимаю кнопку редактирования, это не вызывает mothod из контроллера, вот результат URL: http://localhost:61759/@Url.Action(

function PopulateProposalWaitinApprovalTable() {

var table = $('#tblProposalsAwaitingApproval');
abp.ui.setBusy(table);
_proposalService.getWaitingApprovalProposals(true).done(function (data) {

    var receivedData = data;
    var htmlString = '';
    for (var element in data.items) {
        if (data.items.hasOwnProperty(element)) {
            var recievedData = data.items[element];


            var row = '<tr>';
            var cell = '<td style="vertical-align: middle">'+recievedData.id+'</td>';
            cell += '<td style="vertical-align: middle">' + recievedData.application +'</td>';
            cell += '<td style="vertical-align: middle">' + recievedData.dealName + '</td>';
            cell += '<td style="vertical-align: middle">' + recievedData.dealCompanyName + '</td>';
            cell += '<td style="vertical-align: middle">' + recievedData.contactFullName + '</td>';
            cell += '<td style="vertical-align: middle">' + recievedData.creationDate + '</td>';
            cell += '<td style="vertical-align: middle">' + recievedData.lastUpdatedDate + '</td>';
            cell += '<td>';
            if (!recievedData.isApproved)
            {
                cell += '<a href="@Url.Action("Create", "Home", new { id = recievedData.id })" class="btn btn-link" style="text-decoration:none">';
                cell += '<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit';
                cell += '</a>';
            }
            else
            {             
                //@*<button type="button" class="btn btn-link" id="btnCreateRevision" data-toggle="modal" data-target="#RevisionModal" data-content=@proposal.Id><i class="fa fa-clone" aria-hidden="true"></i> @L("CreateRevision")</button>*@
            }
        cell += '</td>';
        row += cell + '</tr>';

        htmlString += row;
        }

        $('#tblProposalsAwaitingApproval > tbody').append(htmlString);
    }
}).always(function () {
    abp.ui.clearBusy(table);
});

}

Answer 1

Вы не можете использовать синтаксис Razor в Javascript, как это. Помните, что Razor - это всего лишь хороший способ вывести некоторый HTML, который разрешается MVC до того, как он отобразит страницу. Javascript запускается после рендеринга страницы, и поэтому любой Razor, который вы вставляете на страницу, не будет обработан.

У вас есть два варианта здесь. Либо жестко закодируйте URL в Javascript, как показал Chaminda, либо укажите на своей странице скрытый элемент, из которого вы можете прочитать значение следующим образом:

@Html.Hidden("homeUrl", Url.Action("Create", "Home"))

Тогда в вашем Javascript вы можете прочитать значение со страницы:

 cell += '<a href="' + $('#homeUrl').val() + '?id=' + recievedData.id + '" class="btn btn-link" style="text-decoration:none">';
            cell += '<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit';
            cell += '</a>';

Answer 2

Так и должно быть. проблема это выполняется на стороне клиента

cell += '<a href="Home/Create/id=recievedData.id" class="btn btn-link" style="text- 
decoration:none">';
        cell += '<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit';
        cell += '</a>';