এইচটিএমএল.একশন লিঙ্কটি কোনও বোতাম বা কোনও চিত্র হিসাবে, কোনও লিঙ্ক নয়

Question

এএসপি.নেট এমভিসির সর্বশেষ (আরসি 1) প্রকাশে, আমি লিঙ্কের পরিবর্তে একটি বোতাম বা চিত্র হিসাবে রেন্ডার করতে এইচটিএমএল.একশনলিঙ্কটি কীভাবে পাব?

Comments

এমভিসি 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

দেরিতে প্রতিক্রিয়া তবে আপনি কেবল এটি সহজ রাখতে পারবেন এবং এইচটিএমএলঅ্যাট্রিবিউটস অবজেক্টে একটি 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

এটি আমার পক্ষে নিখুঁতভাবে কাজ করে, যদিও আপনি কোথায় লিঙ্ক করছেন তার উপর নির্ভর করে আপনার কোনও রুটভ্যালুজ অবজেক্টের সাথে নালটি প্রতিস্থাপনের প্রয়োজন হতে পারে।

— ডেভিড কনলিস্ক

ততক্ষণে অ্যাকশন লিঙ্ক প্যারামিটারে আপনি যে বোতামটির নাম স্ট্রিং অর্পণ করেন তা আপনি কীভাবে পরিচালনা করবেন। এটি আমার পক্ষে কার্যকর হয়নি।

— জেডভিউনু

একই সমস্যা, আমার জন্যও, লিঙ্কটেক্সট প্যারাম শূন্য বা খালি স্ট্রিং হতে পারে না তবে আমি একটি চিত্রের বোতামটি পুনরায় সংশোধন করছি।

— পিঁপড়া সুইফট

যেটি বিভিন্ন উপায়ে খারাপ, এটি ডোজ সমস্ত ব্রাউজারে কাজ করে না এবং আপনি কার্যকারিতা হিসাবে একটি পার্শ্ব প্রতিক্রিয়া ব্যবহার করছেন। জাদুকরী এটি খুব খারাপ অনুশীলন করে না এটি ব্যবহার করে না। এটি কাজ করে বলে এটি একটি ভাল সমাধান তৈরি করে না।

— পেড্রো.ও.কিড

@ মার্ক - জ্লস্ল্যাটস সমাধানটি সঠিক এবং এটি আই 11 এ কাজ করবে না এবং এটি বর্তমান ব্রাউজারগুলিতে কাজ করার কারণ এটি কার্যকারিতা হিসাবে আপনি পার্শ্ব প্রতিক্রিয়াটি ব্যবহার করছেন এবং যদি প্রয়োগটি পার্শ্ব প্রতিক্রিয়া বদলে দেয় তবে এটি খুব খারাপ অভ্যাস is কাজ।

— পেড্রো দ্য কিড

Answer 2

আমি এটির মতো url.Action () এবং url.Content () ব্যবহার করতে চাই:

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

কড়া কথায় বলতে গেলে, url.Content কেবলমাত্র পথচলার জন্য প্রয়োজন আপনার প্রশ্নের উত্তরের অংশ নয়।

এটি নতুন রেজার ভিউ সিনট্যাক্সটি ব্যবহার করা উচিত বলে উল্লেখ করার জন্য @ ব্রায়ানলেগকে ধন্যবাদ জানাই। উদাহরণ অনুসারে আপডেট করা হয়েছে।

Comments

আপনি যদি এর জন্য এইচটিএমএল সহায়ক চান: fsmpi.uni-Bayreuth.de/~dun3/archives/…

— টোবিয়াস হার্টকর্ন

এটি পুরোপুরি কাজ করে। কেবলমাত্র নোট করুন যে এমভিসি 5 এ সিনট্যাক্সটি পরিবর্তিত হয়েছে এবং <a href='@Url.Action("MyAction", "MyController")'> এবং <img src = '@ url.Content (" ~ / সামগ্রী / চিত্র / মাইলিঙ্কআইমেজ.পিএনজি ") '/>। ধন্যবাদ

— ব্রায়ানলেগ

এটি এনএন পাঠ্য সহ এটি উত্পাদন? কি করবেন

— বাশির আল-মোমনি

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

@ যে কারণে এর বেশি ভোট নেই তার এক কারণ এটি অন্যান্য উত্তরগুলির চেয়ে অনেক পরে উত্তর দেওয়া হয়েছিল। আমি এটি ভোটাভুটি করতে যাচ্ছিলাম তবে @ স্লাইডার 345 কী বলেছে তা পরীক্ষা করে দেখতে পেয়েছি এবং এটি IE 7 বা 8 এ পছন্দসইভাবে কাজ করে না তা নিশ্চিত করতে পারে যে কোনও ক্ষেত্রে, আপনি যদি এটি ব্যবহার করতে চান তবে সিএসএস সেট করতে ভুলবেন না সেই text-decoration:noneনির্বোধের আন্ডারলাইন থেকে মুক্তি পেতে লিঙ্কটি (হোভার এবং সক্রিয়) করুন । এটি কয়েকটি ব্রাউজারের জন্য প্রয়োজনীয় (নিশ্চিতভাবে ফায়ারফক্স ১১.০)

— তবুও 15

তবে আপনি ভিসার বিপরীতে কোনও উপাদানের ভিতরে বাসা বাঁধবেন না। কমপক্ষে এটি এইচটিএমএল 5 এ করার কোনও বৈধ উপায় নয়

— প্যাট্রিক ম্যাগি

হ্যাঁ, প্যাট্রিক যে কারণে ব্যাখ্যা করেছেন, এটি এমনকি আই 10 10 তেও কাজ করে না।

