如何從javascript的動作調用打開查看結果

Question

我正在開發使用ASP.Net mvc 4.我在我的索引視圖中有刪除功能。之前用戶進行刪除一個項目，這是步驟要經過

1. 彈出一個確認對話框，以獲得「是」或「不」使用javascript回答。

2. 如果用戶說「是」，我所說的刪除操作從我的控制器

3. 刪除操作從數據庫中刪除項目

4. 刪除操作返回「RedirectToAction（‘指數’） ;」

5. ..假設的觀點將與最新的更新進行更新

第五步是我的問題..它不工作

這裏是我的代碼

刪除按鈕

<a href="@Url.Action("DeleteFile", new { id = @item.Id })" 
    onclick = "return confirm2delete(this);" 
    class="btn btn-danger btn-sm" 
    data-toggle="tooltip" title="Delete File"> 
    <i class="fa fa-trash-o"></i> 
</a> 

javascript

function confirm2delete(obj) 
{  
    deleteLinkObj = $(this); 
    w2confirm("Are sure to delete this file ?") 
    .yes(function() { 
     $.get(obj.href, function (data) { 
      alert(data); // i checked ..this return the html page created from the delete action 
      window.open (data); // not the right approach ??? 
     }); 

    }) 
    .no(function() { 
     alert("no"); 
     result = false; 
    }); 
    return false; 
} 

在我的控制器

public ActionResult DeleteFile(int id) 
{ 
    FileUpload f = db.FileUploads.Find(id); 
    try 
    {     
     FileInfo dfile = new FileInfo(f.fileUrl); 
     if (dfile.Exists) { dfile.Delete(); } 
     fileUrl = f.FileUrl.Replace("Images/Uploads", "Images/Thumbnails"); 
     FileInfo thumbnail= new FileInfo(fileUrl); 
     if (thumbnail.Exists) { thumbnail.Delete(); } 
     db.FileUploads.Remove(f); 
     db.SaveChanges(); 
    } 
    catch (Exception ex) 
    { 
    } 
    return RedirectToAction("Index"); // or may i should return something else to make it work in javascript ??? 
} 

刪除操作希望你們能幫助我。我一直在尋找和嘗試幾天來達到這個水平，我覺得它的時間得到一些幫助。再多一點。差不多了。

Answer 1

Ajax調用留在同一頁面，所以調用return RedirectToAction("Index");是毫無意義的（它不會重定向）。無論如何，沒有必要返回新視圖。相反，如果控制器成功刪除該項目，則可以從DOM中刪除現有的元素。您還沒有表現出你的觀點，但假設你有一個表，其中的行可能是這樣的

<tr> 
    <td>the name of the file</td> 
    <td>the delete link</td> 
</td> 

然後你可以用以下命令，其中的「刪除」鏈接是

<td><button type="button" class="delete" data-id="@item.Id">Delete</button></td> 

要點是class和data-id屬性 - 修改其餘以滿足您的顯示器，但刪除onclick屬性（停止污染你的標記與行爲，使用unobtrusive javascript - 它在21世紀）

然後SCR ipt

var url = '@Url.Action("DeleteFile")'; 
$('.delete').click(function() { 
    var id = $(this).data('id'); 
    var row = $(this).closest('tr'); // modify if the containing element is not a <tr> 
    w2confirm("Are sure to delete this file ?") 
    .yes(function() { 
     $.post(url, { id: id }, function(response) { // its a POST, not a GET! 
     if (response) { 
      row.remove(); // remove the row 
     } else { 
      // Oops, something went wrong 
     } 
     }).fail(function (response) { 
     // Oops, something went wrong 
     }); 
    }) 
    .no(function() { 
     alert("no"); 
    }); 
}); 

請注意，如果您使用jQuery版本1。9+然後在$.post() functuion的else塊不需要的，因爲在return Json(null);下面的方法將去.fail()回調

然後在控制器返回JSON，表示該項目已成功刪除

[HttpPost] 
public ActionResult DeleteFile(int id) 
{ 
    FileUpload f = db.FileUploads.Find(id); 
    try 
    {     
    .... 
    db.SaveChanges(); 
    return Json(true); // signal success 
    } 
    catch (Exception ex) 
    { 
    return Json(null); // signal failure 
    } 
}