ajax调用后部分视图变为空答案

【问题标题】：Partial View becomes null after ajax callajax调用后部分视图变为空
【发布时间】：2021-11-11 08:49:01
【问题描述】：

我有一个下拉列表，我在其中获取所有培训师的详细信息。

<select class="form-control" id="selectTrainer" style="width:30%" onchange="getTrainer_New(this)">
<option value="All">All</option>
@foreach (var trainerDetails in ViewBag.datasourceTrainerList)
{
<option value="@trainerDetails.ID">@trainerDetails.Name</option>
}
</select>

现在，当我从 GetTrainer_New() 更改值时，我正在调用 AJAX 调用，它会返回部分视图。但视图返回 null。

function getTrainer_New(selectObject)
{
var values = selectObject.value;
var FilterTagInfo = {};
FilterTagInfo.FilterTagID = "";
FilterTagInfo.Name = "TEST";
FilterTagInfo.TrainerName = document.getElementById("selectTrainer").value;
FilterTagInfo.CategoryID = "MyCategory";

$.ajax({
url: "@Url.Action("FilterTrainerName", "Dashboard")",
data: JSON.stringify(FilterTagInfo),
//type: "POST",
type: "GET",
//dataType: "json",
async: true,
dataType: 'html',
contentType: "application/json; charset=utf-8",
success: function (data) {
// alert("test1" + data.responseText);
$("#dvResultTrainer").html(data.responseText);
//$("#dvResultTrainer").html(data);
},
error: function (data) {
// debugger;
alert("Error" + data);
$("#dvResultTrainer").html(data.responseText);
}
});
 }

这是我的控制器代码

[HttpPost]
public async Task<PartialViewResult> FilterTrainerName([FromBody] FilterTagInfo filterTagInfo)
{
//Fetching the Data works fine after ajax call But View is not updating
ViewBag.FilterTags = finalresult.ToList();
return PartialView("_PartialTrainer",ViewBag.FilterTags);
}

这是我的 DIV，我在其中绑定了 ajax 调用后的数据。

<div id="dvResultTrainer">
@{
await Html.RenderPartialAsync("_PartialTrainer", (List<FilterTagInfo>)ViewBag.FilterTags);
}
</div>

这是我的部分查看代码

<ejs-chiplist id="filterTags" selection="Single" click="Filters">
    <e-chips>
        @foreach (var p in (List<FilterTagInfo>)ViewBag.FilterTags)
        {
            <e-chip text="@p.Name" value="@p.ID" enabled="true"></e-chip>
        }
    </e-chips>
</ejs-chiplist>

【问题讨论】：

标签： ajax model-view-controller asp.net-mvc-5 syncfusion

【解决方案1】：

在您的代码中，我们注意到控制器调用的方法是 HTTP Post，但 AJAX 请求类型为 Get，并且数据和内容类型也不同。请检查返回的结果在您的样本中是否正确。

参考下面代码sn-p：

 <div class="form-group">
        <div class="col-md-12">
            <select class="form-control" id="selectTrainer" style="width:30%" onchange="getTrainer_New(this)">
                <option value="All">All</option>
                @foreach (var trainerDetails in ViewBag.datasourceTrainerList)
                {
                    <option value="@trainerDetails.Code">@trainerDetails.ProductName</option>
                }
            </select>
        </div>
    </div>
<ejs-scripts></ejs-scripts>
<div id="dvResultTrainer">

</div>
<script>

function getTrainer_New(selectObject) {
        var values = selectObject.value;
        var FilterTagInfo = {};
        FilterTagInfo.FilterTagID = "";
        FilterTagInfo.Name = "TEST";
        FilterTagInfo.TrainerName = document.getElementById("selectTrainer").value;
        FilterTagInfo.CategoryID = "MyCategory";
        $.ajax({
            type: "POST",
            async: true,
            data: { value: JSON.stringify(FilterTagInfo) },
            url: "/Home/Features",
            success: function (result) {
            document.getElementById("dvResultTrainer").style.display = "block";
            $('#dvResultTrainer').html(result);
            }
        });

    }
  
</script>

参考示例：

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Chip-1431310655

【讨论】：