Call Method from View on Button click without reload - asp.net

Question

I haven't found a solution for my problem.
I am using asp.net mvc. In my View I am trying to call a Method, on a Buttonclick.
This is how the button looks like at the moment
<button type="button" id="#openButtonID" data-loading-text=" öffnen..." class="btn btn-primary" autocomplete="off" onclick="location.href='#Url.Action("Open", "Home", new {index =i} )'" disabled="#notConnected">
So every time I am clicking the button the website reloads itself.
At the website there is a camera stream which disappears for some seconds during the refresh. Now I have the task to avoid this, so the stream can been seen during the whole time. I have tried to call the method via Razor like this:
<button type="button" id="#openButtonID" data-loading-text=" öffnen..." class="btn btn-primary" autocomplete="off" onclick="#{( (GateControl.Controllers.HomeController)this.ViewContext.Controller ).Open( i );}" disabled="#notConnected">
But this just calls the Method if the view is loaded. As I tried this I set the return of the method to void.
Also I tried it like it is described like in this. Either the website is reloaded or I wasn't able to get in the method. I also tried several code snippets from stack overflow, but it wasn't working.
This is how the Method looks like
[CustomAuthorize]
public void Open( int index )
{
//some code
}

Answer 1

Since you already tried something with jQuery I suppose you use the library.
What you can do is to bind a click event to your button and inside that to make a GET ajax call.
You can use a "data-" attribute in your button to have your url generated on server and available on client.
<button id="button-id" class="btn btn-primary" data-loading-text=" öffnen..." data-url="#Url.Action("Open", "Home", new {index =i} )" disabled="#notConnected" autocomplete="off">
This should do it:
$("#button-id").click(function(){
var url = $("#button-id").data("url");
$.get(url , function(result) {
//do something with the result if you ever need to
});
});
This way you won't get the page refresh. You could also give us a little more details about that server method and what it does, maybe it needs some changes also.

Answer 2

Here is the full code I am using
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<button type="button" id="#openButtonID" data-loading-text=" öffnen..." class="btn btn-primary" autocomplete="off" data-url="#Url.Action("Open", "Home" , new {index=i+1} )" disabled="#notConnected">
Öffnen
</button><br /><br />
<script type="text/jscript">
$("##openButtonID").click(function () {
var url = $("##openButtonID").data("url");
$.get(url, function (result) {
//do something with the result if you ever need to
});
});
</script>