如何在jquery中将模型设置为局部视图?

时间:2016-03-24 17:41:41

标签: jquery asp.net-mvc kendo-ui asp.net-mvc-partialview

我们有一个带模型绑定的MVC Partial视图。模型具有各种属性,包括List。部分视图具有通过模型列表循环的挖空数据绑定。部分视图有一个下拉列表。

在下拉列表中选择了索引更改事件,我们需要刷新部分视图模型,因为模型中的列表将被刷新。

在下拉列表选择上调用ajax调用时,会触发控制器方法。

当尝试在控制器方法中呈现局部视图时,列表属性数据将使用完整的页面HTML进行设置。

我会尽快粘贴代码。

我认为的一种方法是将结果的数据类型设置为JSON,控制器方法将模型作为JSON结果返回。在ajax调用成功部分中,使用knockout映射将JSON映射到viewmodel。我想知道是否可以在success方法中设置局部视图的模型。

请帮助我。我需要刷新局部视图。提前致谢

代码:

Partialview中的下拉列表:

<div id="divRequirement2" class="autocompletesection">

        @(Html.Kendo().ComboBox()
                          .Name("cmbQuestionText")
                          .Placeholder("Start typing a Question...")
                          .DataTextField("QuestionText")
                          .DataValueField("AuditChecklistMasterDataId")
                          .DataSource(source =>
                          {
                              source.Read(read =>
                              {
                                  read.Action("GetRequirementDetails", "AuditDetails");
                              });
                           })
                           .HtmlAttributes(new { style = "width: 100%;" })
                           .Filter("contains")
                           .MinLength(0)
                           .Height(370)
                           .Template("<span class=\"k-state-default\">#: data.QuestionText #</span>")

            .Events(e =>
            {
                e.Change("onInvReqChange");
            })
        )

            </div>

关于ddl选择:

function onInvReqChange(e) {
    var combo = e.sender;

    //  var suppCombo = $('#suppliers');
    if (combo.value() && combo.select() === -1) {
        combo.value("");
        //selfSupplier.AuditViewModel.FactoryList(null);

        return;
    }
    var newVal = combo.value();
    //alert(newVal);
    selfSupplier.LoadInvQuestion(self.InvestigationViewModel);
}

Ajax调用ddl选择:

$.ajax({
        url: '/[Controller]/[Method]',
        type: 'post',
        dataType: 'html',
        headers: headers,
        data: ko.mapping.toJSON(self.InvestigationViewModel),
        contentType: 'application/json',
        success: function (result) {
            ko.mapping.fromJS(result.InvestigationList, {}, self.InvestigationViewModel.InvestigationList);
            ko.mapping.fromJS(result.LRDetailsList, {}, self.InvestigationViewModel.LRDetailsList);

            if (result == "") {
                $('#accordion1').html("<div class='row valSummBox' style='padding: 8px 0px 8px 8px;'><div id='noresult' class='errMsg'>No records found with given search criteria.</div></div>");
                $('#pop_up').css('display', 'none');
                ;
            }
            else {


                $("#accordion1").html(result);
                $("#cmbQuestionText").data("kendoComboBox").value($("#hdf_Id").val());
                $("#txtInvQuestion").val($("#hdf_AllegText").val());
                $('#pop_up').css('display', 'none');

                //$('#accordion1').load(url);
                //$("#accordionconfirm").hide();
            }
        },
        error: function (err) {
            $("input[type=button], input[type=submit]").removeAttr('disabled');
            $('#pop_up').css('display', 'none');
            $("#ermsg").html('<div class="errMsg">' + extractError(err) + '</div>').show();
            var scrollPos = $("#ermsg").first().offset().top;
            $(window).scrollTop(scrollPos);
            return;
        }
    });

在行动中:

return PartialView("_SelectInvChecklist", objAuditDetails);

在局部视图中:

<div id="accordion" class="customaccordion">
        <table class="tbl-unclosedNC table" id="tblSelectNC">
            <thead>

                <tr>
                    <th>Is this question linked to Checklist Questions?</th>
                    <th>Question ID</th>                        
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.InvestigationList)
                {
                    <tr>
                        <td>@item.LinkedToChecklist</td>
                        <td>@item.AuditRequirementTopic</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

在附加的代码中,我们通过Knockout数据绑定foreach逻辑循环。由于它没有锻炼,模型的“InvestigationList”具有完整的页面HTML,我们使用了Razor循环。

我注意到的另一件事是,这在页面加载时工作正常。但部分视图加载后的任何操作以及下拉选择和数据重新绑定等任何操作都已完成,敲除绑定都已消失。

0 个答案:

没有答案