将HTML图像更改为用于部分刷新页面的按钮

本文关键字：刷新 按钮 用于部 图像 HTML | 更新日期: 2023-09-27 18:29:44

我是网页设计和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中。我没有收到任何错误，也不知道如何在脚本上调试。。

将HTML图像更改为用于部分刷新页面的按钮

如果你只是想让图像在点击时调用一些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

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

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

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

有这个脚本

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

现在，当用户点击图像时，它将调用yourcontroller中的youraction方法，并将结果加载到id为divPartial 的div中

编辑：根据评论，

如果您想在多个按钮中执行此操作，则不能使用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/

编辑：要避免路径问题，请始终使用Url.Action HTML Helper方法，而不是硬编码

$("#divPartial").load('@Url.Action("youraction","yourcontroller")');
相关文章：