ドロップダウン選択部分2のページの一部をレンダリングする

Question

これは、同様の質問に続きますが、提案を考慮しています。

Render part of page on dropdown selection

私はドロップダウンが異なる値を選択し、部分的にするときに更新したいと思います私のメインビューにチャートを持っています。

ページが正しくレンダリングされますが、ドロップダウンリストで新しい値を選択すると、.submitスクリプトがスクリプトの中で失敗していると思います.submit（）window.submitAjaxForm決して到達されません。

_PnlChart.cshtml

<img src="@Url.Action("CreateTraderPnlChart3")" width="600" height="600" align="middle" vspace="50" /> 

マイMAINVIEW Index.cshtml：

<div class="w3-half"> 


    <div id="ExportDiv"> 
     @{ Html.RenderPartial("_PnlChart");} 
    </div> 

     @using (Ajax.BeginForm("GetEnvironment", 
     new RouteValueDictionary { { "Environment", "" } }, new AjaxOptions() { UpdateTargetId = "ExportDiv" }, new { id = "ajaxForm" })) 
     { 
      @Html.DropDownList("PeriodSelection", 
       new SelectList((string[])Session["Periods"]), 
       (string)Session["Period"], 
       new 
       { onchange = "submitAjaxForm()" }) 
     } 

    </script> 

    <script type="text/javascript"> 
     $('form#ajaxForm').submit(function(event) { 
     eval($(this).attr('onsubmit')); return false; 
     }); 

    window.submitAjaxForm = function(){ 
     $('form#ajaxForm').submit(); 
     } 
    </script> 

    </div> 

マイコントローラ：

public ActionResult PeriodSelection(string dropdownlistReturnValue) // dont know what dropdownlistReturnValue is doing? 
    { 
     Session["Period"] = dropdownlistReturnValue; 
     return PartialView("~/Views/Employee/_PnlChart.cshtml"); 
    } 

Answer 1

あなたのコードでこの行、

にeval（$（この）.ATTR（ 'のonSubmit'））;偽を返します。

あなたがここで何をしたいのか分かりません。しかし、あなたの質問から、私はあなたがフォーム提出をしたいと思っています。しかし、その行はフォームを提出しません。式$(this).attr('onsubmit')は、フォームにonsubmit属性が定義されていないため、undefinedを返します。

しかし、既に他の方法（submitAjaxForm）にフォーム送信コードがあります。したがって、単に$('form#ajaxForm').submitハンドラを削除しても（明らかに何も役に立ちません）、コードは機能します。ドロップダウンを変更すると、ajaxフォームの送信が行われます。

ただし、フォームアクションはGetEnvironmentアクションメソッドに設定されています。つまり、あなたのajaxフォームの提出はそのアクションメソッドになります。あなたの質問では、更新されたチャートのコンテンツを返す別のアクションメソッドがあります。それは意味をなさない！

私は個人的には、ajaxアクションヘルパーメソッドに頼る代わりに手書きのajax呼び出しを書くことを好みます。下記の私はおそらく使用するコードです（ドロップダウンリストのコードを除く。さらに読む）

<div id="ExportDiv"> 
    @{ Html.RenderPartial("_PnlChart");} 
</div> 
@Html.DropDownList("PeriodSelection", 
     new SelectList((string[])Session["Periods"]), 
     (string)Session["Period"], new 
     { data_charturl = Url.Action("PeriodSelection","Home")}) 

今すぐSELECT要素の変更イベントに耳を傾けます。

$(function(){ 

    $("#PeriodSelection").change(function(){ 
    var v = $(this).val(); 
    var url=$(this).data("charturl")+'?dropdownlistReturnValue='+v; 
    $("#ExportDiv").load(url); 
    }); 

}); 

ドロップダウンリストデータを渡すには、ビューモデルの使用を検討する必要があります。なぜDropDownListForヘルパーメソッドを使用しないのですか？それは多くのC＃コード（すべてのセッションのキャストとすべてを参照してください）を混ぜることは、きれいに見える、それは一種の汚いIMHOになります。