एक बटन या एक छवि के रूप में Html.ActionLink, एक लिंक नहीं

Question

ASP.NET MVC के नवीनतम (RC1) रिलीज में, मुझे लिंक के बजाय बटन या छवि के रूप में प्रस्तुत करने के लिए Html.ActionLink कैसे मिलती है?

Comments

MVC 3.0 के साथ आप इस तरह से कोशिश कर सकते हैं <a href="@Url.Action("Index","Home")"> <img src = "@ Url.Content (" ~ / थीम्स / गोल्ड / इमेज / ट्राइ-ऑन " .png ")" alt = "होम" /> </a> अधिक जानकारी, इस mycodingerrors.blogspot.com/2012/08/…

— lasantha

इस "ठीक से" करने में बस कुछ ही घंटे बिताने के बाद (जैसे कि ए के AjaxHelperसाथ विस्तार करके ActionButton) मुझे लगा कि मैं इसे नीचे साझा करूंगा।

— कोडिंग गया

यह मेरे लिए प्रफुल्लित करने वाला है कि सात साल बाद, यह सवाल अभी भी उठ रहा है। 2016 में जाहिर तौर पर ऐसा करने का कोई सरल, सहज तरीका नहीं है।

— रयान ल्यूडी

Answer 1

देर से प्रतिक्रिया लेकिन आप इसे सरल रख सकते हैं और HTMLAttributes ऑब्जेक्ट में CSS क्लास लगा सकते हैं।

<%= 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 */
}

Comments

यह मेरे लिए पूरी तरह से काम करता है, हालाँकि आपको जहाँ आप लिंक कर रहे हैं उसके आधार पर एक रूटवैल्यूज़ ऑब्जेक्ट के साथ नल को बदलने की आवश्यकता हो सकती है।

— डेविड कॉनलिस्क

आप बटन नाम स्ट्रिंग को कैसे संभालते हैं जो आप एक्शन लिंक पैरामीटर में असाइन करते हैं। इसने मेरे लिए काम नहीं किया।

— ZVenue

एक ही समस्या है, मेरे लिए भी, linkText par null या रिक्त स्ट्रिंग नहीं हो सकती है, हालाँकि मैं एक इमेज बटन प्रतिकृति की तलाश में हूँ।

— एंट स्विफ्ट

यह सभी प्रकार से खराब है, यह सभी ब्राउज़रों में काम नहीं करता है, और आप कार्यक्षमता के रूप में साइड इफेक्ट का उपयोग कर रहे हैं। चुड़ैल बनाता है यह एक बहुत बुरा अभ्यास इसका इस्तेमाल नहीं करते। सिर्फ इसलिए कि यह काम करता है यह एक अच्छा समाधान नहीं बनाता है।

— पेड्रो.किड

@Mark - jslatts समाधान सही है और यह IE11 में काम नहीं करेगा और सिर्फ इसलिए कि यह वर्तमान ब्राउज़रों में काम करता है यह एक बहुत बुरा अभ्यास है क्योंकि आप कार्यक्षमता के रूप में एक साइड इफेक्ट का उपयोग कर रहे हैं और यदि कार्यान्वयन परिवर्तन होता है तो साइड इफेक्ट बंद हो जाएगा। काम कर रहे।

— पेड्रो.किड

Answer 2

मुझे Url.Action () और Url.Content () का उपयोग करना पसंद है:

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

कड़ाई से बोलते हुए, Url.Content केवल पथ के लिए आवश्यक है वास्तव में आपके प्रश्न के उत्तर का हिस्सा नहीं है।

@BrianLegg को इंगित करने के लिए धन्यवाद कि यह नए रेजर व्यू सिंटैक्स का उपयोग करना चाहिए। उदाहरण के अनुसार अद्यतन किया गया है।

Comments

यदि आप उसके लिए एक html सहायक चाहते हैं: fsmpi.uni-bayreuth.de/~dun3/archives/…

— टोबियास हर्टकोर्न

यह पूरी तरह से काम करता है। बस ध्यान दें कि MVC5 में सिंटैक्स बदल गया है और यह <a href='@Url.Action("MyAction", "MyController")'> और <img src = '@ Url.Centent ("~ / सामग्री / चित्र /" होना चाहिए) MyLinkImage.png ") '/>। धन्यवाद

— BrianLegg

यह NAN पाठ के साथ इसका उत्पादन किया? क्या करें

— बशीर अल-मम्मी

Answer 3

पैट्रिक के जवाब से दुखी, मैंने पाया कि मुझे ऐसा करना था:

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

