Question

的回答!! 的

~~好的，我对MVC4非常新，我还处于Ajax的学习阶段，所以我真的可以帮助这个......我工作的越多它，它变得更加混乱。 :(我们走了！~~

我有一个小应用程序，我正在使用它作为练习。我的主要关注点是“员工”页面，其中包含一个表格，其中显示了我编制的员工列表。您可以单击新员工以查看他们的关于部分，其中显示了他们的工作职位和开始日期，然后是两列（一个用于编辑，一个用于< EM>删除的）。关于和编辑链接工作得很好。现在我要做的是获取Ajax 删除链接来拉出一个模块（我建立的）。该模块显示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);

}）;

部分视图：_删除

@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")

Answer 1

好吧，所以我为这个看似年龄的人工作只是为了找到答案很简单。我只需要将脚本加载到_Employees局部视图中！我想这必须在视图刷新后完成。我已经更新了我的代码以供您观看。

MVC4 Ajax.ActionLink中断

1 个答案: