将 C# 变量传递给 html答案

【问题标题】：Pass C# variable to html将 C# 变量传递给 html
【发布时间】：2018-02-08 03:32:02
【问题描述】：

我很难弄清楚如何使用 jQuery 从 C# 调用变量。我似乎无法访问变量 sqlReq。我的最终目标是能够将我自己的 SQL 信息添加到这个 PieChart 中。但我真的不知道如何在 HTML 或 jQuery 中调用和设置 C# SQL 请求...

我看过很多例子，但我似乎无法得到一个具体的答案。我不确定这是否与没有对 C# 类的引用有关，或者是什么。

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Diagnostics;

namespace KendoUIApp3.Controllers
{
    public class HomeController : Controller
    {
        public String sqlReq = "";
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            SqlConnection sqlConn = new SqlConnection("someDB");
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = sqlConn;
            SqlDataReader read;
            cmd.CommandText = "SELECT COUNT(*) FROM P";
            cmd.CommandType = CommandType.Text;
            sqlConn.Open();

            read = cmd.ExecuteReader();
            sqlReq = read.ToString();
            sqlConn.Close();
            Console.Write(read);
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}


@{
    ViewBag.Title = "Home Page";
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="C:\Users\215000712\source\repos\KendoUIApp3\KendoUIApp3\Scripts\kendo\sqlQuery.js"></script>
</head>
<body>
    <div id="example">
        <div class="demo-section k-content wide">
            <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
        </div>
        <script>
            function createChart() {
                $("#chart").kendoChart({
                    title: {
                        position: "bottom",
                        text: "Share of Internet Population Growth, 2007 - 2012"

                    },
                    legend: {
                        visible: false
                    },
                    chartArea: {
                        background: ""
                    },
                    seriesDefaults: {
                        labels: {
                            visible: true,
                            background: "transparent",
                            template: "#= category #: \n #= value#%"
                        }
                    },
                    series: [{
                        type: "pie",
                        startAngle: 150,
                        data: [{
                            category: "Asia",
                            value: 53.8,
                            color: "#9de219"
                        }, {
                            category: "Europe",
                            value: 16.1,
                            color: "#90cc38"
                        }, {
                            category: "Latin America",
                            value: 11.3,
                            color: "#068c35"
                        }, {
                            category: "Africa",
                            value: 9.6,
                            color: "#006634"
                        }, {
                            category: "Middle East",
                            value: 5.2,
                            color: "#004d38"
                        }, {
                            category: "North America",
                            value: 3.6,
                            color: "#033939"
                        }]
                    }],
                    tooltip: {
                        visible: true,
                        format: "{0}%"
                    }
                });
            }

            $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart);
        </script>

    <div>
        <br/>
        <br/>
        <br />
    <script type="text/javascript">
            $(document).ready(function ()
            {
                alert("@sqlReq")
            })
    </script>
    </div>
</body>
</html>

【问题讨论】：

一个简单的解决方案是将您的 sqlReq 值放在 viewbag 中并从那里访问它（就像您使用标题一样）。但这取决于您想对数据做什么。是一次性加载吗？
你不会从 JavaScript 调用 C#，也不会从 C# 调用 JavaScript。您是否研究过 ASP.NET MVC 应用程序应该如何组合在一起？它是一个 Web 框架，因此最终您只能通过 HTTP 协议向浏览器发送 HTML、JavaScript 和 CSS。您不会直接从 JavaScript 调用 C#。在 MVC 中，您通常在从控制器调用的数据层中查询数据。控制器将结果信息作为模型传递到视图中，然后视图决定将什么 HTML 发送给客户端。
@mason true 但是您可以在 javascript 中访问 C# 变量：stackoverflow.com/questions/665995/…
您没有正确处理您的IDisposable 对象（SqlConnection、SqlCommand、SqlDataReader）。
@jdmdevdotnet 这将 C# 值的值嵌入到在视图中生成并发送到客户端的 HTML 文档中。您不是“从 JavaScript”访问它。区别很重要，因为许多刚接触 Web 开发的人很难理解客户端与服务器端代码以及它们如何交互。说你可以像那样“访问变量”只是误导。

标签： javascript c# jquery html

【解决方案1】：

您的控制器将值传递给 HTML，如果您希望数据从页面移动到 C# 控制器（例如使用 Ajax），则需要回传。

好消息是，有一种非常简单的方法可以将值发送到您的 HTML。例如，在您的控制器中，创建一个字符串列表，并将它们添加到视图中：

public ActionResult Index()
    {
        return View(new List<string> {"A", "B"});
    }

然后，在您看来，请在页面顶部引用此模型：

@model IEnumerable<string>

您现在可以获取这些引用并将它们显示在表格中：

<table class="table table-striped table-bordered table-hover">
@foreach (var entry in Model)
{
    <tr><td>@Html.DisplayFor(modelName => entry)</td></tr>
}

我在此示例中使用的模型只是一个字符串列表，但您的模型可以是您在 C# 中创建的任何模型。

在您的示例中，这可能是您的 SQL 读取的结果——如果不知道您的数据是什么样子就很难说，但您可以在视图中使用 @model string，并在控制器中使用：

return View(sqlReq.ToString())

【讨论】：

也许我不完全理解 View... 但以最基本的方式。我只想在 html 代码中查看字符串“sqlReq”。
@{ ViewBag.Title = "主页"; @model 字符串 = sqlReq; } 喜欢吗？
您已将数据发送到页面，现在您需要显示它。例如。 @Html.DisplayForModel()
通常你把它们分开，像这样：@model HelpPageApiModel @{ var description = Model.ApiDescription; ViewBag.Title = description.HttpMethod.Method + " " + description.RelativePath; }
您已将 sqlReq 传递给您的视图？您已经在视图顶部添加了@model 字符串，并且在HTML 正文中的某处添加了@Html.DisplayForModel()？现在应该可以了。如果没有，请尝试将虚拟测试字符串传递给您的视图和/或调试打开此页面时发生的事情...