2013-04-24 77 views
0

回答!MVC4 Ajax.ActionLink Breaks

好吧,我感到非常新 MVC4和我仍然在 Ajax的學習階段,所以我真的可以使用一些幫助,這一個....我在它的工作越多,混亂就愈大。 :(這裏我們去吧!

我有一個小應用程序,我正在使用作爲練習。我主要關注的是「僱員」頁面,其中包含一張表格,顯示我組成的員工列表。員工新來查看他們關於部分,也有展示他們的工作位置和起始日期,然後兩個列(一個用於編輯和一個用於刪除)的關於編輯環節的工作現在我試圖做的是得到Ajax刪除鏈接拉起一個模塊(我建立)模塊d isplay a PartialView。在PartialView內部是一個小表,其中包含所選僱員的信息和帶有兩個按鈕的Ajax表格(刪除取消)。刪除按鈕從列表中刪除選定的員工,關閉和模塊,並用新的員工替換舊的員工列表。取消按鈕只需關閉模塊。除了當我點擊一個鏈接刪除另一個員工(不刷新頁面)之外,幾乎所有的工作都是有效的,我必須點擊鏈接兩次(或者在某些情況下,什麼都不會發生)。我現在一直在這件事上做了一件事。這是一團糟,我認爲我沒有以最好的方式做到這一點。我粘貼了我認爲是相關的代碼(這仍然相當多)。如果您需要更多提供可能的答案,請讓我知道〜謝謝。

注意:我已經嘗試過使用.click()以外的方法,但都沒有以我想要的方式工作。所以除非你知道更好的方法來執行這些方法,不要擔心試圖建議這些方法。只是爲了節省你所有的時間。

EmployeesController:刪除

[HttpGet] 
    public ActionResult Delete(int id = 0) 
    { 
     var model = db.Employees.ToList().Where(m => m.ID == id); 
     if (model == null) 
     { 
      return HttpNotFound(); 
     } 
     return PartialView("_Delete", model); 
    } 

    [HttpPost, ActionName("Delete")] 
    public PartialViewResult DeleteConfirmed(int id = 0) 
    { 
     Employee update = db.Employees.Find(id);    
     db.Employees.Remove(update); 
     db.SaveChanges(); 
     return PartialView("_Employees", db.Employees.ToList());    
    } 

腳本文件:模塊

$(function() { 
var openModule = function() { 
    $("div[id = 'moduleBG']").attr("style", "display: inline"); 
    var width = $("div[id = 'body']").width(); 
    $("div[id = 'delete']").attr("style", "width: " + width + "px"); 
}; 

var closeModule = function() { 
    $("div[id = 'moduleBG']").attr("style", "display: none"); 
    return false; 
}; 

var ajaxSubmit = function() { 
    $("div[id = 'moduleBG']").attr("style", "display: none"); 
}; 

$("a[name = 'module']").on("click", openModule); 
$("input[id = 'cancelBtn']").click(closeModule); 
$("input[id = 'deleteBtn']").click(ajaxSubmit); 

});

管窺:_delete

@model IEnumerable<SiPrac.Models.Employee> 

<div id="delete"> 
<div class="alertHeader">Are you sure you want to delete this?</div> 

<table class="emp" style="display: inline-block"> 
    <tr> 
     <th>@Html.DisplayNameFor(model => model.EmployeeName)</th> 
     <th>@Html.DisplayNameFor(model => model.Title)</th> 
     <th>@Html.DisplayNameFor(model => model.DateStarted)</th> 
    </tr> 
    @foreach (var item in Model) 
    { 
     string[] name = item.EmployeeName.Split(' '); 
     string first = name[0]; 
     string last = name[1].Substring(0, 1); 
     string full = first + " " + last + "."; 

     <tr> 
      <td>@full</td> 
      <td>@Html.DisplayFor(modelItem => item.Title)</td> 
      <td>@String.Format("{0: MM/dd/yyyy}", item.DateStarted)</td> 
     </tr> 
    } 
</table> 

@foreach (var item in Model) 
{ 
    using (Ajax.BeginForm("Delete", "Delete", new { id = item.ID }, 
     new AjaxOptions() 
     { 
      HttpMethod="post", 
      InsertionMode = InsertionMode.Replace, 
      UpdateTargetId = "empData", 
      Url = Url.Action("Delete") 
     }, new { @id = "submitForm", @method = "post" })) 
    { 
    <p> 
     <input id="deleteBtn" class="btn" type="submit" value="Delete" /> 
     <input id="cancelBtn" class="btn" type="button" value="Cancel" /> 
    </p> 

    } 
} 
</div> 

@Scripts.Render("~/bundles/Module") 

管窺:_Employees(這ActionLink不到foreach

@model IEnumerable<SiPrac.Models.Employee> 

<div id="empList"> 
<table class="emp"> 
    <tr> 
     <th>@Html.DisplayNameFor(model => model.EmployeeName)</th> 
     <th>@Html.DisplayNameFor(model => model.Title)</th> 
     <th>@Html.DisplayNameFor(model => model.DateStarted)</th> 
    </tr> 
    @foreach (var item in Model) 
    { 
     // Code to shorten name to just First Name and Last Initial 
     // Cleans up the table to display nicely 
     string[] name = item.EmployeeName.Split(' '); 
     string first = name[0]; 
     string last = name[1].Substring(0, 1); 
     string full = first + " " + last + "."; 
     <tr> 
      <td>@Html.ActionLink(full, "About", new { item.ID }, new { id = "empName" + item.ID, @class = "normLink" })</td> 
      <td>@item.Title</td> 
      <td>@String.Format("{0: MM/dd/yyyy}", item.DateStarted)</td> 
      <td>@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "normLink", @style = "width: inherit" })</td> 
      <td>@Ajax.ActionLink("Delete", "Delete", new { id = item.ID }, 
      new AjaxOptions() 
      { 
       InsertionMode = InsertionMode.Replace, 
       UpdateTargetId = "moduleBG" 
      }, new { @class = "normLink", @style = "width: inherit", @name = "module", @method = "get" }) 
      </td> 
     </tr> 
    } 
</table> 

<div id="create"> 
    <div class="createLink"> 
     @Html.ActionLink("Add New Employee", "Create", null, new { @style = "width: inherit" }) 
    </div> 
    <div class="clear"></div> 
</div> 
</div> 

@Scripts.Render("~/bundles/Module") 

回答

0

好了,所以我的工作是本作似乎像年齡只有找到答案很簡單。我只需要將腳本加載到_Employees局部視圖中!我想這是在視圖刷新後才能完成的。我已更新我的代碼以供您欣賞愉悅。