c# - Render part of page on dropdown selection part 2

Question

This is a follow on to similar question but taking suggestions into account.

Render part of page on dropdown selection

I have a chart on my main view which I would like to update partially when a dropdown selects different values.

The page renders correctly the first time, but when I select a new value in the dropdown, then I think the .submit script is failing in the script .submit() because when I put a break on window.submitAjaxForm it is never reached.

_PnlChart.cshtml

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

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

My controller:

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

Answer 1

This line in your code,

eval($(this).attr('onsubmit')); return false;

I am not sure what you were intending to do here. But from your question, i assume you wanted to do a form submission. But that line will not submit the form. The expression $(this).attr('onsubmit') is going to return undefined as your form does not have an onsubmit attribute defined.

But you already have the form submit code in your other method (submitAjaxForm). So if you simply remove the $('form#ajaxForm').submit handler (apparently it does not do anything useful), your code will work. When you change the dropdown, it will make an ajax form submission.

But your form action is set to GetEnvironment action method. That means your ajax form submission will be to that action method. In your question you have a different action method which returns the updated chart content. It does not makes sense!

I personally prefer to write handwritten ajax calls instead of relying on the ajax action helper methods. The below is the code i would probably use (Except the dropdownlist code. read further)

<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")})

Now listen to the change event of the SELECT element.

$(function(){

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

});

You should consider using the a view model to pass the Dropdownlist data. Why not use the DropDownListFor helper method ? It looks much clean, Mixing a lot of C# code (See all the session casting and all.) makes it kind of dirty IMHO.