Html.Action Посилання як кнопка чи зображення, а не посилання

В останньому (RC1) випуску ASP.NET MVC, як я можу Html.ActionLink відображати як кнопку чи зображення замість посилання?

Запізнення на відповідь, але ви можете просто простий і застосувати клас CSS до об’єкта htmlAttributes.

<%= Html.ActionLink("Button Name", "Index", null, new { @class="classname" }) %>

а потім створіть клас у своїй таблиці стилів

a.classname
{
    background: url(../Images/image.gif) no-repeat top left;
     display: block;
     width: 150px;
     height: 150px;
     text-indent: -9999px; /* hides the link text */
}

Мені подобається використовувати Url.Action () та Url.Content () так:

<a href='@Url.Action("MyAction", "MyController")'>
    <img src='@Url.Content("~/Content/Images/MyLinkImage.png")' />
</a>

Строго кажучи, Url.Content потрібен лише для проходження маршруту, насправді не є частиною відповіді на ваше запитання.

Завдяки @BrianLegg за вказівку, що для цього слід використовувати новий синтаксис подання Razor. Приклад оновлено відповідно.

Позичивши відповідь Патріка, я виявив, що мені це потрібно зробити:

<button onclick="location.href='@Url.Action("Index", "Users")';return false;">Cancel</button>

щоб не викликати метод публікації форми.

Зателефонуйте мені спрощено, але я просто роблю:

<a href="<%: Url.Action("ActionName", "ControllerName") %>">
    <button>Button Text</button>
</a>

А ви просто подбаєте про висвітлення гіперпосилання. Нашим користувачам це подобається :)

Використовуючи завантажувальний інструмент, це найкоротший і найпростіший підхід для створення посилання на дію контролера, який відображається як динамічна кнопка:

<a href='@Url.Action("Action", "Controller")' class="btn btn-primary">Click Me</a>

Або використовувати помічники Html:

@Html.ActionLink("Click Me", "Action", "Controller", new { @class = "btn btn-primary" })

Просто просто:

<button onclick="@Url.Action("index", "Family", new {familyid = Model.FamilyID })">Cancel</button>

Пізня відповідь, але саме так я перетворюю кнопку ActionLink на кнопку. Ми використовуємо Bootstrap у нашому проекті, оскільки це робить його зручним. Не забувайте про @T, оскільки його використовує лише перекладач.

@Html.Actionlink("Some_button_text", "ActionMethod", "Controller", "Optional parameter", "html_code_you_want_to_apply_to_the_actionlink");

Наведене вище дає таке посилання, і це виглядає як на малюнку нижче:

localhost:XXXXX/Firms/AddAffiliation/F0500

На мою думку:

@using (Html.BeginForm())
{
<div class="section-header">
    <div class="title">
        @T("Admin.Users.Users")
    </div>
    <div class="addAffiliation">
        <p />
        @Html.ActionLink("" + @T("Admin.Users.AddAffiliation"), "AddAffiliation", "Firms", new { id = (string)@WorkContext.CurrentFirm.ExternalId }, new { @class="btn btn-primary" })
    </div>
</div>

}

Сподіваюся, що це комусь допоможе

якщо ви не хочете використовувати посилання, використовуйте кнопку. Ви також можете додати зображення до кнопки:

<button type="button" onclick="location.href='@Url.Action("Create", "Company")'" >
   Create New
   <img alt="New" title="New" src="~/Images/Button/plus.png">
</button>

type = "кнопка" виконує вашу дію замість надсилання форми.

Ви не можете цього зробити Html.ActionLink. Ви повинні використовувати Url.RouteUrlта використовувати URL для побудови потрібного елемента.

<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>

Простий спосіб зробити ваш Html.ActionLink в кнопку (поки у вас підключений BootStrap - який ви, мабуть, є) такий:

@Html.ActionLink("Button text", "ActionName", "ControllerName", new { @class = "btn btn-primary" })

Ще пізніша відповідь, але я просто зіткнувся з подібною проблемою і закінчив написання власного розширення Image Image HtmlHelper .

Ви можете знайти її реалізацію в моєму блозі за посиланням вище.

Просто додається на випадок, якщо хтось знижує реалізацію.

<li><a href="@Url.Action(  "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>

Відображення піктограми із посиланням

Виконайте те, що каже Мегрдад, - або використовуйте помічник URL-адреси з HtmlHelperметоду розширення, як описаний тут Стівен Уолтер, і зробіть власний метод розширення, який можна використовувати для рендерингу всіх ваших посилань.

