How do I add a link action inside a grid/column in MVC using Razor only

Question

I am using Razor grid system to show a listing. I want to make a column as a link action. But my problem is it's showing the link in the font end as raw HTML file. My code is

columns.Add(c => c.Title).Titled("Title").Filterable(true).RenderValueAs(c => Html.ActionLink(c.Title, "Details", new { id = c.Id }));

There fore the output is

I have also used Format() in placement of RenderValueAs() However the result is same. I have studied through from this links.Link1, Link1, Link1, Link1 But no probable solution is found. And I don't want to solve this without any help of javascript or any scripting language. I am looking for only razor related solution. Thank you.

score 1 · Answer 1 · answered Dec 27 '16 at 08:28

1

Never used this grid thing, just write html tag and loop myself, i think it's more in control.

In this case, i think it's RenderValueAs method problem, it maybe decode output.
You can try this RenderValueAs(c => {string tag = generate your link tag string; return Html.Raw(tag);})

if it is not working you can write a extension method on Filterable(), generate MvcHtmlString yourself, it should work.

answered Dec 27 '16 at 08:28

Bucketcode

461
2
13

Yeah.Previously I have generated this table through looping in my recent and ongoing projects. But this is a obsolete project need to modify. So, the requirements are varies. I am not quiet happy with this types of solution. However, I have to. – Ananda G Dec 27 '16 at 08:52

score 1 · Accepted Answer · answered Mar 30 '17 at 07:43

Possibly I got a solution of my own question, I have checked it.

Instead of using columns.Add(c => c.Title).Titled("Title").Filterable(true).RenderValueAs(c=>Html.ActionLink(c.Title, "Details", new { id = c.Id }));

I have used

@{
    var grid = new WebGrid(Model);
}
@grid.GetHtml(
        tableStyle: "webgrid-table",
        headerStyle: "webgrid-header",
        footerStyle: "webgrid-footer",
        alternatingRowStyle: "webgrid-alternating-row",
        selectedRowStyle: "webgrid-selected-row",
        rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All,
        columns:
            grid.Columns(
            grid.Column(columnName: "Student Name", header: "Name", format: @<text>@item.Name</text>),
            grid.Column(columnName: "SchoolName", header: "School Name", format: @<text>@item.SchoolName</text> ),
            grid.Column(columnName: "Address", header: "Address", format: @<text>@item.Address</text>),
            grid.Column(columnName: "City", header: "City", format: @<a>@item.City</a>),
            grid.Column(columnName: "State", header: "State", format: @<text>@item.State</text>)
           ))

Here i have attached <a> on cities. So therefore I am quiet capable of customize the whole grid by myself as same. From reference link i obtained this strategy.

How do I add a link action inside a grid/column in MVC using Razor only

2 Answers2