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

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

这是工作小提琴。

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>