Cannot Get Hidden Property for Hyperlink or Button

Question

I have custom HTML Helper method in my MVC4 project and this method returns an html url for WebGrid as below:

<img title="Delete" src="../../Content/delete.png">

I use this image as a button for the Actions column on my GridView. On the other hand when I click Delete button, there is a problem due to the id field is hidden in the related Entity model and cannot be passed to the controller. Because when I use the code below for testing in the same view it works and the related record is deleted:

@Html.ActionLink("Delete", "Delete","Admin", new { studentId = 10} )
   @Html.Hidden("StudentID", 10)
                <input type="submit" value="Delete" />

}

So, it is clear that the problem is related to hidden field. Could you please clarify about how to solve this problem? I want to continue to use my HTML Helper so that I can use multiple image button on the same column in my GridView like below:

....
grid.Column("Actions", format: (item) =>
new HtmlString(
      @Html.ActionImage("../../Content/detail.png", "Detail", "my-class", "Detail", "Admin", new { item.StudentID}).ToString() +
      @Html.ActionImage("../../icons/edit.png", "Edit", "my-class", "Edit", "Admin", new { item.StudentID}).ToString() +
      @Html.ActionImage("../../icons/delete.png", "Delete", "my-class", "Delete", "Admin", new { item.StudentID}).ToString()
 )
)
....

And here is the HTML Helper class I defined:

public static MvcHtmlString ActionImage(this HtmlHelper html, string imagePath, string alt, string cssClass,
   string action, string controllerName, object routeValues)
{
    var currentUrl = new UrlHelper(html.ViewContext.RequestContext);
    var imgTagBuilder = new TagBuilder("img"); // build the <img> tag
    imgTagBuilder.MergeAttribute("src", currentUrl.Content(imagePath));
    imgTagBuilder.MergeAttribute("title", alt);
    imgTagBuilder.MergeAttribute("class", cssClass);
    string imgHtml = imgTagBuilder.ToString(TagRenderMode.SelfClosing);
    var anchorTagBuilder = new TagBuilder("a"); // build the <a> tag
    anchorTagBuilder.MergeAttribute("href", currentUrl.Action(action, controllerName, routeValues));
    anchorTagBuilder.InnerHtml = imgHtml; // include the <img> tag inside
    string anchorHtml = anchorTagBuilder.ToString(TagRenderMode.Normal);
    return MvcHtmlString.Create(anchorHtml);
}

Controller:

[HttpPost]
public ActionResult Delete(int studentId)
{
    Student deletedStudent = repository.DeleteStudent(studentId );
    if (deletedStudent != null)
    {
        TempData["message"] = string.Format("{0} was deleted",
        deletedStudent.Name);
    }
    return RedirectToAction("Index");
}

score 0 · Answer 1 · answered Nov 05 '13 at 13:13

0

I propose you to simply create a CSS class with the image of your button :

.edit-button {
    display: block;
    height:24px; //size of your img
    width:24px;
    background: url('myImage.jpg');
}

In your view, you just have to create an ActionLink and specify the class to use :

@Html.ActionLink(" ", "Detail", "Admin", new { id = 10}, new { @class = "edit-button" })

And then to finish, in your Controller :

public ActionResult Edit(int id)
{
    //do something
    return View();
}

If think this is the better choice to create an ActionLink with an image.

Hope it helps !

answered Nov 05 '13 at 13:13

Joffrey Kern

6,449
3
25
25

Thanks for reply.I tried @Html.ActionLink as you described in both grid columns and on another section in my View but none of them is working. As I had said before, my links works for Edit action, but not working Delete action. Because the problem is related to Hidden field id and we need to add hidden input field to the tag and define type="hidden" for this input so that we can pass id parameter to the Delete method. Any idea? – Jack Nov 05 '13 at 13:26
Could you please add the Delete method of your controller – Joffrey Kern Nov 05 '13 at 13:34

Cannot Get Hidden Property for Hyperlink or Button

1 Answers1