Html.ActionLink เป็นปุ่มหรือรูปภาพไม่ใช่ลิงก์

ในรุ่นล่าสุด (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 ที่ชี้ให้เห็นว่านี่ควรใช้ไวยากรณ์มุมมองมีดโกนใหม่ ตัวอย่างได้รับการปรับปรุงให้สอดคล้อง

จากคำตอบของแพทริคฉันพบว่าฉันต้องทำสิ่งนี้:

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

เพื่อหลีกเลี่ยงการเรียกวิธีการโพสต์ของแบบฟอร์ม

โทรหาฉันแบบง่ายๆ แต่ฉันเพิ่งทำ:

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

และคุณก็ดูแลไฮเปอร์ลิงก์ ผู้ใช้ของเรารักมัน :)

การใช้ 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="@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 = "button"ทำการกระทำของคุณแทนที่จะส่งแบบฟอร์ม

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

แม้กระทั่งการตอบสนองในภายหลัง แต่ฉันเพิ่งพบปัญหาที่คล้ายกันและลงเอยด้วยการเขียนลิงก์รูปภาพของฉันเองHtmlHelper ส่วนขยายนามสกุล

คุณสามารถค้นหาการนำไปใช้งานได้ในบล็อกของฉันในลิงก์ด้านบน

เพิ่งเพิ่มในกรณีที่มีใครบางคนกำลังตามล่าการติดตั้ง

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

เพื่อแสดงไอคอนพร้อมลิงค์

ทำในสิ่งที่ Mehrdad พูด - หรือใช้ผู้ช่วย url จากHtmlHelperวิธีการขยายอย่าง Stephen Walther อธิบายที่นี่และสร้างวิธีการขยายของคุณเองซึ่งสามารถใช้เพื่อแสดงลิงก์ทั้งหมดของคุณ

จากนั้นจะทำให้การแสดงผลลิงก์ทั้งหมดเป็นปุ่ม / แองเคอร์หรือสิ่งที่คุณต้องการ - และที่สำคัญที่สุดคือคุณสามารถเปลี่ยนใจได้ในภายหลังเมื่อคุณพบว่าคุณชอบวิธีอื่นในการสร้างลิงก์ของคุณ

คุณสามารถสร้างวิธีการขยายของคุณเอง
ดูที่การใช้งานของฉัน

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

เพิ่งพบส่วนขยายนี้เพื่อทำ - ง่ายและมีประสิทธิภาพ

วิธีที่ฉันทำมันคือการมี 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>
}