0

Images are rendered on razor view page like this

<img id="9" class="thumb" src="/Content/uploads/Jellyfish.jpg">
<img id="10" class="thumb" src="/Content/uploads/Lighthouse.jpg">
<img id="11" class="thumb" src="/Content/uploads/Chrysanthemum.jpg">

How can I put checkbox on side of each image to send these image id's to the controller on further manipulation?

1
  • Can you share your View Code? Commented Mar 18, 2013 at 0:47

2 Answers 2

1

You can write code something like :

Html

<div>
<img id="9" class="thumb" src="/Content/uploads/Jellyfish.jpg">
<input type='checkbox' class='sendImage' /></div>
<div>
<img id="10" class="thumb" src="/Content/uploads/Lighthouse.jpg">
<input type='checkbox' class='sendImage' /></div>
<div>
<img id="11" class="thumb" src="/Content/uploads/Chrysanthemum.jpg">
<input type='checkbox' class='sendImage' /></div>

JS

$(".sendImage").bind("change", function(e){
    var checkbox = $(e.target);
    if(checkbox.is(":checked")){
      var imageId = checkbox.siblings('img').attr("id");
        alert("checked image id :  " + imageId);
        //send image id to your controller for further processing
    }
});

And here is the working fiddle.

Sign up to request clarification or add additional context in comments.

Comments

0

You can do this on the server:

public ActionResult SaveImageId(string imageId)
{
    //Process your image id somewhere

    //If successful 
    return Json(new { success = true }, JsonRequestBehaviours.AllowGet);
}

On the client:

$(".sendImage").change(function(){
    var imageId = $(this).is(":checked") 
        ? $(this).siblings('img').attr("id") 
        : null;
    if(imageId) sendRequest(imageId);
});

//Send the image id to your controller endpoint
function sendRequest(imageId) {
    $.get('@Url.Action('SaveImageId')' + '?imageId=' + imageId, function(){
       //show a loading gif maybe
    });
}

//Your html
<div>
    <img id="9" class="thumb" src="/Content/uploads/Jellyfish.jpg">
    <input type='checkbox' class='sendImage' />
</div>
<div>
    <img id="10" class="thumb" src="/Content/uploads/Lighthouse.jpg">
    <input type='checkbox' class='sendImage' />
</div>
<div>
    <img id="11" class="thumb" src="/Content/uploads/Chrysanthemum.jpg">
    <input type='checkbox' class='sendImage' />
</div>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.