locked
Formatting a link in a WebGrid column RRS feed

  • Question

  • User1764167293 posted

    I am creating a table in my view with WebGrid.  One of the columns contains a link.  I get the URL for the link in the controller, put the "A" tag html around it, save in a string in the Model and then add it to the WebGrid column with "format".

    What is the syntax to create the string in the controller that needs to look like "<a href:" + URL + "target=_blank>" + TEXT + "</a>"  when rendered in the WebGrid.

    Thanking you in anticipation.

    Roger

    Thursday, September 17, 2020 9:07 AM

Answers

  • User1686398519 posted

    Hi Roger, 

    You can use Html.Raw to achieve your needs, you can refer to the following example.

    Controller

            public ActionResult Index()
            {
                var urltest = "testurl"; var texttest = "testurl";
                List<WebGirdTestModel> test = new List<WebGirdTestModel> { 
                    new WebGirdTestModel { Id = 1, Url = "<a href=" + urltest + " target=_blank>" + texttest + "</a>" },
                    new WebGirdTestModel { Id = 2, Url = "<a href='testurl' target=_blank>testurl</a>" }
                };
                return View(test);
            }

    View

    @model IEnumerable<DailyMVCDemo2.Models.WebGirdTestModel>
    @{
        var testGrid = new WebGrid(source: Model, defaultSort: "Id", rowsPerPage: 10);
    }
    @testGrid.GetHtml(tableStyle: "table table-hover", headerStyle: "gridhead", alternatingRowStyle: "rowStyle",
        columns:
            testGrid.Columns(
                testGrid.Column("Id", "Id"),
                testGrid.Column("Url", "Url", format: (item) =>{return Html.Raw(item.Url);})
    ))

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 23, 2020 6:31 AM

All replies

  • User1686398519 posted

    Hi Roger, 

    According to your needs, I wrote an example, you can refer to it.

    • There are three ways of writing in the example, you can choose one of them.

    More details, you could refer to below code:

    Model

        public class WebGirdTestModel
        {
            public int Id { get; set; }
            public string Url{ get; set; }
        }

    Controller

        public class WebGirdController : Controller
        {
            public ActionResult Index()
            {
                List<WebGirdTestModel> test = new List<WebGirdTestModel> { 
                    new WebGirdTestModel { Id = 1, Url = "testurl" },
                    new WebGirdTestModel { Id = 2, Url = "testurl" }
                };
                return View(test);
            }
            public ActionResult testurl()
            {
                return View();
            }
        }

    Index

    @model IEnumerable<DailyMVCDemo2.Models.WebGirdTestModel>
    @{
        var testGrid = new WebGrid(source: Model, defaultSort: "Id", rowsPerPage: 10);
    }
    @testGrid.GetHtml(tableStyle: "table table-hover", headerStyle: "gridhead", alternatingRowStyle: "rowStyle",
        columns:
            testGrid.Columns(
                testGrid.Column("Id", "Id"),
                testGrid.Column("Url", "Url", format: @<a href="@Url.Action(@item.Url)">@item.Url</a>),
                testGrid.Column(format:@<text> @Html.ActionLink((string)@item.Url, (string)@item.Url)</text>),
                testGrid.Column(format: (item) => @Html.ActionLink((string)@item.Url, (string)@item.Url))
    ))

    Here is the result.

    Best Regards,

    YihuiSun

    Friday, September 18, 2020 8:27 AM
  • User1764167293 posted

    Thanks, YihuiSun.

    In some rows, there is no link so I need to add the Html "<a href....</a>" to the string in the controller otherwise, when there is no link the page gives an accessibility error.

    How would I do that?

    Roger

    Friday, September 18, 2020 10:09 AM
  • User1686398519 posted

    Hi Roger, 

    You can use Html.Raw to achieve your needs, you can refer to the following example.

    Controller

            public ActionResult Index()
            {
                var urltest = "testurl"; var texttest = "testurl";
                List<WebGirdTestModel> test = new List<WebGirdTestModel> { 
                    new WebGirdTestModel { Id = 1, Url = "<a href=" + urltest + " target=_blank>" + texttest + "</a>" },
                    new WebGirdTestModel { Id = 2, Url = "<a href='testurl' target=_blank>testurl</a>" }
                };
                return View(test);
            }

    View

    @model IEnumerable<DailyMVCDemo2.Models.WebGirdTestModel>
    @{
        var testGrid = new WebGrid(source: Model, defaultSort: "Id", rowsPerPage: 10);
    }
    @testGrid.GetHtml(tableStyle: "table table-hover", headerStyle: "gridhead", alternatingRowStyle: "rowStyle",
        columns:
            testGrid.Columns(
                testGrid.Column("Id", "Id"),
                testGrid.Column("Url", "Url", format: (item) =>{return Html.Raw(item.Url);})
    ))

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 23, 2020 6:31 AM