CODEWITHSUNDEEP
c#asp.net-mvc
user990951
user990951

Reputation: 1479

Change HTML image into a Button for partial refresh of page

I am new to webpage design and MVC. I have a aspx page and I have a html image. I want to change this image and make it clickable so that it will refresh only the bottom half of the page when clicked. I setup my image so that the source of the image is updated by the controller. By using the following 

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

So that the whole story is clear. When a person clicks on the image of the book, it displays on the bottom half of the page information about that book pulled from a sql database. I am thinking that I would need to look into getting ajax implemented so that I can do partial page update. But the question is how do I change that HTML image into a button. Thanks in advance.

---updating per the answer chosen but still having problems--- 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"); 

 }

---update I am still having issues. My controller file sits in Controllers/HomeController.cs in the standard MVC model. My Home.aspx pages sits in Views/Home/Home.aspx. I get no errors, and not sure how to debug on script..

Upvotes: 0

Views: 967

Answers (2)

Shyju
Shyju

Reputation: 218832

you dont need to convert that to a button. You can bind a function on the image for onclick to do your partial page update

Assuming you have the HTML markup for an image like this with the div to be reloaded with partial content

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

And have this script 

$(function(){

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

Now when user clicks on the image, it will call the youraction method present in yourcontroller and load the result into the div with id divPartial

EDIT : As per the comment,

If you want to do this in multiple button, you can not use the ID selector as it ID's will be ( and should be ) unique for the elements. You can give a css class to all those elements and access using that.

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

Now change your script to use the class selector

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

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

EDIT : To Avoid Path Problems, Always use Ur.Action HTML Helper method instead o hardcoding

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

Upvotes: 1

AndrewG
AndrewG

Reputation: 123

If you just want the image to call some javascript when it is clicked, then you can use the following:

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

However, if you want the image to be a form's Submit button, you will need to change the image to be an 'input' of 'image' type, such as the following link describes:

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

There's some more info on that here: http://www.webdevelopersnotes.com/tips/html/using_an_image_as_a_submit_button.php3

Upvotes: 1

Related Questions