Блог

У меня есть два вопроса, оба связанные с одним и тем же представлением: итак, существует представление под названием ProductDetails, в котором отображаются сведения о продукте.

Каждый продукт может иметь статус:

• Доступно — в этом случае доступны две кнопки «Редактировать» и «удалить» (которые изменят статус продукта на «Недоступен», но не удалят его из базы данных)

• Недоступно — в этом случае на странице отображается продукт, но не отображаются опции для редактирования или удаления.

Контроллер ProductsController имеет сведения о действии, которые показывают это представление.

Проблема в том, что я не знаю, как реализовать две кнопки (Редактировать и Удалить), потому что:

• Редактирование отправляет в другой метод действия (Редактировать, который отображает другое представление) <- это работает
• Удаление должно сделать (IMO) публикацию на текущей странице. В действии post статус продукта изменяется, и представление отображается снова.

Я хочу, чтобы обе кнопки выглядели как ссылки. Если я помещу форму для удаления, то она будет отображаться в виде кнопки. Я хотел бы избежать того, чтобы кнопка выглядела как ссылка на css. Или … по крайней мере, я хочу использовать один и тот же HTML-элемент для обеих «кнопок».

Это скорее проблема отображения элементов, поэтому я добавил тег CSS к вашему вопросу, поскольку некоторые альтернативные ответы могут основываться на этом.

Лично я думаю, что пытаться сделать кнопку похожей на текстовую ссылку было бы довольно неудобно, даже если вы отключите границу и фон, у вас возникнут проблемы с выравниванием текста и т.д.

Я бы сказал, что у вас есть 2 «простых» варианта.

Во-первых, вы могли бы сделать так, чтобы при удалении не публиковался запрос на удаление, а ссылка на страницу подтверждения удаления (или вызывалось модальное окно JS с вашей формой удаления и кнопкой).

Во-вторых, вы могли бы сделать так, чтобы они оба выглядели как кнопки, хотя вы просили, чтобы это выглядело как ссылка, я подумал, что главное — согласованность пользовательского интерфейса, а не внешний вид ссылки в частности. Вы могли бы использовать jQueryUI и invoke .button() для обоих элементов, вызов jQueryUI для 1 функции немного излишен, но это быстрое изменение, конечно, вы могли бы повторить ту же идею оформления ссылки, что и кнопки, но пришлось бы потратить время на решение проблем с браузером CSS.

ссылка на удаление должна публиковаться в действии удаления, которое, в свою очередь (после проверки и обновления базы данных), должно перенаправлять на действие details.

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

Вы легко можете решить проблему с ссылкой и кнопкой, используя GET вместо POST. Не будьте ослеплены лучшими практиками.

Или вы можете использовать ссылку Удалить, которая выполняет однострочную функцию Javascript, которая публикует форму:

 <a href="javascript:document.forms['myform'].submit()">Remove</a>