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为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/

编辑：要避免路径问题，请始终使用Ur.Action HTML Helper方法代替o hardcoding

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

将HTML图像更改为按钮以部分刷新页面

2 个答案: