將HTML圖片更改爲按鈕以進行局部刷新頁面

我是網頁設計和MVC的新手。我有一個aspx頁面，我有一個html圖像。我想更改此圖片並使其可點擊，以便點擊時只刷新頁面的下半部分。我設置我的圖像，以便控制器更新圖像的來源。通過使用以下內容將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。我沒有得到任何錯誤，不知道如何在腳本調試..

來源

2012-04-01 user990951

如果你只是想圖像調用JavaScript被點擊時，那麼你可以使用以下命令：

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

但是，如果你想要的形象是一個表單的提交按鈕，你將需要改變形象是一個「形象」類型，「輸入」，如下面的鏈接描述：

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

有索姆E在這裏更多的信息： http://www.webdevelopersnotes.com/tips/html/using_an_image_as_a_submit_button.php3

來源

2012-04-01 20:44:47 AndrewG

你不需要將其轉換成一個按鈕

。您可以綁定在圖像上的功能的onclick做你的頁面的局部修改

假設你有一個這樣的形象與DIV的HTML標記與部分內容

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

後裝載並有這腳本

$(function(){ 

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

現在，當用戶點擊該圖像上，它將調用本youraction方法yourcontroller並將結果加載到的div id爲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輔助方法代替鄰硬編碼

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

來源

2012-04-01 20:51:51 Shyju

好的腳本對我來說是新的，讓我做一些研究。如果我有多個圖像，我想要做同樣的事情，我需要創建多個腳本 – user990951 2012-04-01 21:07:51

@ user990951：我更新了我的答案。 – Shyju 2012-04-01 21:12:14

好吧我正在閱讀腳本讓我問你這個問題。假設我在頁面上有3個圖像1圖像是書籍的詳細信息。第二張圖片是作者信息。第三張圖片更像是一個顯示相關書籍的加號。這當然會需要3個不同的腳本，我是對的嗎？（我保證這是我的最後一個問題:)） – user990951 2012-04-01 21:22:49

將HTML圖片更改爲按鈕以進行局部刷新頁面

回答

相關問題