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" />

我的主视图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（＆＃39;的onsubmit＆＃39;））;返回false;

我不确定你打算在这做什么。但是根据你的问题，我假设你想做一个表格提交。但该行不会提交表格。表达式$(this).attr('onsubmit')将返回undefined，因为您的表单未定义onsubmit属性。

但是您已经在其他方法中使用了表单提交代码（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元素的change事件。

$(function(){

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

});

您应该考虑使用视图模型来传递Dropdownlist数据。为什么不使用DropDownListFor帮助方法？它看起来很干净，混合了很多C＃代码（查看所有会话转换和所有。）使它变得有点肮脏恕我直言。

在下拉选择第2部分

1 个答案: