C# 在ajax重新加载时PartialView未正确渲染

我在使用ajax重新加载局部视图时遇到了一个问题

我在局部视图中有我的国家/地区表单，最初当我加载主页时，所有内容都正确呈现

如下图所示，我可以使用我的自动完成功能搜索国家，也可以从组合框中选择一个国家（两者都是剑道mvc控件）

当我从autocomplete中选择一个并尝试通过ajax加载所选国家的信息时，问题就出现了。表单将重新加载，信息将显示，但控件未正确呈现。自动完成停止工作，组合框呈现为普通文本框，显示CountryID而不是国家名称

在我看来，代码

@using (Html.BeginForm("Index", "CountryManagement", FormMethod.Post, new { id = "country-form" }))
{  
    @Html.ValidationSummary(true);
    <div id="form-content">
         @Html.Partial("_CountryForm", Model)
    </div>

}

我的.js文件中的代码

function onChange() {
    
    if ($("#Search").data("handler")) {
        var data = $("#Search").data("handler").dataSource.data();
        var country = data.find(x => x.Designation == $("#Search").val());
        console.log("Country")
        if (country) {
            var request = $.post('/CountryManagement/Edit', { id: country.CountryID });
            request.success(function (data) {
                $("#form-content").html(data);
            });
        }
    }
}

页面加载时生成的HTML代码（仅限自动完成和下拉）

搜索国家




国家
选择

重新加载partialview时生成的HTML代码（仅限自动完成和下拉）

搜索国家




国家

我不确定这是否是ASP.Net MVC partialview、Kendo控件或某些脚本的问题，这些脚本应该在partialview重新加载时重新运行。

---

有人能帮我吗？

在Telerik论坛的最深处进行了无数次失败的尝试和徒劳的挖掘之后，我终于发现了问题所在

部分视图中的剑道小部件不应使用延迟初始化

@(Html.Kendo().AutoCompleteFor(m => m.Search)
                      ///.. code removed to reduce complexity
                      .Events(e => e.Change("onChange")).Deferred()
 )

当视图作为服务器请求加载时，它会正确呈现，因为在布局文件的末尾，所有延迟初始化的小部件都是使用

@Html.Kendo（）.DeferredScripts（）

初始化的。但是，当通过ajax重新加载部分视图时，延迟的脚本初始化不会发生，因为脚本不会重新运行

将

@Html.Kendo（）.DeferredScripts（）

添加到部分视图可以解决ajax重新加载的问题，但在服务器加载时会出现问题，因为：1-延迟初始化将运行两次，2-因为Kendo小部件具有jquery依赖项，并且将在页面中包含jquery脚本之前运行

我找到的解决方案是不取消小部件的初始化，但是这会让我们回到上面关于jquery依赖项的问题。尽管我尽量避免，但唯一有效的方法是在页眉中包含jquery。所有其他脚本（验证、剑道、自定义等）仍然位于底部，但主jquery脚本位于顶部。现在，我的部分视图完全加载到服务器或ajax请求上

TL；博士

不要在局部视图中使用延迟初始化

将jquery.min.js移到页面顶部

---

希望有更好的方法，但目前它确实起到了作用。

所以我搜索了论坛，也找不到合适的修复方法。但我做了以下几点，它似乎工作得很好。基本上，如果部分视图正常呈现，那么布局视图将处理延迟的脚本，但是如果请求是通过AJAX进行的，那么部分视图将继续进行并呈现它们

我把这个放在我的部分文章的底部：

@if (Context.Request.IsAjaxRequest())
{
    <div id="kendo-scripts">
        @Html.Kendo().DeferredScripts()
    </div>
}

@if（Context.Request.IsAjaxRequest（））
{
@Html.Kendo（）.DeferredScripts（）
}

---

仅供参考，请将.Deffered（）保留在剑道对象的末尾，以防出现不明显的错误。

检查页面脚本初始化错误

我在这里遇到了同样的问题，花了3天的时间，问题是在旧版safari浏览器中没有关于NoMutationObserver的页面初始化脚本。在添加polyfill并修复init错误后，使用剑道控件动态注入的ajax内容运行良好，无需延迟。希望这能为其他人省去一些挫折

---

这个init错误影响了jquery对任何ajax内容的就绪初始值设定项回调，Telerik依赖这些内容来呈现它发出的脚本块中的每个控件

你能展示一下调用js的部分吗（视图中的javascript部分？）嗨@RaphaëlAlthaus，我已经从我的部分视图中添加了一些代码。因为我的自动完成是一个剑道mvc控件，所以调用Javascript的部分是自动完成定义的一部分，它绑定到更改事件。事件（e=>e.Change（“onChange”）.Thanks能否在ajax调用后显示生成的部分视图html？可能是这样的：感谢链接，但这不是同一个问题。我的模型绑定工作得很好，并且我得到了数据。但是从您上次的请求中，我注意到服务器负载上生成的html代码确实与生成的html代码不同在ajax重新加载时显示d。大多数不同的似乎是由于缺少一些属性和剑道样式。您在浏览器控制台中看到任何错误吗？这是非常正确的！修复了脚本错误，我已经解决了问题。谢谢

<div class="form-group">
    <label class="control-label col-md-2" for="Search_Country">Search Country</label>
    <div class="col-md-3">
        <span tabindex="-1" role="presentation" class="k-widget k-autocomplete k-header k-state-default k-state-hover"><input data-val="true" data-val-length="Description  must have between 1  and 150 characters" data-val-length-max="150" data-val-length-min="1" id="Search" name="Search" type="text" data-role="autocomplete" class="k-input" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-owns="Search_listbox" aria-autocomplete="list" has-focus="false" style="width: 100%;"><span class="k-icon k-loading" style="display:none"></span></span>
    </div>
</div>
<br>
<br>
<div class="form-group">
    <label class="control-label col-md-2" for="Country">Country</label>
    <div class="col-md-3">
       <span class="k-widget k-combobox k-header"><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input name="CountryID_input" class="k-input" type="text" autocomplete="off" title="" role="combobox" aria-expanded="false" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="CountryID_listbox" has-focus="false" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1" aria-controls="CountryID_listbox">select</span></span></span><input data-val="true" data-val-number="The field CountryID must be a number." id="CountryID" name="CountryID" type="text" value="0" data-role="combobox" aria-disabled="false" aria-readonly="false" has-focus="false" style="display: none;"></span>
        <span class="field-validation-valid text-danger" data-valmsg-for="CountryID" data-valmsg-replace="true"></span>
    </div>
</div>

<div class="form-group">
    <label class="control-label col-md-2" for="Search_Country">Search Country</label>
    <div class="col-md-3">
        <input data-val="true" data-val-length="Description  must have between 1  and 150 characters" data-val-length-max="150" data-val-length-min="1" id="Search" name="Search" type="text" value="South Africa">
    </div>
</div>
<br>
<br>
<div class="form-group">
    <label class="control-label col-md-2" for="Country">Country</label>
    <div class="col-md-3">
       <input data-val="true" data-val-number="The field CountryID must be a number." id="CountryID" name="CountryID" type="text" value="1003">
        <span class="field-validation-valid text-danger" data-valmsg-for="CountryID" data-valmsg-replace="true"></span>
    </div>
</div>

@(Html.Kendo().AutoCompleteFor(m => m.Search)
                      ///.. code removed to reduce complexity
                      .Events(e => e.Change("onChange")).Deferred()
 )

@if (Context.Request.IsAjaxRequest())
{
    <div id="kendo-scripts">
        @Html.Kendo().DeferredScripts()
    </div>
}