ASP.Net Core MVC보기에서 ViewComponent 새로 고침

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. ViewComponent :

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. 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> 
}

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>
    }
}

결과: