Question

我有一个局部视图＆＃34; _SearchPanel＆＃34;有年份列表下拉列表，类多选控制，（其他一些下拉 - 省略）和搜索按钮。

我希望当我在年份列表下拉列表中更改选择时，只刷新/更新我的班级列表，而不是页面上的整个局部视图。

所以我在控制器中使用JsonResult操作（而不是第一次加载）

 public JsonResult BindClasses(int yearId)
    {
        ClassRepository repClass = new ClassRepository("name=ge");
        YearRepository repYear = new YearRepository("name=ge");

        var dataClass = repClass.GetClassesByYear(yearId);
        var groupedClassOptions = dataClass.GroupBy(x => x.grade).Select(x => new OptionGroupVM()
        {
            GroupName = "Grade " + x.Key.ToString(),
            Options = x.Select(y => new OptionVM()
            {
                Value = y.classID.ToString(),
                Text = y.classname
            })
        });



        return Json(groupedClassOptions);


    }

我的 javascript

var dropDownYear = $('#ddlYear');
    dropDownYear.change(function(){
        $("#classList").load(url, {yearId: $(this).val()}, function(result){

            setOptions($('#classList'), @Html.Raw(Json.Encode(new List<int>(){})), result);
        });

    });

现在问题是结果不被视为对象，这是第一次（onpageload）：

jQuery(function ($) {
   setOptions($('#classList'), @Html.Raw(Json.Encode(Model.SelectedClasses)), @Html.Raw(Json.Encode(Model.ClassOptions)));
 }

如何更正/转换它以被视为Model.ClassOptions（类型：GroupOptionsVM List）对象而不是Json

我尝试了什么

    var url = '@Url.Action("BindClasses", "Maps")';
    var dropDownYear = $('#ddlYear');
    dropDownYear.change(function(){
        $("#classList").load(url, {yearId: $(this).val()}, function(result){
            @{var x = new List<OptionGroupVM>();}
            x = result;
            setOptions($('#classList'), @Html.Raw(Json.Encode(new List<int>(){})), x);

        });

    });

这给了我一些语法错误!!

更新

[参考上一个问题斯蒂芬在评论中链接] 由于我必须为两个下拉列表执行此操作，但我在脚本中创建了setOptions函数

function setOptions(listBox, selected, groups) {

    // Generate options
    createGroupedOptions(listBox, selected, groups);

    // Attach plug-in
    listBox.multiselect({ enableClickableOptGroups: true, onChange: function(){
        var selectedClassItems = this.$select.val();

    } });



}

function createGroupedOptions(element, selected, groups) {

    for (var i = 0; i < groups.length; i++) {
        var group = groups[i];
        var groupElement = $('<optgroup></optgroup>').attr('label', group.GroupName);
        for (var j = 0; j < group.Options.length; j++) {
            var option = group.Options[j];
            var optionElement = $('<option></option>').val(option.Value).text(option.Text);
            if (selected) {
                if (selected.toString().indexOf(option.Value) >= 0) {
                    optionElement.attr('selected', 'selected')
                }
            } else {
                if (option.IsSelected) {
                    optionElement.attr('selected', 'selected')
                }
            }

            $(groupElement).append(optionElement);
        }
        $(element).append(groupElement);
    }

}

调用setOptions函数

setOptions($('#classList'), @Html.Raw(Json.Encode(Model.SelectedClasses)), @Html.Raw(Json.Encode(Model.ClassOptions)));
    setOptions($('#indicatorList'), @Html.Raw(Json.Encode(Model.SelectedIndicators)), @Html.Raw(Json.Encode(Model.IndicatorOptions)));

Answer 1

你返回的json，所以使用this.addEventListener(MouseEvent.CLICK, clickEvent); function clickEvent(event: MouseEvent): void { Object(root).mytextfield.text = String(123); // Absolute }是没有意义的（当你的调用方法返回局部视图时，你通常会使用它。）

根据您的方法返回的数据更改脚本以创建.load()和<optgroup>元素

<option>

请注意，生成元素的代码的详细信息位于previous question

的答案中

Answer 2

您正在尝试将客户端代码（jQuery）与服务器端代码（.NET）混合使用，但它无法正常工作。 @ Html.Raw和JsonEncode是服务器端方法。页面加载后无法使用它们。

实质上，您需要使用jQuery进行所有页面交互，并在客户端管理页面状态或使用完整的MVC（回发）并在服务器上执行所有操作。

技术上还有其他选择，但我只是想解决你到目前为止所尝试的基本问题。

剃刀 - 将Json结果从控制器转换为复杂对象

2 个答案: