CODEWITHSUNDEEP
javascriptasp.net-mvc
panjo
panjo

Reputation: 3515

using checkbox to send value to the controller

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?

Upvotes: 0

Views: 154

Answers (2)

gdp
gdp

Reputation: 8242

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>

Upvotes: 0

Gaurav
Gaurav

Reputation: 8487

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.

Upvotes: 1

Related Questions