Is it possible to call onclick event on button only when certain condition is met ?

F.e.: I would like to call my onclick event if function call returns number > 0, something like: if(checkNoOfRows() > 0) //call onclickevent

Is it possible to do this inline ?

Here's my button onclick event, which I would like to call only when certain condition is fulfilled:

<button id="btnExportXLSPropsChild" onclick="location.href='@Url.Action("exportUserProp", "UserManagement", new { typeToExport = "CHILD" })'">Export</button>

Is it possible to call onclick event on button only when certain condition is met ?

F.e.: I would like to call my onclick event if function call returns number > 0, something like: if(checkNoOfRows() > 0) //call onclickevent

Is it possible to do this inline ?

Here's my button onclick event, which I would like to call only when certain condition is fulfilled:

<button id="btnExportXLSPropsChild" onclick="location.href='@Url.Action("exportUserProp", "UserManagement", new { typeToExport = "CHILD" })'">Export</button>

• javascript
• asp-mvc
• razor

• Do you want to do the check on the server or the client? – James Brierley Commented Oct 6, 2015 at 16:11
• I want to do the check on the client. – FrenkyB Commented Oct 6, 2015 at 16:18

3 Answers 3

You can do this check in razor, but the syntax is a bit messy. You need the <text> elements so that it doesn't try to parse your onclick as code on the server:

<div @if (true) { <text>onclick="test"</text>  }></div>

However, a better approach would probably be to add the url as an attribute and then bind an event in javascript with the check. Your template will then be something like:

<button id="btnExportXLSPropsChild" data-url="@Url.Action("exportUserProp", "UserManagement", new { typeToExport = "CHILD" })">Export</button>

And then in the javascript with jQuery:

$("#btnExportXLSPropsChild").on('click', function(){
    if(checkNumberOfRows() > 0){
        var url = $(this).data('url');
        window.location.href = url;
    }
}

You should remove the inline event and use an event handler instead. From the JavaScript event handler, you can check how many rows exist and conditionally run your function.

$("#btnExportXLSPropsChild").on('click', function(){
    if(checkNumberOfRows() > 0){
        //code goes here
    }
}

Jquery can do the magic for you :

$('button').click(function(){ if(condition > 0) { windown.location.href = '@Url.Action("Action","Controller")'; } });