फॉर्म की पोस्ट विधि को कॉल करने से बचने के लिए।

Answer 4

मुझे सरलीकृत कहें, लेकिन मैं सिर्फ इतना करता हूं:

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

और आप सिर्फ हाइपरलिंक हाइलाइट का ख्याल रखें। हमारे उपयोगकर्ता इसे पसंद करते हैं :)

Comments

@ एक कारण यह कई वोट नहीं है यह अन्य उत्तर की तुलना में बाद में जवाब दिया गया था। मैं इसे वोट करने वाला था, लेकिन यह जांचा गया था कि @ Slider345 ने क्या कहा और यह पुष्टि कर सकता है कि यह IE 7 या 8 में वांछित नहीं है। किसी भी मामले में, यदि आप इसका उपयोग करना चाहते हैं, तो css सेट करना न भूलें लिंक (हॉवर और सक्रिय) text-decoration:noneकि बेवकूफ रेखांकित से छुटकारा पाने के लिए। यह कुछ ब्राउज़रों (निश्चित रूप से फ़ायरफ़ॉक्स 11.0) के लिए आवश्यक है।

— यति

लेकिन आप एक तत्व, वीज़ा वर्सा के अंदर बटन को घोंसले के लिए नहीं मान सकते हैं। कम से कम यह HTML 5 में करने का एक वैध तरीका नहीं है

— पैट्रिक मैगी

हाँ, यह पैट्रिक बताते हैं कि IE10 में भी काम नहीं करता है।

— सियारन गलाघर

कार्रवाई तत्व के अंदर बटन का कोई घोंसला नहीं। stackoverflow.com/questions/6393827/…

— पापा बरगंडी

Answer 5

बूटस्ट्रैप का उपयोग यह एक नियंत्रक क्रिया का लिंक बनाने के लिए सबसे छोटा और सबसे साफ तरीका है जो एक गतिशील बटन के रूप में दिखाई देता है:

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

Comments

मुझे साफगोई से सहमत होना होगा। 100.

— क्रिस कैटिगनी

Answer 6

बस:

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

Comments

यह अभी भी मेरे लिए दृश्य की पोस्ट विधि को आमंत्रित करता है, किसी भी विचार क्यों?

— देववेव

यह मान्य सिंटैक्स नहीं है। IE10 इस लाइन के साथ एक जावास्क्रिप्ट महत्वपूर्ण त्रुटि फेंकता है, "SCRIPT5017: नियमित अभिव्यक्ति में सिंटैक्स त्रुटि"।

— सियारन गलाघर

अच्छा जवाब है, लेकिन (तो ) के onclickसाथ सामग्री के आसपास के बिना मैं यह काम करने के लिए नहीं मिल सका। location.hrefonclick="location.href='@Url.Action(....)'"

— शार्प

Answer 7

एक देर से जवाब लेकिन यह है कि मैं कैसे एक बटन में अपने ActionLink कर रहा हूँ। हम अपनी परियोजना में बूटस्ट्रैप का उपयोग कर रहे हैं क्योंकि यह सुविधाजनक बनाता है। कभी भी @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>

}

आशा है कि यह किसी की मदद करता है

Comments

ठंडा काम करता है! अच्छा और सरल, htmlAttribute new { @class="btn btn-primary" })+ एक

— इरफ

Answer 8

यदि आप लिंक का उपयोग नहीं करना चाहते हैं, तो बटन का उपयोग करें। आप छवि को बटन में भी जोड़ सकते हैं:

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

टाइप = "बटन" फॉर्म जमा करने के बजाय आपकी कार्रवाई करता है।

Answer 9

आप ऐसा नहीं कर सकते Html.ActionLink। Url.RouteUrlजिस तत्व को आप चाहते हैं उसका निर्माण करने के लिए आपको URL का उपयोग करना चाहिए और उसका उपयोग करना चाहिए ।

Comments

हाय, माफ करना, मैं एमवीसी के लिए बहुत नया हूं। मैं छवि प्राप्त करने के लिए Url.RouteURL का उपयोग कैसे करूंगा?

— यूरियाडियम

मेरा मतलब है कि आप ActionLink के लिए एक साधारण कॉल के साथ नेस्टेड img टैग (या बटन टैग) उत्पन्न नहीं कर सकते। बेशक, सीएसएस एक टैग को स्टाइल करना ही उसके चारों ओर जाने का एक तरीका है, लेकिन फिर भी आप एक img टैग नहीं प्राप्त कर सकते हैं।

— मेहरदाद अफश्री

Answer 10

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

Comments

