Equivalent of Html.RenderAction in ASP.NET Core

Question

I am trying to switch to ASP.NET Core from my small ASP.NET MVC 4 application.

In my MVC 4 application, I have a Layout file that uses RenderSection as:

@RenderSection("xyz", required: false)

Then, in my Index file, I have:

@section xyz{
        @{Html.RenderAction("abc");}
    }

So, I am calling controller action method abc() from Index. The method abc() passes a model object and returns a partial view with that model. I cannot use RenderPartial as it needs a model to be passed.

Now, in ASP.NET Core, I don't have RenderAction() method.

My question is: How would I invoke a controller action method from my Index file? Is there any other HTML helper for that (although I don't see any)?

.

Answer 1

I was finally able to do it with ViewComponent. So, instead of RenderAction(), I did:

@section xyz{
        @await Component.InvokeAsync("abc")
    }

Where abc is a class as abcViewComponent. The ViewComponent looks like:

public class abcViewComponent : ViewComponent
    {
        private DbContextOptions<MyContext> db = new DbContextOptions<MyContext>();
        public async Task<IViewComponentResult> InvokeAsync()
        {
            MyContext context = new MyContext(db);
            IEnumerable<tableRowClass> mc = await context.tableRows.ToListAsync();
            return View(mc);
        }
    }

Then, I created a view under a new folder 'abc' as Views/Home/Components/abc/Default.cshtml

It is to be noted that the view name is Default.cshtml and that is how it worked. If anyone has any better solution, please let me know.

Thanks for pointing me in the direction of ViewComponent.

Answer 2

There is a workaround, you could use the Url.Action + JQuery to render the content.

The view where you want to render the action will look like this :

<div id="dynamicContentContainer"></div>
<script>   
    $.get('@Url.Action("GetData", "Home")', {id : 1}, function(content){
            $("#dynamicContentContainer").html(content);
        });
</script>

The Home controller :

[HttpGet]
public IActionResult GetData(int id)
{
   return PartialView(id);
}

The view

@model int 
<span>Values from controler :</span> @Model

If you want more control over the request you can read here more information : jQuery.get()

Answer 3

Just for completion of the above question, it is probably safer to pass the name of the ViewComponent class as shown below:

@section xyz{
    @await Component.InvokeAsync(nameof(yournamespace.abc))
}

and although it is common to use "Default" as the resulting view, you can also return the view name if that differs from default:

public class abcViewComponent : ViewComponent
{
    private DbContextOptions<MyContext> db = new DbContextOptions<MyContext>();
    public async Task<IViewComponentResult> InvokeAsync()
    {
        MyContext context = new MyContext(db);
        IEnumerable<tableRowClass> mc = await context.tableRows.ToListAsync();
        return View("YourViewName", mc);
    }
}