Измените изображение HTML на кнопку для частичного обновления страницы

Question

Я новичок в дизайне веб-страниц и MVC. У меня есть страница aspx, и у меня есть изображение HTML. Я хочу изменить это изображение и сделать его кликабельным, чтобы при щелчке оно обновляло только нижнюю половину страницы. Я настроил свое изображение так, чтобы источник изображения обновлялся контроллером. Используя следующее

         src="<%=ViewData["BookImg"] %>"

Так что вся история понятна. Когда человек нажимает на изображение книги, он отображает в нижней половине страницы информацию об этой книге, извлеченную из базы данных SQL. Я думаю, что мне нужно было бы изучить реализацию ajax, чтобы я мог выполнить частичное обновление страницы. Но вопрос в том, как я могу изменить это изображение HTML в кнопку. Заранее спасибо.

--- обновление в соответствии с выбранным ответом, но все еще возникают проблемы --- home.aspx

<% Html.RenderPartial("HomePartialView"); %>


  <img id = "Book_Img"  src="<%=ViewData["BookImg"] %>" alt = "click Me" class="imgClick"/>


  <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript">
    $(document).ready(function(){
        $(".imgClick").click(function () {
          $("#HomePartialView").load("@Url.Action("PartialViewBook","HomeController")");
               });
                 });
                </script>

--- HomeController.cs

public ActionResult PartialViewBook()
{
    ViewData[imageBookPressd] = "hello world";
    return View("HomePartialView"); 

 }

--- обновление У меня все еще есть проблемы. Мой файл контроллера находится в Controllers / HomeController.cs в стандартной модели MVC. Мои страницы Home.aspx находятся в Views / Home / Home.aspx. Я не получаю ошибок, и не уверен, как отлаживать на сценарии ..

Answer 1

вам не нужно конвертировать это в кнопку.Вы можете привязать функцию к изображению для onclick, чтобы выполнить частичное обновление страницы

. При условии, что у вас есть HTML-разметка для изображения, подобного этому, с div, который будет перезагружен с частичным содержимым

<img src="someimage.gif" id="imgReloader" />
<div id="divPartial" ></div>

И иметь этот скрипт

$(function(){

  $("#imgReloader").click(function(){
    $("#divPartial").load("yourcontroller/youraction");      
 });    
});

Теперь, когда пользователь нажимает на изображение, он вызовет метод youraction, присутствующий в yourcontroller, и загрузит результат в div с id divPartial

РЕДАКТИРОВАТЬ: Согласно комментарию,

Если вы хотите сделать это в несколько кнопок, вы не можете использовать селектор идентификатора, так как его идентификаторы будут (и должны быть) уникальнымидля элементов.Вы можете назначить класс css всем этим элементам и получить к нему доступ.

<img src="someimage.gif" id="imgReloader1" class="imgClick" />
<img src="anotherimage.gif" id="imgReloader2" class="imgClick"  />

Теперь измените ваш скрипт, чтобы использовать селектор классов

$(function(){    
  $(".imgClick").click(function(){
    $("#divPartial").load("yourcontroller/youraction");      
 });    
});

http://api.jquery.com/class-selector/

РЕДАКТИРОВАТЬ: Чтобы избежать проблем с путями, всегда используйте метод Ur.Action HTML Helper вместо жесткого кодирования

$("#divPartial").load('@Url.Action("youraction","yourcontroller")');  

Answer 2

Если вы просто хотите, чтобы изображение вызывало некоторый javascript при нажатии, тогда вы можете использовать следующее:

<img src="<%=ViewData["BookImg"] %>" onclick="doSomething();"/>

Однако, если вы хотите, чтобы изображение было кнопкой «Отправить» формы, вам нужно будет изменить изображение на «тип ввода» типа «изображение», как описано в следующей ссылке:

<input type="image" src="<%=ViewData["BookImg"] %>" alt="Submit button">

Здесь есть еще немного информации об этом: http://www.webdevelopersnotes.com/tips/html/using_an_image_as_a_submit_button.php3