Javascript 在ASP.Net核心MVC视图中刷新ViewComponent_Javascript_Asp.net Mvc_Asp.net Core_Asp.net Core Viewcomponent

Javascript 在ASP.Net核心MVC视图中刷新ViewComponent

javascript asp.net-mvc asp.net-core

Javascript 在ASP.Net核心MVC视图中刷新ViewComponent,javascript,asp.net-mvc,asp.net-core,asp.net-core-viewcomponent,Javascript,Asp.net Mvc,Asp.net Core,Asp.net Core Viewcomponent,我有一个视图组件EventsViewComponent，它使用以下代码行加载到我的Events view index.cshtml中： <div id="events"> @await Component.InvokeAsync("Events", new { showPrevious = Model.ShowPrevious, showUpcoming = Model.ShowUpcoming }) </div> ReloadEvents（）引用了一个Java

我有一个视图组件EventsViewComponent，它使用以下代码行加载到我的Events view index.cshtml中：

<div id="events">
    @await Component.InvokeAsync("Events", new { showPrevious = Model.ShowPrevious, showUpcoming = Model.ShowUpcoming })
</div>

ReloadEvents（）引用了一个Javascript函数，我希望在该函数中使用Ajax调用刷新EventsViewComponent，如下所示：

function ReloadEvents() {
    $.ajax({
        url: '@Url.Action("ReloadEvents", "Events")',
        data: {
            showPrevious: document.getElementById("cbShowPrevious").checked,
            showUpcoming: document.getElementById("cbShowUpcoming").checked
        },
        success: DoThis()
    })
}

function DoThis() {
    const eventsDiv = document.getElementById('events');
    eventsDic.innerHTML = //HTML from EventsViewComponent
}

但我似乎无法从EventsViewComponent获取HTML

我为EventsViewComponent编写了Default.cshtml，如下所示：

@Html.CheckBoxFor(m => m.ShowPrevious, new { id = "cbShowPrevious", onchange = "ReloadEvents()" })
@Html.CheckBoxFor(m => m.ShowUpcoming, new { id = "cbShowUpcoming", onchange = "ReloadEvents()" })

@{
    List<Event> events = ViewData["Events"] as List<Event>;
    if (events.Count > 0)
    {
        <table>
            //event data from the model
        </table>
    }
}

@{
列表事件=查看数据[“事件”]作为列表；
如果（events.Count>0）
{
//来自模型的事件数据
}
}

EventsViewComponent中的InvokeAsync方法被命中，EventsController中的ReloadEvents方法也被命中，但我显然误解了一些事情，因为我似乎无法更新EventsViewComponent

请有人告诉我这是否可行，以及如何实现它？

要从EventsViewComponent获取HTML，您需要进行如下更改：

success: function (data) {
        $("#events").html(data);
}

下面是一个完整的工作演示，如下所示：

success: function (data) {
        $("#events").html(data);
}

1.型号：

public class Event
{
    public bool ShowPrevious { get; set; }
    public bool ShowUpcoming { get; set; }
    public string Data { get; set; }
}

2.2.2组件：

public class EventsViewComponent : ViewComponent
{
    List<Event> data = new List<Event>() {
        new Event(){ ShowPrevious=true,ShowUpcoming=false,Data="aaa"},
        new Event(){ ShowPrevious=false,ShowUpcoming=true,Data="bbb"},
        new Event(){ ShowPrevious=false,ShowUpcoming=true,Data="ccc"},
    };
    public IViewComponentResult Invoke(bool showPrevious,bool showUpcoming)
    {
        if (showPrevious == true && showUpcoming == true)
        {
            ViewData["Events"] = data;
        }
        else if (showPrevious)
        {
            ViewData["Events"] = data.Where(u => u.ShowPrevious == true).ToList();
        }
        else if(showUpcoming)
        {
            ViewData["Events"] = data.Where(u => u.ShowUpcoming == true).ToList();
        }
        return View();
    }
}

4.Index.cshtml：

@model Event
@Html.CheckBoxFor(m => m.ShowPrevious, new { id = "cbShowPrevious", onchange = "ReloadEvents()" })
@Html.CheckBoxFor(m => m.ShowUpcoming, new { id = "cbShowUpcoming", onchange = "ReloadEvents()" })
<div id="events">
    @await Component.InvokeAsync("Events", new { showPrevious = Model.ShowPrevious, showUpcoming = Model.ShowUpcoming })
</div>

@section Scripts
{
<script>
    function ReloadEvents() {
        $.ajax({
        url: '@Url.Action("ReloadEvents", "Home")',
        data: {
        showPrevious: document.getElementById("cbShowPrevious").checked,
        showUpcoming: document.getElementById("cbShowUpcoming").checked
            },
            success: function (data) {
                $("#events").html(data);
            }
        })
} 
</script> 
}

@model事件
@CheckBoxFor（m=>m.ShowPrevious，new{id=“cbShowPrevious”，onchange=“ReloadEvents（）”}）
@CheckBoxFor（m=>m.showOccoming，new{id=“cbshowOccoming”，onchange=“ReloadEvents（）”}）
@wait Component.InvokeAsync（“事件”，新的{showPrevious=Model.showPrevious，showUncoming=Model.showUncoming}）
@节脚本
{
函数重载事件（）{
$.ajax({
url:'@url.Action（“重新加载事件”，“主页”），
数据：{
showPrevious:document.getElementById（“cbShowPrevious”）。已选中，
showUncoming:document.getElementById（“CBshowUncoming”）。已选中
},
成功：功能（数据）{
$（“#事件”）.html（数据）；
}
})
} 
}

5.Default.cshtml（视图组件Razor视图）：

@model事件
@{
列表事件=查看数据[“事件”]作为列表；
如果（events.Count>0）
{
上映
展示即将到来
资料
@foreach（事件中的变量项）
{
@item.ShowPrevious
@项目1.1即将推出
@项目.数据
}
}
}

结果: