ajax调用后部分视图变为空

Posted 2023-03-27

【中文标题】ajax调用后部分视图变为空

【英文标题】：Partial View becomes null after ajax call

【发布时间】：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>

【参考方案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