HTML.ActionLink كزر أو صورة، وليس رابط

https://stackoverflow.com/questions/596444

09-09-2019
|

سؤال

في أحدث (RC1) إصدار ASP.NET MVC، كيف يمكنني الحصول على HTML.ActionLink لتقديم زر كزر أو صورة بدلا من الرابط؟

المحلول

الاستجابة المتأخرة ولكن يمكنك فقط الاحتفاظ بها بسيطة وتطبيق فئة CSS على كائن HTMLATTRIBICES.

<%= 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 مطلوب فقط للمرحين ليس حقا جزءا من الإجابة على سؤالك.

بفضل Rebianlegg من أجل الإشارة إلى أن هذا يجب أن يستخدم بناء جملة عرض Razor الجديد. تم تحديث المثال وفقا لذلك.

الاقتراض من إجابة باتريك، لقد وجدت أنني اضطررت للقيام بذلك:

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

لتجنب استدعاء طريقة وظيفة النموذج.

اتصل بي التبسيط، لكنني أفعل فقط:

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

وأنت تعتني بتسلط الضوء على الارتباط التشعبي. مستخدمونا يحبون ذلك :)

فقط ببساطة :

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

إجابة متأخرة ولكن هذه هي الطريقة التي أجعلها ActionLink في زر. نحن نستخدم bootstrap في مشروعنا لأنه يجعلها مريحة. لا تمانع أبدا في تي منذ مترجمها الوحيد الذي نستخدمه.

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

ما سبق يعطي رابطا مثل هذا ويبدو أنه الصورة أدناه:

localhost:XXXXX/Firms/AddAffiliation/F0500

picture demonstrating button with bootstrap

من وجهة نظري:

@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>

اكتب = "زر" يؤدي عملك بدلا من تقديم النموذج.

لا يمكنك القيام بذلك مع Html.ActionLink. وبعد يجب عليك استخدامها Url.RouteUrl واستخدم عنوان URL لبناء العنصر الذي تريده.

باستخدام Bootstrap هذا هو أقصر ونظافة النهج لإنشاء رابط إلى إجراء وحدة تحكم يظهر كزر ديناميكي:

<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="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>

حتى الاستجابة اللاحقة، لكنني ركضت للتو مسألة مماثلة وانتهت بكتابة كتابتي صورة رابط HTMLHELPER تمديد.

يمكنك العثور على تنفيذها على مدونتي في الرابط أعلاه.

إضافة فقط في حالة وجود شخص يصطاد التنفيذ.

طريقة بسيطة للقيام بإجراء HTML.ActionLink الخاص بك في زر (طالما أن لديك توصيل bootstrap - الذي ربما لديك) هو مثل هذا:

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

<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
                    )

@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 })" />

وجدت للتو هذا التمديد للقيام بذلك - بسيطة وفعالة.

الطريقة التي قمت بها من ذلك هو الحصول على ActionLink والصورة بشكل منفصل. اضبط صورة ActionLink على أنها مخفية ثم تمت إضافة مكالمة مشغل 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>
}

لتصميم المواد لايت و MVC:

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow