ASP.NET MVC 5 Button Event

Question

I want to add some functionality to a button I made using the following html code:

    <div>
        <p style="display: inline">
            Strength:&thinsp; <b>@str</b>
        </p>
    </div>
        <input class="btn btn-default" type="submit" value="Add Strength" onclick="addValue('str');"/>

When I click this button, I want to change a value I stored with Razor;

@{
    int str = 5;
}

I've Googled a bit, read the documentation but I can't find anything, which works.
I made a javascript function which I called on onclick, but when I was debugging the code didn't get inside the scope of said function. Here's the function:

function addValue(kind) {
    if (ran == 0) { initialize(); }
    if (left != 0) {
        left--;
        if (kind == "str") {
            str++;
        } else if (kind == "dex") {
            dex++;
        } else if (kind == "intl") {
            intl++;
        }
    }
}

If anyone can explain to me how I can get some kind of function on my button I'd appreciate it.

you can do it with jquery since there is no server side required here unless u want to get the value from database — Masoud Andalibi
– Masoud Andalibi, Commented May 8, 2017 at 12:41
You cant increment variables stored in Razor/C# using Javascript - Unless you call your backend. — Webbanditten
– Webbanditten, Commented May 8, 2017 at 12:42
Added javascript function, @Valkyriee how would I go about doing this with jQuery? — Blapple
– Blapple, Commented May 8, 2017 at 12:43
It is important to understand how ASP.NET MVC works to better grasp your question here. A browser sends an HTTP request to the server. This request is intercepted by the runtime, and some controller action executes eventually returning HTML to the client browser. Once reached the client browser, there's no longer any notion of Razor or server variables or any ASP.NET MVC. Everything is gone. All that's left is some HTML DOM and javascript code running on the client. So asking how to modify a Razor variable using javascript code from a client browser is like asking how to resurrect a dead man. — Darin Dimitrov
– Darin Dimitrov, Commented May 8, 2017 at 12:47

Masoud Andalibi · Accepted Answer · 2017-05-08 13:00:42Z

1

Let's say you have stored the variable within this div tag(which can be anything else):

<div id="divValue">@str</div>

And this is your button:

<input class="btn btn-default" type="submit" value="Add Strength" id="btn"/>

Using jquery:

<script>
        $(document).ready(function() {
            $('#btn').click(function(e){
                e.preventDefault();

                var textValue = $('#divValue').text();

                if (textValue == "str") {
                    $('#divValue').text('changeText'); 
                    //or other action
                } else if (textValue == "dex") {
                    //action
                } else if (textValue == "intl") {
                    //action
                    }

            });
        });
</script>

answered May 8, 2017 at 13:00

Masoud Andalibi

3,2385 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Blapple Over a year ago

Thanks for the answer, I'll try it out in a bit

Dhaval Pankhaniya · Accepted Answer · 2017-05-08 13:08:50Z

0

use hidden input field in razor to store value in html

@Html.Hidden("str",str,new {@id = "str"})

and use following javascript to retrieve and store value in str hidden field

$("#str").val("value you want to store");

var value = $("#str").val()

answered May 8, 2017 at 13:08

Dhaval Pankhaniya

1,9961 gold badge16 silver badges29 bronze badges

Comments

Hasan Elsherbiny · Accepted Answer · 2017-05-08 13:12:16Z

first you need to make sure that your button go with the javascript function as you have you will have your page refreshed without knowing what happen so you need to prevent this behavior with

e.preventDefault();

in your javascript function or just change the input type to button

<input type='button' .../>

the second thing you have to notice that to change c# variable value you need some server side processing so you can use ajax.

if it's just some small thing can be done with your client side so you can add your variable to a hidden field and manupilate it with javascrip / jquery like this

<input type='hidden' id='myhiddenvar' value='@myvar'/>

and with jquery handle it like

var $myvar=$("#myhiddenvar").val();//get Value From Hidden Field
$myvar++;
$("#myhiddenvar").val(myvar);//Put Back To Hidden field

Collectives™ on Stack Overflow

ASP.NET MVC 5 Button Event

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related