刷新 ASP.Net Core MVC 视图中的 ViewComponent

Question

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

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

我添加了两个复选框，如下所示：

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

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，如下所示：

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

EventsViewComponent 中的 InvokeAsync 方法受到攻击，EventsController 中的 ReloadEvents 方法也受到攻击，但我显然误解了某些内容，因为我似乎无法更新 EventsViewComponent。

请有人建议这是否可能以及如何实现它？

Answer 1

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

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.视图组件：

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();
    }
}

3.控制器：

public class HomeController : Controller
{

    public IActionResult ReloadEvents(bool showPrevious, bool showUpcoming)
    {
        return ViewComponent("Events", new { showPrevious = showPrevious, showUpcoming = showUpcoming });
    }
    public IActionResult Index()
    {
        var model = new Event() { ShowPrevious = true, ShowUpcoming = true };
        return View(model);
    }
}

4.索引.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> 
}

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

@model Event
@{
    List<Event> events = ViewData["Events"] as List<Event>;
    if (events.Count > 0)
    {
        <table>
            <tr>
                <th>ShowPrevious</th>
                <th>ShowUpcoming</th>
                <th>Data</th>
            </tr>
            <tbody>
                @foreach (var item in events)
                {
                    <tr>
                        <td>@item.ShowPrevious</td>
                        <td>@item.ShowUpcoming</td>
                        <td>@item.Data</td>
                    </tr>
                }

            </tbody>
        </table>
    }
}

结果：