javascript - AJAX 删除不工作的 Entity Framework

Question

我想知道为什么它不起作用，这是代码

查看

<input type="button" value="Delete" onclick="deletefunction(@item.PhotoId)"/>

Controller

[HttpPost]
public ActionResult Delete(int photoid)
{
    var imgDelete = db.Photos.Where(x => x.PhotoId == photoid).FirstOrDefault();
    if (imgDelete == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    db.Photos.Remove(imgDelete);
    db.SaveChanges();
    System.IO.File.Delete(AppDomain.CurrentDomain.BaseDirectory + imgDelete.ImagePath);
    System.IO.File.Delete(AppDomain.CurrentDomain.BaseDirectory + imgDelete.ThumbPath);
    return null;
}

JQUERY/AJAX

<script type="text/javascript">
    $(document).ready(function () {
        function deletefunction(photoid) {
            $.ajax({
                url: '@Url.Action("Delete")',
                type: 'POST',
                data: { photoid: photoid },
                success: function (result) {
                    alert: ("Success")
                },
                error: {
                    alert: ("Error")
                }
            });
        };
    });
</script>

我是 jquery 和 ajax 的新手，我试图在不刷新页面的情况下删除照片，我的路径是否正确？

Answer 1

我建议将 click 事件 附加到您的按钮，而不是在标记中编写 javascript。考虑以下标记:

<input type="button" class="delete" value="Delete" data-picid="@item.photoId"/>

现在将 click 事件附加到 .delete，如下所示:

$('.delete').on('click',function(){
    var photoId=$(this).attr('data-picid');//gets your photoid
    $.ajax({
          url: '@Url.Action("Delete")',
          type: 'POST',
          data: JSON.stringify({ photoid: photoId }),
          contentType: "application/json; charset=utf-8", 
          dataType: "json", //return type you are expecting from server
          success: function (result) {
              //access message from server as result.message and display proper message to user
              alert: ("Success")
          },
          error: {
              alert: ("Error")
          }
    });
});

然后你的 Controller :

[HttpPost]
public ActionResult Delete(int photoid)
{
    var imgDelete = db.Photos.Where(x => x.PhotoId == photoid).FirstOrDefault();
    if (imgDelete == null)
    {
        return Json(new{ message=false},JsonRequestBehavior.AllowGet);//return false in message variable
    }
    db.Photos.Remove(imgDelete);
    db.SaveChanges();
    System.IO.File.Delete(AppDomain.CurrentDomain.BaseDirectory + imgDelete.ImagePath);
    System.IO.File.Delete(AppDomain.CurrentDomain.BaseDirectory + imgDelete.ThumbPath);
    return Json(new{ message=false},JsonRequestBehavior.AllowGet); //return true if everything is fine
}

根据成功或失败删除照片后，您可以在 ajax 的 success 中执行以下操作，但在此之前存储对您的按钮的引用，如下所示:

$('.delete').on('click',function(){
    var photoId=$(this).attr('data-picid');//gets your photoid
    var $this=$(this);
    $.ajax({
          url: '@Url.Action("Delete")',
          type: 'POST',
          data: JSON.stringify({ photoid: photoId }),
          contentType: "application/json; charset=utf-8", 
          dataType: "json", //return type you are expecting from server
          success: function (result) {
              if(result.message)
              { 
                   $this.closest('yourrootparentselector').remove();
                   //here yourrootparentselector will be the element which holds all 
                   //your photo and delete button too
              }
          },
          error: {
              alert: ("Error")
          }
    });
});

更新

根据您给定的标记，我建议为您的每个 image 和 delete 按钮添加一个根父级，如下所示:

<div style="margin-top: 17px;">
   <div id="links"> 
        @foreach (var item in Model.Content) 
        { 
            <div class="rootparent"> <!--rootparent here, you can give any classname-->
                 <a href="@item.ImagePath" title="@item.Description" data-gallery> 
                     <img src="@item.ThumbPath" alt="@item.Description" class="img-rounded" style="margin-bottom:7px;" /> 
                  </a> 
                  <input type="button" class="delete" value="Delete" data-picid="@item.PhotoId" /> 
            </div>

         } 
    </div>
</div>

现在你可以写成功了

$this.closest('.rootparent').remove()