使用AJAX刷新ASP.NET MVC中的局部视图

时间:2013-12-27 11:10:40

标签: javascript jquery asp.net ajax highcharts

我目前正在使用ASP.NET MVC5和Highcharts创建一个网站: http://highcharts.somee.com/Highcharts/CreateHighcharts

选择和图表分为部分视图。我的目标是在选择视图中单击一个按钮,将变量传递给控制器​​,调用一些函数并仅刷新图表局部视图。

<div id="divSelect" style="width: 100%;">
    @{Html.RenderPartial("_SelectPartial");}
</div>

<div id="divHighCharts" align="center"  style="width: 100%;">
    @{Html.RenderPartial("_CreateHighchartsPartial");}
</div>

_CreateHighchartsPartial: (正在创建图表)

@model  DotNet.Highcharts.Container
@(Model)

_SelectPartial:

@{
    ViewBag.Title = "Partial View chartPartial";
}
<link type="text/css" href="../../Scripts/jquery-ui-1.10.3/css/ui-darkness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<link type="text/css" href="../../Content/Site.css" rel="stylesheet" />


<script type="text/javascript">
    $(document).ready(function () {


        $('#RefreshButton').click(function () {

           var IntervallHours = {
               ID: 94,
           }

           $.ajax({
               type: "POST",
               url: "/Highcharts/AjaxCall",
               data: IntervallHours,
               success: function (data) {

               }
           })
       });

        });
</script>


<div id="Auswahl" align="center">
    <br />
    <br />
    Startdatum: <input type="text" id="dateBegin" />
    Enddatum: <input type="text" id="dateEnd" />
    <button id="RefreshButton" class="button">Start</button>
    <br />
    <br />
    <button id="1hourButton" class="button">1 Stunde</button>
    <button id="24hoursButton" class="button">24 Stunden</button>
    <button id="1weekButton" class="button">1 Woche</button>
    <button id="1monthButton" class="button">1 Monat</button>
    <button id="3monthButton" class="button">3 Monate</button>
    <button id="allButton" class="button">Alle</button>
    <br />
    <br />
    <input class="sende01" type="button" value="1 Stunde">
    <input class="sende01" type="button" value="24 Stunden">
    <input class="sende01" type="button" value="1 Woche">
    <input class="sende01" type="button" value="1 Monat">
    <input class="sende01" type="button" value="3 Monate">
    <input class="sende01" type="button" value="Alle">
</div>
<hr />

控制器(Highcharts):

public class HighchartsController : Controller
    {
        public int hourIntervallllllINT=6000;

        [HttpPost]
        public ActionResult AjaxCall(UserModel model)
        {
            hourIntervallllllINT = model.ID;
            CreateHighcharts();
           return Json(new{success = true});
        }

...
...
...
        public ActionResult CreateHighcharts()
        {            
            GetDatabaseData(1, hourIntervallllllINT);
            createSeries(1, "tempValue");
            createSeries(1, "humidityValue");

Highcharts chart1 = new Highcharts("chart1")
...
...
...
 return View(new Container(new[] { chart1, chart2, chart3 }));
}

正确传递hourIntervallllllINT的新值,CreateHighcharts()函数也正常工作。我的问题是,部分视图没有重新加载。我认为AJAX函数中缺少一些成功的东西。

如果您有更简单的方法将javascript变量传递给控制器​​,调用函数并刷新部分视图,请随时发布。

0 个答案:

没有答案