使用ajax.beginform更新.NET圖表

我使用.NET圖表從數據庫中的表中創建一些動態圖表，並且每個圖表都是一個單獨的視圖，並在控制器中具有相應的操作。使用ajax.beginform更新.NET圖表

然後將它們顯示在主視圖圖片：

<img src="~/Controller/Chart1" class="centered" />

現在我希望能夠按日期過濾圖表，我已經添加了參數的動作和一對夫婦datepickers爲開始日期和結束日期。

我試圖刷新圖表使用Ajax，但我有麻煩。如果沒有Ajax，過濾器將工作，但會重定向到僅包含更新圖表的頁面。

使用Ajax，什麼都不會發生，或者更確切地說，如果我將UpdateTargetId設置爲一個div，它將被填充文本，如字節代碼或其他東西。這是我使用的是什麼：

<div> 
    using (Ajax.BeginForm("Chart1", "controller", 
     new AjaxOptions 
    { 
     HttpMethod = "POST", 
     InsertionMode = InsertionMode.Replace, 
     UpdateTargetId = "Chart1" 
     })) 
    { 
    <p> 
     <input type="text" name="begindate" class="datefield" placeholder="Begin Date" /> 
     <input type="text" name="enddate" class="datefield" placeholder="End Date" /> 
     <input type="submit" value="Filter" /> 
    </p> 

    <img src="~/controller/Chart1" class="centered" /> 
</div>

我怎樣才能解決這個問題？

來源

2016-03-30 Angelo Dias

您需要將日期傳遞給您的操作方法，並讓操作方法使用這些日期來生成將用於生成圖表的過濾數據集。

你可以簡單地使用jQuery Ajax來做到這一點。

<div> 
    <input type="text" name="begindate" class="datefield" placehold="Begin Date" /> 
    <input type="text" name="enddate" class="datefield" placeholder="End Date" /> 
    <input type="submit" id="btnFilter" value="Filter" /> 
    <img src="~/controller/Chart1" id="chartImg" class="centered" /> 
</div>

現在，當用戶點擊的形式，通過日期

$(function(){ 
    $("#btnFilter").click(function(e){ 
    e.preventDefault(); 

    var d1 = $("input[name='begindate']").val(); 
    var d2 = $("input[name='enddate']").val(); 
    var url = "@Url.Action("Chart1", "YourControllerName")"; 
    url += "?beginDate=" + d1 + "&endDate=" + d2; 
    $("#chartImg").attr("src", url); 
    }); 
});

當然現在您的操作方法應該接受的日期，並根據需要返回數據：

public ActionResult Chart1(DateTime beginDate,DateTime endDate) 
{ 
    // Return the chart image 
}

我使用Url.Action操作方法生成Chart1操作方法的正確路徑。如果您的JavaScript代碼位於Razor視圖內，此代碼將可用。如果您的代碼位於外部js文件中，請使用this post中提到的方法

來源

2016-03-30 15:44:54 Shyju

非常感謝您的快速回復。它奇妙地工作。只需要添加一個可怕的黑客來轉換日期格式： var dateAr = d1.split（' - '）; var newBDate = dateAr [2] +' - '+ dateAr [1] +' - '+ dateAr [0] .slice（-2）; –

使用ajax.beginform更新.NET圖表

回答

相關問題