C# Web应用程序在Java脚本中将值从列表发送到函数

在我的Razor页面中，我有一个包含一些日期的列表属性：

public List<Dates> MyDates { get; set; }

---

基于

列表模型.MyDates

创建CSS规则。在cshtml文件中，您可以执行以下操作：

@Html.Raw（string.Join（“，”，Model.MyDates.Select（x=>string.Format（“[data date='{0}']”），x.ToString（“yyyyMMdd”；”））
{
/*你的CSS样式*/
}

使用

Html.Raw（）

呈现非转义Html，并使用

，

作为分隔符

生成的CSS样式规则类似于：

[数据日期='20200821']，[数据日期='20200822']，[数据日期='20200823']
{
颜色：红色
}

之后，使用js呈现日历。对于每天的单元格，可以呈现

数据日期

属性：

23

这样，如果

data data

中的数据与生成的CSS类匹配，则将对其进行样式设置

---

在我看来，使用样式设置日历很简单（例如，不需要将对象解析为json并在js端对其进行解码），而且它可能也适合您未来的需要

例如，如果要在2020年8月设置所有日期的样式，可以创建另一个CSS规则，如：

[数据日期=^='202008']
{
/*你的风格*/
}

这样，您就不需要更改js代码（即逻辑）。有关更多详细信息，请参见下面的代码段

var y=“2020”
var m=“08”
var i=“24”
document.getElementById（“日历”）.innerHTML=“+i+”“
//同月示例
document.getElementById（“日历”）.innerHTML+=“（202008）25”
//同一天的例子
document.getElementById（“日历”）.innerHTML+=“（202007）24”

#日历，
div{
字号：2rem；
显示：内联块；
保证金：5px；
}
[数据日期='20200824']{
颜色：红色；
}
/*全天24小时*/
[数据日期$='24']{
边框：4px纯蓝色；
}
/*所有2020年8月*/
[数据日期^='202008']{
背景：橙色；
}

---

我认为您可以使用如下视图日期：

型号：

public class Dates
{
    public string Date { get; set; }
}

public class IndexModel : PageModel
{
    public List<Dates> MyDates { get; set; }
    public void OnGet()
    {
        MyDates = new List<Dates>
        {
            new Dates{ Date = DateTime.Now.ToShortDateString()},
            new Dates{ Date = DateTime.Now.ToShortDateString()},
            new Dates{ Date = DateTime.Now.ToShortDateString()}
        };
        ViewData["Date"] = Newtonsoft.Json.JsonConvert.SerializeObject(MyDates);
    }
}

@section scripts{
    <script>
    
        $(document).ready(function () {
            var x = [];
            var dates = @Html.Raw(ViewData["Date"]);
            dates.forEach(element => x.push(element.Date));
            console.log(x);
        })
    </script>
}

处理程序：

public class Dates
{
    public string Date { get; set; }
}

public class IndexModel : PageModel
{
    public List<Dates> MyDates { get; set; }
    public void OnGet()
    {
        MyDates = new List<Dates>
        {
            new Dates{ Date = DateTime.Now.ToShortDateString()},
            new Dates{ Date = DateTime.Now.ToShortDateString()},
            new Dates{ Date = DateTime.Now.ToShortDateString()}
        };
        ViewData["Date"] = Newtonsoft.Json.JsonConvert.SerializeObject(MyDates);
    }
}

@section scripts{
    <script>
    
        $(document).ready(function () {
            var x = [];
            var dates = @Html.Raw(ViewData["Date"]);
            dates.forEach(element => x.push(element.Date));
            console.log(x);
        })
    </script>
}

公共类索引模型：PageModel
{
公共列表MyDates{get；set；}
公共互联网
{
MyDates=新列表
{
新日期{Date=DateTime.Now.ToSortDateString（）}，
新日期{Date=DateTime.Now.ToSortDateString（）}，
新日期{Date=DateTime.Now.ToSortDateString（）}
};
ViewData[“Date”]=Newtonsoft.Json.JsonConvert.SerializeObject（MyDates）；
}
}

查看：

public class Dates
{
    public string Date { get; set; }
}

public class IndexModel : PageModel
{
    public List<Dates> MyDates { get; set; }
    public void OnGet()
    {
        MyDates = new List<Dates>
        {
            new Dates{ Date = DateTime.Now.ToShortDateString()},
            new Dates{ Date = DateTime.Now.ToShortDateString()},
            new Dates{ Date = DateTime.Now.ToShortDateString()}
        };
        ViewData["Date"] = Newtonsoft.Json.JsonConvert.SerializeObject(MyDates);
    }
}

@section scripts{
    <script>
    
        $(document).ready(function () {
            var x = [];
            var dates = @Html.Raw(ViewData["Date"]);
            dates.forEach(element => x.push(element.Date));
            console.log(x);
        })
    </script>
}

@节脚本{
$（文档）.ready（函数（）{
var x=[]；
var dates=@Html.Raw（ViewData[“Date”]）；
dates.forEach（element=>x.push（element.Date））；
控制台日志（x）；
})
}

结果：

public class Dates
{
    public string Date { get; set; }
}

public class IndexModel : PageModel
{
    public List<Dates> MyDates { get; set; }
    public void OnGet()
    {
        MyDates = new List<Dates>
        {
            new Dates{ Date = DateTime.Now.ToShortDateString()},
            new Dates{ Date = DateTime.Now.ToShortDateString()},
            new Dates{ Date = DateTime.Now.ToShortDateString()}
        };
        ViewData["Date"] = Newtonsoft.Json.JsonConvert.SerializeObject(MyDates);
    }
}

@section scripts{
    <script>
    
        $(document).ready(function () {
            var x = [];
            var dates = @Html.Raw(ViewData["Date"]);
            dates.forEach(element => x.push(element.Date));
            console.log(x);
        })
    </script>
}

---

将

Model.MyDates

设置为

JSON字符串

，然后在脚本中执行如下操作：

var-dateString=@Model.MyDates；var dateObj=JSON.parse（dateString）

；有关转换为

JSON字符串的信息，请参见此部分。此解决方案似乎不错，但即使我做了与您完全相同的事情，在控制台上也不会有结果。请检查页面中的ViewData是否包含数据。ViewData可以在当前页面上使用，例如，我在IndexModel中定义了它，然后它就可以在索引页面上使用了。也许您可以向我们展示更多代码来解决此问题。我的ViewData如下所示：
{ViewData[“Title”]=“Home Page”}
我不确定包含日期的语法是什么您需要定义新的ViewData[“Date”]：
ViewData[“Date”]=Newtonsoft.Json.JsonConvert.SerializeObject（Model.MyDates）
您的解决方案似乎很好，但问题是，当我用js呈现日历时，我需要实际使用变量，而不是直接使用日期，比如：
I
，而这种语法显然不起作用。这是怎么做到的？@gameloverr2假设
年
、
月
和
i
是字符串，那么您的js代码应该类似于：
“+i+”
。在JSFIDLE上看到这个例子：您是对的，它是这样工作的。还有一个问题，您可能知道@string.Join页面的语法吗？我使用了你的代码，但它给了我语法错误，我不确定why@gameloverr2在我的示例中似乎出现了一些语法错误。我已经更新了上面的代码，并用
@Html.Raw（）
对其进行了包装，以确保呈现非转义的Html字符串。问题是@Html.Raw语法说：“在样式规则中Myssing a selector”，当我运行应用程序时，它会说我的列表为null，即使不是null