— সিয়ারান গ্যালাগার

ক্রিয়া উপাদানের ভিতরে বাটনের কোনও নেস্টিং নেই। stackoverflow.com/questions/6393827/…

— পাপা

Answer 5

ডায়ামিক বোতাম হিসাবে প্রদর্শিত একটি নিয়ামক ক্রিয়াকলাপের লিঙ্ক তৈরি করার জন্য এটি বুটস্ট্র্যাপ ব্যবহার করা সবচেয়ে সংক্ষিপ্ত এবং পরিষ্কার পদ্ধতি:

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

বা এইচটিএমএল সহায়কগুলি ব্যবহার করতে:

@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

এটি এখনও আমার জন্য পোস্টের পোস্ট পদ্ধতির অনুরোধ করে, কেন কোনও ধারণা কেন?

— ডেভডেভ

এটি বৈধ সিনট্যাক্স নয়। আইই 10 এই লাইনের সাথে একটি জাভাস্ক্রিপ্টের সমালোচনামূলক ত্রুটি ছুঁড়েছে, "SQLT5017: নিয়মিত প্রকাশে সিনট্যাক্স ত্রুটি"।

— সায়রান গ্যালাগার

উত্তম উত্তর, তবে onclickসামগ্রীগুলি location.href(তাই onclick="location.href='@Url.Action(....)'") দিয়ে ঘিরে না করে আমি এটি কাজ করতে পারি না।

— শার্পসি

Answer 7

দেরিতে উত্তর তবে এইভাবে আমি আমার অ্যাকশন লিঙ্কটিকে একটি বোতামে পরিণত করি। আমরা আমাদের প্রকল্পে বুটস্ট্র্যাপ ব্যবহার করছি কারণ এটি সুবিধাজনক করে তুলেছে। @ টি-তে কিছু মনে করবেন না কারণ এটি কেবলমাত্র আমরা অনুবাদক ব্যবহার করছি।

@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

দুর্দান্ত কাজ! সুন্দর এবং সরল, এইচটিএমএলঅ্যাট্রিবিউট 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আপনার পছন্দসই উপাদানটি তৈরি করতে আপনার ইউআরএল ব্যবহার এবং ব্যবহার করা উচিত ।

Comments

হাই, দুঃখিত আমি এমভিসিতে খুব নতুন। চিত্রটি অর্জনের জন্য আমি কীভাবে url. রুট URL ব্যবহার করব?

— ইউরিডিয়াম

আমার অর্থ হ'ল আপনি অ্যাকশনলিঙ্কে একটি সহজ কল দিয়ে নেস্টেড ইমগ ট্যাগ (বা বোতাম ট্যাগ) তৈরি করতে পারবেন না। অবশ্যই, ট্যাগ স্টাইলিং সিএসএসই এটির চারপাশে যাওয়ার এক উপায়, তবে তবুও আপনি কোনও ইমগ ট্যাগ পেতে পারেন না।

— মেহরদাদ আফশারি

Answer 10

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

Comments

এটি IE10 এ আমার জন্য কাজ করেছে। আপনি যদি কোনও চিত্রের পরিবর্তে কেবল একটি বোতাম ব্যবহার করতে চান তবে এটি একটি ভাল সমাধান, যদিও কোনও সাধারণ লিঙ্কের জন্য ইনলাইন জাভাস্ক্রিপ্ট ব্যবহার করা সম্ভবত আদর্শ নয়।

— সিয়ারান গ্যালাগার

(এবং কেবলমাত্র নিশ্চিত হওয়ার জন্য, আমি এটি অপেরা, সাফারি, ক্রোম এবং ফায়ারফক্সে পরীক্ষা করেছি এবং এটি কাজ করেছে)

— সায়ারান গ্যালাগার

Answer 11

আপনার এইচটিএমএল.অ্যাকশনলিংকটিকে একটি বোতামে পরিণত করার একটি সহজ উপায় (যতক্ষণ না আপনি বুটস্ক্র্যাপ প্লাগ ইন করেছেন - যতক্ষণ আপনি সম্ভবত থাকতে পারেন) এটি এই জাতীয়:

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

Answer 12

এমনকি পরে প্রতিক্রিয়া, কিন্তু আমি কেবল একটি অনুরূপ ইস্যুতে দৌড়েছি এবং আমার নিজের চিত্র লিঙ্ক এইচটিএমএল হেল্পার এক্সটেনশনটি লিখে শেষ করেছি ।

উপরের লিঙ্কটিতে আপনি এটি আমার ব্লগে এটির একটি বাস্তবায়ন পেতে পারেন।

কেউ যদি বাস্তবায়নের শিকার হয় তবে সবেমাত্র যুক্ত করা হয়েছে।

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

ফর্ম্যাকশন ব্যবহার করুন

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

Answer 20

এটি করার জন্য এই এক্সটেনশনটি সবেমাত্র পেয়েছে - সহজ এবং কার্যকর।

Comments

লিঙ্কটি নষ্ট হয়ে গেছে।

— ক্রিস ক্যাটিগনি

Answer 21

আমি যেভাবে এটি করেছি তা হল অ্যাকশনলিঙ্ক এবং চিত্রটি আলাদাভাবে রাখা have অ্যাকশন লিঙ্ক চিত্রটি লুকানো হিসাবে সেট করুন এবং তারপরে একটি jQuery ট্রিগার কল যুক্ত করুন। এটি একটি workaround আরও।

'<%= 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()বেশিরভাগ ওভারলোডের জন্য খালি ইউআরএল পাবেন 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>
}