Javascript – Html.ActionLink onclick JavaScript function is not invoked and name of function is corrupted in output HTML

asp.net-mvchtmljavascriptrazor

I looked at other question: how to call javascript function in html.actionlink in asp.net mvc? showing how to add onclick to @Html.ActionLink but in my case function I assigned to onclick is never invoked.

I tried these action links:

<p>@Html.ActionLink("Call number", "Call", new { id = Model.Id, number = Model.CellNumber, onclick = "javascript:alert(a);" }, new { @class = "btn btn-default" })</p>
<p> @Html.ActionLink("Call number ยป", "Call", new { id = Model.Id, number = Model.SecondaryPhoneNumber, onclick = "javascript:Call();" }, new { @class = "btn btn-default" })</p>

and the function looks like:

<script>
    function Call(){
        alert("BLA");
    }
</script>

but no alert is shown in both cases(first and second button). Besides that action link wroks.

Question: What I did wrong?

EDIT:

Action links in html look like that and the look corrupted:onclick=Call%28%29%3B

<p><a class="btn btn-default" href="/Person/Call/7?number=113-456-789&amp;onclick=alert%28a%29%3B">Call Cell Phone</a></p>
<p> <a class="btn btn-default" href="/Person/Call/7?number=98873213&amp;onclick=Call%28%29%3B">Call Client&#39;s Secondary Number &#187;</a></p>

and the function looks like it should:

<script>
    function Call(){
        alert("BLA");
    }    
</script>

Best Answer

You add onclick handler in wrong place. You must put it in Html Attributes block instead Route values. Try it:

<p>@Html.ActionLink("Call number", "Call", new { id = Model.Id, number = Model.CellNumber }, new { @class = "btn btn-default", onclick = "alert('a');" })</p>
Related Topic