0

回复了!!

好的,我对它非常陌生,MVC4并且仍处于学习阶段,Ajax所以我真的可以在这个方面使用一些帮助....我工作得越多,它就越混乱。:( 开始了!

我有一个用作练习的小应用程序。我的主要关注点是“员工”页面,其中包含一个表格,其中显示了我制作的员工列表。您可以单击新员工查看他们的关于部分,显示他们的工作职位和开始日期,然后显示两列(一列用于编辑,一列用于删除)。关于和编辑链接工作很好。现在我要做的是获取删除链接以拉出一个模块(我构建的)。该模块显示一个. 里面是一个包含所选员工信息的小表格和一个带有两个按钮(删除Ajax PartialViewPartialViewAjax取消)。删除按钮从列表中删除选定的员工,关闭和模块,并用新的员工列表替换旧的员工列表。取消按钮只是关闭模块。几乎一切正常,除了当我点击链接删除另一名员工(不刷新页面)时,我必须点击链接两次(或者在某些情况下,什么都没有发生)。我在这该死的事情上已经有一段时间了。这是一团糟,我认为我没有以最好的方式做到这一点。我已经粘贴了我认为相关的代码(这仍然相当多)。如果您需要更多提供可能的答案,请告诉我〜谢谢。

注意:我已经尝试过使用其他方法.click(),但没有一种方法能按照我想要的方式工作。因此,除非您知道执行这些方法的更好方法,否则不要担心尝试建议这些方法。只是为了节省你所有的时间。

员工控制器:删除

    [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是在 a 内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")
4

1 回答 1

0

好的,所以我为此工作了似乎很长时间,只是发现答案很简单。我只需要将脚本加载到 _Employees 部分视图中!我想这必须在视图刷新后完成。为了您的观看乐趣,我更新了我的代码。

于 2013-04-29T17:25:18.457 回答