在 ASP.NET Core 中通过单击按钮更改属性值

Question

我想通过单击 ASP.NET Core Razor 页面中的按钮更改服务器中属性的值。

我在 class 中有这个属性:

public class MyClassViewModel
{ 
    public string ButtonColor { get; set; }
    public MyClassViewModel()
    {
        ButtonColor = new string("#007BFF");
    }

}

在我的 Razor 页面中，我正在检查这样的空引用异常：

@{
MyClassViewModel color = new MyClassViewModel();
if (string.IsNullOrEmpty(color.ButtonColor))
{
color.ButtonColor = "#000000";
}
}

我有两个锚将用户选择的颜色保存到隐藏的输入。这些标签允许用户选择他们想要的颜色。是这样的：

<li><input type="text" id="selected-theme" value="@Model.ButtonColor" hidden readonly/></li>
<li><a style="color:rgb(7,100,199)" onclick="apply_theme('#007BFF')"><i class="fas fa-square"></i></a></li>
<li><a style="color:rgb(188,126,0)" onclick="apply_theme('#BC7E00')"><i class="fas fa-square"></i></a></li>

这是包含 'apply_theme()' 函数的脚本：

function apply_theme(color) {
    document.getElementById('selected-theme').value = color;
}

这里的问题是我得到： 'System.NullReferenceException: 'Object reference not set to an instance of an object.'' 这一行的异常：

<li><input type="text" id="selected-theme" value="@Model.ButtonColor" hidden readonly/></li>

编译器抱怨我在获取值之前没有实例化对象，但我想我已经在构造函数中这样做了。我错过了什么，或者我怎么弄错了？

我希望对这种情况有所了解。

Answer 1

这是一个简单的工作演示。我用的是局部视图。

索引视图：

<li id="theme"></li>

<li><a style="color:rgb(7,100,199)" onclick="apply_theme('#007BFF')"><i class="fas fa-square">theme1</i></a></li>

<li><a style="color:rgb(188,126,0)" onclick="apply_theme('#BC7E00')"><i class="fas fa-square">theme2</i></a></li>

@section scripts{ 

<script>
    $(function () {
        $.ajax({
            type: "get",
            url: "/Home/SetColor",
            success: function (result) {
                $("#theme").html(result);
            }
        })
    })

    function apply_theme(color) {
        $.ajax({
            type: "get",
            url: "/Home/SetColor",
            data: { color: color },
            success: function (result) {
                $("#theme").html(result);
            }
        })
    }
</script>
}

设置颜色:

public IActionResult SetColor(string color)
{
    MyClassViewModel myClassViewModel = new MyClassViewModel();
    if (!string.IsNullOrEmpty(color))
    {
        myClassViewModel.ButtonColor = color;
    }
    return PartialView(myClassViewModel);
}

局部视图：

@model MyClassViewModel

<input type="text" id="selected-theme" value="@Model.ButtonColor" readonly />

结果：

在 ASP.NET Core 中通过单击按钮更改属性值

Changing a property value from a button click in ASP.NET Core

c#

asp.net-mvc

nullreferenceexception

asp.net-core

razor-pages

在 ASP.NET Core 中通过单击按钮更改 属性 值

Changing a property value from a button click in ASP.NET Core

c#

asp.net-mvc

nullreferenceexception

asp.net-core

razor-pages

在 ASP.NET Core 中通过单击按钮更改属性值