How to use image button in ASP.NET MVC

In this this article I am going to explain how to use image button in asp.net MVC

In previous article I have explained how to export data to CSVfile using Asp.net MVC, how to export data to PDF file in asp.net MVC and howto export data to Excel file in asp.net MVC.

  

Description:

I want to use image button instead of ActionLink, button and url action. 

 Implementation:

We have to pass both Action and controller name.

Example of Button:

@using (Html.BeginForm("ExportToExcel", "ExportExcel", FormMethod.Post))

{

    <button class="btn">

        <img src="@Url.Content("~/images/Export-excel.png")" />

    </button>

}

Example of URL action:

<a href="@Url.Action("ExportToPDF", "ExportExcel")">

    <img src="@Url.Content("~/images/pdf-button.png")" />

</a>

Example of Action link:

In URL action we have to pass button name, action and then controller name.

@Html.ActionLink("btnExportCSV", "ExportToCSV", "ExportExcel", new { @class = "btnexport" })

Complete Source of View

    <table>

                              <tr>

                                  <td>@using (Html.BeginForm("ExportToExcel", "ExportExcel", FormMethod.Post))

{

    <button class="btn">

        <img src="@Url.Content("~/images/Export-excel.png")" />

    </button>

}</td>

                                  <td><a href="@Url.Action("ExportToPDF", "ExportExcel")">

    <img src="@Url.Content("~/images/pdf-button.png")" />

</a></td>

                                  <td>@Html.ActionLink("btnbexportCSV", "ExportToCSV", "ExportExcel", new { @class = "btnexport" })</td>

                              </tr>

                          </table>

<style>

    .btn {

        border: none;

        background: transparent;

    }

    .content {

        min-height: 550px;

    }

    a.btnexport {

        background: url(../images/export-csv.jpg) no-repeat;

        display: block;

        width: 150px;

        height: 45px;

        text-indent: -9999px;

    }

</style>

 Output: