Question

图像在剃刀视图页面上呈现，如此

<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">

如何在每张图像的一侧放置复选框，以便在进一步操作时将这些图像ID发送给控制器？

Answer 1

您可以编写如下代码：

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
    }
});

这是working fiddle。

Answer 2

您可以在服务器上执行此操作：

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

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

在客户端：

$(".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>

使用复选框将值发送到控制器

2 个答案: