Javascript 根据选择在面板中重新加载不同的HTML控件

我有一个正在面板中显示的部分CSHTML视图。我需要清除显示的控件，并根据选择的报告显示不同的控件。我已验证is是否通过局部视图，但控件没有更改。我猜我需要用Javascript来做这件事，但不知道该怎么做

主CSHTML文件：

@model EPH.Models.ReportViewerModel

@{
    ViewBag.Title = "Admin Reports";
}

@section styles
{
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <link href="~/Content/ReportViewer/styles/telerikReportViewer-8.1.14.804.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.blueopal.min.css" rel="stylesheet" />
    <style>
        #reportViewer1 {
            position: relative;
            width: 100%;
            height: 500px;
        }
    </style>
}

@{
    var reportSource = new UriReportSource() { Uri = "TestReport.trdx" };
}

<div class="container">
    <form class="form-horizontal" id="myform" name="myform" method="post" role="form">
        <div class="form-group">
            <div class="col-md-4">
                <div class="panel panel-default equal">
                    <div class="panel-heading">Report List</div>
                    <div class="panel-body">
                        <label class="col-md-2 control-label input-sm">Report Name:</label>
                        <div class="col-md-8">
                            @Html.DropDownListFor(m => m.ReportId, new SelectList(Model.ReportsTextList, "ReportId", "Name"),
                                         new { @class = "form-control input-sm-select", @id = "report-selection" })
                        </div>
                    </div>
                </div>
                <div id="panel_ReportParameters" class="panel panel-default equal">
                    <div class="panel-heading">Report Parameters</div>
                    <div class="panel-body">
                        @Html.Partial("_ReportParameters")
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="panel panel-default equal">
                    <div class="panel-heading">Selected Report</div>
                    <div class="panel-body">
                        @(Html.TelerikReporting().ReportViewer()
                                .Id("reportViewer1")
                                .ServiceUrl(Url.Content("~/api/reports/"))
                                .TemplateUrl(Url.Content("~/Content/ReportViewer/templates/telerikReportViewerTemplate-8.1.14.804.html"))
                                .ReportSource(reportSource)
                                .ViewMode(ViewModes.INTERACTIVE)
                                .ScaleMode(ScaleModes.SPECIFIC)
                                .Scale(1.0)
                                .PersistSession(false)
                                .PrintMode(PrintMode.AutoSelect)
                        )
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 nopadright">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <a href="" id="viewbutton" type="button" class="btn btn-info" style="width:100%">Update Report</a>
                </div>
            </div>
        </div>
    </form>
</div>

@section scripts
{
    <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
    <script src="~/Content/ReportViewer/js/telerikReportViewer-8.1.14.804.js"></script>
}

@model EPH.Models.ReportViewerModel
@{
ViewBag.Title=“管理员报告”；
}
@剖面样式
{
#reportViewer1{
位置：相对位置；
宽度：100%；
高度：500px；
}
}
@{
var reportSource=new UriReportSource（）{Uri=“TestReport.trdx”}；
}
报告清单
报告名称：
@Html.DropDownListFor（m=>m.ReportId，新选择列表（Model.ReportsTextList，“ReportId”，“Name”），
新建{@class=“表单控制输入sm选择”，@id=“报告选择”}）
报告参数
@Html.Partial（“\u ReportParameters”）
选定报告
@（Html.TelerikReporting（）.ReportViewer（））
.Id（“reportViewer1”）
.ServiceUrl（Url.Content（“~/api/reports/”）
.TemplateUrl（Url.Content（“~/Content/ReportViewer/templates/telerikReportViewerTemplate-8.1.14.804.html”））
.ReportSource（ReportSource）
.ViewMode（ViewModes.INTERACTIVE）
.ScaleMode（ScaleModes.SPECIFIC）
.比例（1.0）
.persistence会话（false）
.PrintMode（PrintMode.AutoSelect）
)
@节脚本
{
}

局部视图（需要根据选择重新加载的面板）

@model EPH.Models.ReportViewerModel
@使用EPH.Model.Models；
@foreach（Model.Reports.ReportParameters中的ReportParameters参数）
{
@参数提示
@if（parameter.parameterdatatype==ParamDataType.None）
{
}
else if（parameter.parameterdatatype==ParamDataType.String）
{
@Html.TextBoxFor（m=>parameter.Name）
}
else if（parameter.parameterdatatype==ParamDataType.DateTime）
{
@Html.TextBoxFor（m=>parameter.Name，新的{@class=“form control input sm datepicker”}）
}
else if（parameter.parameterdatatype==ParamDataType.DateRange）
{
@Html.TextBoxFor（m=>parameter.Name，新的{@class=“form control input sm datepicker”}）
}
else if（parameter.parameterdatatype==ParamDataType.Integer）
{
@Html.TextBoxFor（m=>parameter.Name）
}
else if（parameter.parameterdatatype==ParamDataType.Boolean）
{
@Html.TextBoxFor（m=>parameter.Name）
}
else if（parameter.parameterdatatype==ParamDataType.Float）
{
@Html.TextBoxFor（m=>parameter.Name）
}
else if（parameter.parameterdatatype==ParamDataType.List）
{
if（parameter.Name.Equals（“orderStatus”））
{
@Html.DropDownListFor（m=>m.ReportId，新选择列表（Model.orderstatus，“Id”，“Name”），
新建{@class=“表单控制输入sm select”}）
}
}
else if（parameter.parameterdatatype==ParamDataType.IntRange）
{
@Html.TextBoxFor（m=>parameter.Name）
@Html.TextBoxFor（m=>parameter.Name）
}
}
var daterangeOptions={
开始日期：力矩（）减去（'days'，29），
endDate:moment（），
minDate:'01/01/2012'，
maxDate:'12/31/2200'，
日期限制：{年：50}，
决战：没错，
showweekNumber：正确，
计时器选择器：错误，
时间选择器增量：1，
时间选择器12小时：对，
范围：{
“今天”：[时刻（），时刻（）]，
‘昨天’：[moment（）.subtract（'days'，1），moment（）.subtract（'days'，1）]，
“过去7天”：[moment（）.减去（'Days'，6），moment（）]，
“过去30天”：[moment（）.减去（'Days'，29），moment（）]，
“本月”：[moment（）.startOf（'Month'），moment（）.endOf（'Month'），
“上个月”：[moment（）.subtract（'Month'，1.）.startOf（'Month'），moment（）.subtract（'Month'，1.）.endOf（'Month'）]
},
打开“左”，
按钮类：['btn btn info']，
applyClass:'btn small btn primary'，
cancelClass:'btn small'，
格式：“MM/DD/YYYY”，
分隔符：'到'，
区域设置：{
applyLabel:“提交”，
取消标签：“清除”，
fromLabel:'From'，
托拉贝尔：“到”，
customRangeLabel:“自定义”，
星期天：['Su'，'Mo'，'Tu'，'We'，'Th'，'Fr'，'Sa']，
月份名称：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
第一天：1
}
};
$（'.datepicker'）.datepicker（）；
$（'.daterangepicker'）.d
@model EPH.Models.ReportViewerModel
@using EPH.Model.Models;

<link rel="stylesheet" type="text/css" media="all" href="~/Content/daterangepicker-bs3.css" />
<script type="text/javascript" src="~/Scripts/moment.js"></script>
<script type="text/javascript" src="~/Scripts/daterangepicker.js"></script>


@foreach (ReportParameters parameter in Model.Reports.ReportParameters)
{
    <label class="col-md-3 control-label input-sm">@parameter.Prompt</label>
    <div class="form-group form-group-tight">
        <div class="col-md-6">

            @if (parameter.ParamterDataType == ParamDataType.None)
            {
            }
            else if (parameter.ParamterDataType == ParamDataType.String)
            {
                @Html.TextBoxFor(m => parameter.Name)
            }
            else if (parameter.ParamterDataType == ParamDataType.DateTime)
            {
                @Html.TextBoxFor(m => parameter.Name, new { @class = "form-control input-sm datepicker" })
            }
            else if (parameter.ParamterDataType == ParamDataType.DateRange)
            {
                @Html.TextBoxFor(m => parameter.Name, new { @class = "form-control input-sm datepicker" })
            }
            else if (parameter.ParamterDataType == ParamDataType.Integer)
            {
                @Html.TextBoxFor(m => parameter.Name)
            }
            else if (parameter.ParamterDataType == ParamDataType.Boolean)
            {
                @Html.TextBoxFor(m => parameter.Name)
            }
            else if (parameter.ParamterDataType == ParamDataType.Float)
            {
                @Html.TextBoxFor(m => parameter.Name)
            }
            else if (parameter.ParamterDataType == ParamDataType.List)
            {
                if (parameter.Name.Equals("orderStatus"))
                {
                    @Html.DropDownListFor(m => m.ReportId, new SelectList(Model.OrderStatuses, "Id", "Name"),
                        new { @class = "form-control input-sm-select" })
                }
            }
            else if (parameter.ParamterDataType == ParamDataType.IntRange)
            {
                @Html.TextBoxFor(m => parameter.Name)
                @Html.TextBoxFor(m => parameter.Name)
            }
        </div>
    </div>
}

<script>
    var daterangeOptions = {
        startDate: moment().subtract('days', 29),
        endDate: moment(),
        minDate: '01/01/2012',
        maxDate: '12/31/2200',
        dateLimit: { years: 50 },
        showDropdowns: true,
        showWeekNumbers: true,
        timePicker: false,
        timePickerIncrement: 1,
        timePicker12Hour: true,
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
            'Last 7 Days': [moment().subtract('days', 6), moment()],
            'Last 30 Days': [moment().subtract('days', 29), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
        },
        opens: 'left',
        buttonClasses: ['btn btn-info'],
        applyClass: 'btn-small btn-primary',
        cancelClass: 'btn-small',
        format: 'MM/DD/YYYY',
        separator: ' to ',
        locale: {
            applyLabel: 'Submit',
            cancelLabel: 'Clear',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: 'Custom',
            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            firstDay: 1
        }
    };

    $('.datepicker').datepicker();
    $('.daterangepicker').daterangeOptions();

</script>

<script>
    $('#report-selection').change(function () {
        var reportId = $(this).val();
//        alert(reportId)
        $.ajax({
            type: "POST",
            url: '@Url.Action("RefreshReport")',
            traditional: true,
            data: { reportId: reportId },
            success: function (data) {
            }
        });
    });

</script>

<div id="report-controls">
    <div id="report-controls-1></div>
    <div id="report-controls-2></div>
    <div id="report-controls-3></div>
</div>

<script>
    $('#report-selection').change(function () {
        var reportId = $(this).val();
        $("#report-controls div").hide();
        $("#report-controls" + "-" + reportId).show();
    });
</script>