CODEWITHSUNDEEP
asp.netasp.net-core.net-coreasp.net-core-2.0asp.net-core-viewcomponent
Ryan
Ryan

Reputation: 544

How to pass csHtml to ViewComponent in .Net Core MVC?

I would like to pass csHtml to a ViewComponent like this:

<vc:some-component title="Title" 
body="@Html.Raw("<div>this is a nice div, my name is @Model.Name</div>")">
</vc:some-component>

As you can see, I want to pass HTML that contains references to variables or the model (that's why I'm calling it csHtml and not just Html).

And here is the ViewComponent code:

<div>
    <p>@Model.Title</p>
    @Model.Content
</div>

Is this even possible? I've been searching and haven't found any examples of how to do this.

Edit: Got it working! Thanks everyone for your help.

Here is some sample code for how to do this:

Calling ViewComponent:

@{
    Func<dynamic, object> children =
    @<div>
        <p style="color: white">aaaa</p>
        <p style="color: white">bbbb</p>
        <p style="color: white">bbbb</p>
    </div>;
}

<vc:some-component body=@children>
</vc:some-component>

View Component content:

@model SomeComponentModel

<div>
    @Model.Body("")
</div>

Upvotes: 5

Views: 1696

Answers (2)

Zephire
Zephire

Reputation: 394

You should be able to add the parameters to the ViewComponent and pass them along towards the ViewComponent view itself as you go.

<vc:some-component title="Title" 
body="@Html.Raw("<div>this is a nice div, my name is @Model.Name</div>")">
</vc:some-component>

or something similar to this

 @await Component.InvokeAsync("SomeComponent", new { title="Title", body= Html.Raw($"<div>this is a nice div, my name is {Model.Name}</div>") })

Your viewcomponent IViewComponentResult would look something like this, using ViewBag just as example

public async Task<IViewComponentResult> InvokeAsync(string title, string body)
{
    //...
    ViewBag.Content = body;
    ViewBag.Title = title;
    //...
    return View();
}

And then in the related ViewComponent View

<div>
    <p>@ViewBag.Title</p>
    @ViewBag.Content
</div>

Creating a more specific ViewModel to pass along would also be an option ofcourse

Upvotes: 3

Albondi
Albondi

Reputation: 1151

Yes it is possible, you have to make a workaround but it is achievable,this answer has an example of what you are looking for.

Upvotes: 1

Related Questions