在下拉选择部分2上呈现页面的一部分 [英] Render part of page on dropdown selection part 2

问题描述

这是类似问题的后续内容，但考虑了建议.

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

在选择下拉菜单时呈现页面的一部分

我的主视图上有一个图表，当下拉列表选择不同的值时，我想对其进行部分更新.

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

页面第一次正确呈现，但是当我在下拉列表中选择一个新值时，我认为.submit脚本在脚本.submit()中失败，因为当我在window.submitAjaxForm上放一个空格时，没达到.

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

_PnlChart.cshtml

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

我的主视图Index.cshtml:

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>

我的控制器:

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

推荐答案

代码中的这一行

eval($(this).attr('onsubmit'));返回false;

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

我不确定您打算在这里做什么.但是从您的问题来看，我认为您想提交表单.但是该行不会提交表单.表达式 $(this).attr('onsubmit')将返回 undefined ，因为您的表单没有定义 onsubmit 属性.

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.

但是您已经在其他方法( submitAjaxForm )中使用了表单提交代码.因此，如果仅删除 $('form#ajaxForm').submit 处理程序(显然它没有任何用处)，则您的代码将起作用.当您更改下拉列表时，它将提交一个ajax表单提交.

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.

但是您的表单操作已设置为 GetEnvironment 操作方法.这意味着您的ajax表单提交将是该操作方法.在您的问题中，您有不同的操作方法可返回更新的图表内容.这没有道理！

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!

我个人更喜欢编写手写的ajax调用，而不是依靠ajax操作帮助程序方法.下面是我可能会使用的代码(下拉列表代码除外.进一步阅读)

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

现在监听SELECT元素的change事件.

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

});

您应该考虑使用视图模型传递Dropdownlist数据.为什么不使用DropDownListFor helper方法?看起来很干净，混合了很多C#代码(请参阅所有会话转换和所有内容.)使它有点脏恕我直言.

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.

这篇关于在下拉选择部分2上呈现页面的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！