यह मेरे लिए IE10 पर काम किया। यह एक अच्छा समाधान है यदि आप केवल एक छवि के बजाय एक बटन का उपयोग करना चाहते हैं, हालांकि एक सरल लिंक के लिए इनलाइन जावास्क्रिप्ट का उपयोग करना संभवत: आदर्श नहीं है।

— सियारन गलाघेर

(और सिर्फ निश्चित होने के लिए, मैंने इसे ओपेरा, सफारी, क्रोम और फ़ायरफ़ॉक्स पर परीक्षण किया और यह काम किया)

— सियारन गलाघेर

Answer 11

अपने Html.ActionLink को एक बटन में करने का एक सरल तरीका (जब तक आपके पास बूटस्ट्रैप प्लग-इन है - जो आपके पास शायद है) इस तरह है:

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

Answer 12

यहां तक ​​कि बाद में प्रतिक्रिया, लेकिन मैं बस एक ही मुद्दे में भाग गया और अपनी खुद की छवि लिंक HtmlHelper एक्सटेंशन लिखना समाप्त कर दिया ।

आप ऊपर दिए गए लिंक में मेरे ब्लॉग पर इसका कार्यान्वयन पा सकते हैं।

बस किसी के कार्यान्वयन में कमी आने की स्थिति में जोड़ा गया।

Comments

लिंक अब निष्क्रिय प्रतीत होता है

— d219

Answer 13

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

लिंक के साथ एक आइकन प्रदर्शित करने के लिए

Answer 14

मेहरदाद क्या कहता है - या HtmlHelperएक्सटेंशन पद्धति से url हेल्पर का उपयोग करें जैसे कि स्टीफन वाल्थर यहाँ वर्णन करता है और अपनी खुद की एक्सटेंशन विधि बनाता है जिसका उपयोग आपके सभी लिंक को प्रस्तुत करने के लिए किया जा सकता है।

फिर सभी लिंक को बटन / एंकर या जो भी आप पसंद करते हैं, प्रस्तुत करना आसान होगा - और, सबसे महत्वपूर्ण बात, आप बाद में अपना मन बदल सकते हैं जब आपको पता चलेगा कि आप वास्तव में अपने लिंक बनाने के कुछ अन्य तरीके पसंद करते हैं।

Answer 15

आप अपने खुद के विस्तार की विधि बना सकते हैं
मेरे कार्यान्वयन पर नज़र डालें

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
                    )

Answer 16

सामग्री डिजाइन लाइट और एमवीसी के लिए:

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

Answer 17

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

Answer 18

ऐसा लगता है कि छवि के रूप में प्रदर्शित करने वाले लिंक को बनाने के लिए बहुत सारे समाधान हैं, लेकिन कोई भी ऐसा नहीं है जो इसे एक बटन के रूप में प्रदर्शित करता है।

केवल अच्छा तरीका है जो मैंने ऐसा करने के लिए पाया है। इसका थोड़ा सा हैकी है, लेकिन यह काम करता है।

आपको जो करना है वह एक बटन और एक अलग एक्शन लिंक बनाना है। सीएसएस का उपयोग कर एक्शन लिंक को अदृश्य बनाएं। जब आप बटन पर क्लिक करते हैं, तो यह एक्शन लिंक के क्लिक इवेंट को फायर कर सकता है।

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

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

हर बार जब आप एक लिंक जोड़ते हैं जो बटन की तरह दिखना है, तो ऐसा करना बट में दर्द हो सकता है, लेकिन यह वांछित परिणाम को पूरा करता है।

Answer 19

FORMACTION का उपयोग करें

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

Answer 20

बस इसे करने के लिए यह विस्तार मिला - सरल और प्रभावी।

Comments

लिंक टूट गया है।

— क्रिस कैटिगनी

Answer 21

जिस तरह से मैंने किया है वह एक्शनलिंक और इमेज को अलग-अलग तरीके से करना है। एक्शनलिंक छवि को छिपे के रूप में सेट करें और फिर एक jQuery ट्रिगर कॉल जोड़ा। यह अधिक वर्कअराउंड है।

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

ट्रिगर उदाहरण:

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

Answer 22

Url.Action()के अधिकांश अधिभार के लिए आपको नंगे URL मिलेगा Html.ActionLink, लेकिन मुझे लगता है कि URL-from-lambdaकार्यक्षमता केवल Html.ActionLinkअब तक उपलब्ध है । उम्मीद है कि वे Url.Actionकुछ बिंदु पर एक समान अधिभार जोड़ देंगे ।

Answer 23

इस तरह से मैंने इसे स्क्रिप्टिंग के बिना किया:

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