ASP.NET MVC cancel, not delete - css

Question

I have two questions, both related to the same view: so there is view called ProductDetails which shows the details of a product.
Each product can have the status:
Available - in this case, two button are available "edit" and "remove"(which will change the status of the product to "Not available" but will not remove it from DB)
Not available - in this case, the page displays the product but no options to edit or remove are
visible.
The controller ProductsController has an action Details that shows that view.
The problem is that I don't know how to implement the two buttons (Edit and Remove) because:
Edit sends to another action method (Edit which display another view) <- this works
Remove should do (IMO) a post on the current page. In the post action, the status of the product is changed and the view is shown again.
I want both button to look like links. If I put a form for remove, then it will be displayed as a button. I would like to avoid making the button look like a link with css. Or... at least I want to use the same HTML element for both 'buttons'.

Answer 1

This is more an issue of displaying the elements so I have added the CSS tag to your question as some alternative answers may rely on this.
Personally I think trying to make a button look like a text link would be quite awkward, even once you turn off the border and background you have issues with lining up the text etc.
I'd say you have 2 "simple" options.
Firstly you could make the delete not post a delete request but link to a delete confirmation page (or bring up a JS modal window with your delete form and button).
Secondly you could make them both look like buttons, while you requested that it looks like a link I figured that the main point was consistency in UI than the link look specifically. You could use JQueryUI and invoke .button() on both elements, invoking JQueryUI for 1 feature is a bit overkill but it's a quick change, of course you could replicate the same idea of styling the link like the buttons but would have to spend time dealing with browser CSS issues.

Answer 2

the Remove link should post to the Remove action, which should in turn (after validation and DB update) redirect to the details action.
public ActionResult Details(int productId)
{
// Your current action method
return View(model);
}
public ActionResult Remove(int productId)
{
// Validate productId
// Update DB
return RedirectToAction("Details", new { productId = productId } );
}
You easily can solve your link vs button problem by using a GET instead of a POST. Don't be blinded by best practices.
Or you can use a Remove link that executes a one-liner Javascript function that posts the form:
Remove