将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"); 

 }

---更新我仍然有问题。 我的控制器文件位于标准MVC模型中的Controllers / HomeController.cs中。 我的Home.aspx页面位于Views / Home / Home.aspx中。 我没有错误，也不确定如何在脚本上调试..

Answer 1

如果您只是希望图像在单击时调用某些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

Answer 2

你不需要将它转换为按钮。 您可以在图像上绑定一个函数以进行onclick，以进行部分页面更新

假设你有一个像这样的图像的HTML标记，div将重新加载部分内容

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

并有这个脚本

$(function(){

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

现在，当用户点击该图像时，它将调用youraction方法存在于yourcontroller并将结果加载到ID为在div divPartial

编辑：根据评论，

如果你想在多个按钮中执行此操作，则不能使用ID选择器，因为ID将是（并且应该）对于元素是唯一的。 您可以为所有这些元素提供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")');