ajax.beginformを使用して.NETチャートを更新する

Question

.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> 

どのように私はこの問題を解決することができますか？

Answer 1

アクションメソッドに日付を渡し、アクションメソッドでこれらの日付を使用して、チャートを生成するために使用されるフィルタリングされたデータセットを生成させる必要があります。

単純に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