Тоді можна буде легко надати всі посилання у вигляді кнопок / якорів або залежно від того, що вам зручніше - і, що найголовніше, ви зможете змінити свою думку пізніше, коли дізнаєтесь, що насправді віддаєте перевагу іншому способу створення ваших посилань.

ви можете створити власний метод розширення.
Погляньте на мою реалізацію

public static class HtmlHelperExtensions
{
    public static MvcHtmlString ActionImage(this HtmlHelper html, string action, object routeValues, string imagePath, string alt, object htmlAttributesForAnchor, object htmlAttributesForImage)
    {
        var url = new UrlHelper(html.ViewContext.RequestContext);

        // build the <img> tag
        var imgBuilder = new TagBuilder("img");
        imgBuilder.MergeAttribute("src", url.Content(imagePath));
        imgBuilder.MergeAttribute("alt", alt);
        imgBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributesForImage));
        string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

        // build the <a> tag
        var anchorBuilder = new TagBuilder("a");
        anchorBuilder.MergeAttribute("href", action != null ? url.Action(action, routeValues) : "#");
        anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside
        anchorBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributesForAnchor));

        string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);
        return MvcHtmlString.Create(anchorHtml);
    }
}

потім використовуйте його на ваш погляд, подивіться на мій дзвінок

 @Html.ActionImage(null, null, "../../Content/img/Button-Delete-icon.png", Resource_en.Delete,
               new{//htmlAttributesForAnchor
                   href = "#",
                   data_toggle = "modal",
                   data_target = "#confirm-delete",
                   data_id = user.ID,
                   data_name = user.Name,
                   data_usertype = user.UserTypeID
               }, new{ style = "margin-top: 24px"}//htmlAttributesForImage
                    )

Для Material Design Lite та MVC:

<a class="mdl-navigation__link" href='@Url.Action("MyAction", "MyController")'>Link Name</a>

@using (Html.BeginForm("DeleteMember", "Member", new { id = Model.MemberID }))
    {
        <input type="submit" value="Delete Member" onclick = "return confirm('Are you sure you want to delete the member?');" />
    }

Здається, існує маса рішень, як створити посилання, яке відображатиметься як зображення, але жодне, що робить його кнопкою.

Є лише хороший спосіб, який я знайшов для цього. Це трохи хакі, але це працює.

Що вам потрібно зробити, це створити кнопку та окреме посилання дій. Зробіть посилання дії невидимим за допомогою css. Коли ви натискаєте кнопку, вона може запустити подію натискання посилання дії.

<input type="button" value="Search" onclick="Search()" />
 @Ajax.ActionLink("Search", "ActionName", null, new AjaxOptions {}, new { id = "SearchLink", style="display:none;" })

function Search(){
    $("#SearchLink").click();
 }

Можливо, це болить поперек щоразу, коли ви додаєте посилання, яке має бути схожим на кнопку, але це досягає бажаного результату.

використовувати ФОРМУВАННЯ

<input type="submit" value="Delete" formaction="@Url.Action("Delete", new { id = Model.Id })" />

Щойно знайшли це розширення, щоб зробити це - просте та ефективне.

Те, що я це зробив, полягає в тому, щоб діяти посилання і зображення окремо. Встановіть зображення посилання на дію як приховане, а потім додайте виклик тригера jQuery. Це більше рішення.

'<%= Html.ActionLink("Button Name", "Index", null, new { @class="yourclassname" }) %>'
<img id="yourImage" src="myImage.jpg" />

Приклад тригера:

$("#yourImage").click(function () {
  $('.yourclassname').trigger('click');
});

Url.Action()отримає вам голою URL-адресою для більшості перевантажень Html.ActionLink, але я думаю, що URL-from-lambdaфункціонал доступний лише до Html.ActionLinkцих пір. Сподіваємось, вони додадуть подібного перевантаження Url.Actionв якийсь момент.

Ось як я це зробив без сценаріїв:

@using (Html.BeginForm("Action", "Controller", FormMethod.Get))
{
    <button type="submit" 
            class="btn btn-default" 
            title="Action description">Button Label</button>
}

Те саме, але з діалогом параметрів та підтвердження:

@using (Html.BeginForm("Action", "Controller", 
        new { paramName = paramValue }, 
        FormMethod.Get, 
        new { onsubmit = "return confirm('Are you sure?');" }))
{
    <button type="submit" 
            class="btn btn-default" 
            title="Action description">Button Label</button>
}