How to use image button in ASP.NET MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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

  
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:

How to use image button in ASP.NET MVC






What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon