2013-04-24 65 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局部视图中!我想这是在视图刷新后才能完成的。我已更新我的代码以供您欣赏愉悦。