Question

我正在尝试在我的网站上绘制图表。这是带有样本输入的图表的js代码

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">

    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.ASSORTNO, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ASSORTNO, new { htmlAttributes = new {@readonly="readonly",@Value=ViewBag.ASSORTNO, @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ASSORTNO, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.DATE, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DATE, new { htmlAttributes = new {@autofocus="autofocus",@Value=ViewBag.CURRENTDATE, @class = "form-control date" } })
            @Html.ValidationMessageFor(model => model.DATE, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.RFNO, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.RFNO, new { htmlAttributes = new { @readonly = "readonly", @Value = ViewBag.RFNO, @class = "form-control" } })
            @Html.TextBox("AVAILABLECARET",(decimal)ViewBag.AVAILABLECARET,new {@class="form-control txtAvailablecaret",@readonly="readonly" })
            @Html.ValidationMessageFor(model => model.RFNO, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.MANAGER, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @*@Html.EditorFor(model => model.MANAGER, new { htmlAttributes = new { @class = "form-control" } })*@
            @Html.DropDownListFor(model => model.MANAGER, new SelectList(ViewBag.MANAGERLIST, "ID", "USERNAME"), "Select Manager", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.MANAGER, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.CARET, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.CARET, new { htmlAttributes = new { @class = "form-control txtCaret" } })
            @Html.ValidationMessageFor(model => model.CARET, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.MFGSIZE, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.MFGSIZE, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.MFGSIZE, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.TOTALPCS, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.TOTALPCS, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.TOTALPCS, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.DETAILS, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DETAILS, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.DETAILS, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default btnCreate" />
        </div>
    </div>
</div>

这就是我想做的事情。我想从数据库中获取一些信息并将其放入图表中。我写下了获取信息的代码。但我无法管理如何将它们插入到图表的js代码中。

<script type="text/javascript">
    $(function () {
      var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];//these are sample
      $.plot("#placeholder", [d2]);
       });
</script>

Answer 1

假设您正在使用MVC，有两种方法可以做到这一点。一种是使用razor发出页面渲染时所需的正确javascript。另一种（整洁的）方式是进行一次返回JSON的调用，然后用它来填充图表。

Answer 2

您可以像这样使用c＃。

System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append(@"<script type='text/javascript'>");
    sb.Append(@"$(function () {");
    sb.Append(@"var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];");
    sb.Append(@"$.plot(\""#placeholder\"", [d2]);");
    sb.Append(@"});");
    sb.Append(@"</script>");
    ScriptManager.RegisterStartupScript(this, this.GetType(), "ChangeChart", sb.ToString(), false);

对不起，如果我帮不了你。

从代码中改变JS代码

2 个答案: