How to use image button in ASP.NET MVC | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF 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






Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget