ASP.NET MVC 5 按钮事件答案

【问题标题】：ASP.NET MVC 5 Button EventASP.NET MVC 5 按钮事件
【发布时间】：2017-05-08 12:39:46
【问题描述】：

我想为使用以下 html 代码制作的按钮添加一些功能：

    <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');"/>

当我单击此按钮时，我想更改我使用 Razor 存储的值；

@{
    int str = 5;
}

我用谷歌搜索了一下，阅读了文档，但我找不到任何东西，这很有效。
我制作了一个在 onclick 上调用的 javascript 函数，但是当我调试代码时，它并没有进入所述函数的范围内。函数如下：

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++;
        }
    }
}

如果有人可以向我解释如何在我的按钮上获得某种功能，我将不胜感激。

【问题讨论】：

请添加你的javascript函数
你可以用 jquery 来做，因为这里不需要服务器端，除非你想从数据库中获取值
您不能使用 Javascript 增加存储在 Razor/C# 中的变量 - 除非您调用后端。
添加了 javascript 函数，@Valkyriee 我将如何使用 jQuery 来做这件事？
了解 ASP.NET MVC 如何工作以更好地掌握您的问题非常重要。浏览器向服务器发送 HTTP 请求。这个请求被运行时拦截，并且执行一些控制器动作，最终将 HTML 返回给客户端浏览器。一旦到达客户端浏览器，就不再有 Razor 或服务器变量或任何 ASP.NET MVC 的概念。一切都消失了。剩下的就是在客户端上运行的一些 HTML DOM 和 javascript 代码。因此，询问如何使用客户端浏览器中的 javascript 代码修改 Razor 变量就像询问如何复活一个死人。

标签： c# asp.net-mvc asp.net-mvc-5

【解决方案1】：

假设您已将变量存储在此 div 标签中（可以是其他任何标签）：

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

这是你的按钮：

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

使用 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>

【讨论】：

谢谢你的回答，我一会儿试试

【解决方案2】：

使用 razor 中的隐藏输入字段将值存储在 html 中

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

并使用以下 javascript 在 str 隐藏字段中检索和存储值

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

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

【讨论】：

【解决方案3】：

首先，您需要确保您的按钮与您所拥有的 javascript 函数一样您将在不知道会发生什么的情况下刷新页面，因此您需要使用

来防止这种行为

e.preventDefault();

在您的 javascript 函数中，或者只是将输入类型更改为按钮

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

您必须注意的第二件事是，要更改 c# 变量值，您需要一些服务器端处理，以便您可以使用 ajax。

如果只是一些小事可以用您的客户端完成，那么您可以将变量添加到隐藏字段并使用 javascrip / jquery 像这样操作它

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

并用 jquery 处理它

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

【讨论】：