无法从ASP MVC中的视图获取更新的数据

我是ASP MVC的新手。我使用RAZOR视图引擎创建了一个可视化的2013 MVC项目。这是我的重新划分:我的模型类EmployeeModel:

namespace MvcApplication3.Models
{
    public class EmployeeModel
    {
        public int EmpId { get; set; }
        public string EmployeeName { get; set; }
        public string EmployeeDep { get; set; }
    }
}

My Controller Class:

using MvcApplication3.Models;
using System.Collections.Generic;
using System.Web.Mvc;
namespace MvcApplication3.Controllers
{
    public class HomeController : Controller
    {
        static List<EmployeeModel> _lstEmployee = new List<EmployeeModel>();
        public ActionResult Index()
        {
            _lstEmployee = GetEmployees();
            return View(_lstEmployee);
        }
        [HttpPost]
        public ActionResult Index(int id, string empName, string empDep)
        {
            _lstEmployee = GetEmployees();
            _lstEmployee[id - 1].EmployeeName = empName;
            _lstEmployee[id - 1].EmployeeDep = empDep;
            return View(_lstEmployee);
        }
        private static List<EmployeeModel> GetEmployees()
        {
            var pvtList = new List<EmployeeModel>();
            var mod1 = new EmployeeModel { EmpId = 1, EmployeeName = "Employee1", EmployeeDep = "Dep1" };
            var mod2 = new EmployeeModel { EmpId = 2, EmployeeName = "Employee2", EmployeeDep = "Dep2" };
            var mod3 = new EmployeeModel { EmpId = 3, EmployeeName = "Employee3", EmployeeDep = "Dep3" };
            var mod4 = new EmployeeModel { EmpId = 4, EmployeeName = "Employee4", EmployeeDep = "Dep4" };
            pvtList.Add(mod1);
            pvtList.Add(mod2);
            pvtList.Add(mod3);
            pvtList.Add(mod4);
            return pvtList;
        }
    }
}

:

@model IEnumerable<MvcApplication3.Models.EmployeeModel>
@{
    ViewBag.Title = "Index";
}
<style type="text/css">
    .visible {
        display: inline;
    }
    .hide {
        display: none;
    }
</style>
<script src="@Url.Content("~/Scripts/HandWritten_scripts/IndexScript.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<div id="divResult">
    <h2>Simple MVC Grid with Row Level Edit & Save</h2>
    <table>
        <tr>
            <th>Employee ID</th>
            <th>Employee Name</th>
            <th>Employee Department</th>
            <th>Action</th>
        </tr>
        @foreach (var m in Model)
        {
            <tr>
                <td>
                    @m.EmpId
                </td>
                <td>
                    <div id="divEmpName-@m.EmpId.ToString()" class="visible">@m.EmployeeName</div>
                    <input id="txtEmpName-@m.EmpId.ToString()" type="text" class="hide" value=@m.EmployeeName />
                </td>
                <td>
                    <div id="divEmpDep-@m.EmpId.ToString()" class="visible">@m.EmployeeDep</div>
                    <input id="txtEmpDep-@m.EmpId.ToString()" type="text" class="hide" value=@m.EmployeeDep />
                </td>
                <td>
                    <button id="btnEdit-@m.EmpId.ToString()" class="visible" onclick="ShowEdit(@m.EmpId); return false;">Edit</button>
                    <button id="btnSave-@m.EmpId.ToString()" class="hide" onclick="SaveEdit(@m.EmpId); return false;">Save</button>
                </td>
            </tr>
        }
    </table>
</div>

最后是Javascript文件 indexscript。js :

var ShowEdit = function (par) {
    $("#divEmpName-" + par).attr("class", "hide");
    $("#txtEmpName-" + par).attr("class", "visible");
    $("#divEmpDep-" + par).attr("class", "hide");
    $("#txtEmpDep-" + par).attr("class", "visible");
    $("#btnEdit-" + par).attr("class", "hide");
    $("#btnSave-" + par).attr("class", "visible");
};
function SaveEdit(par) {
    $("#divEmpName-" + par).attr("class", "visible");
    $("#txtEmpName-" + par).attr("class", "hide");
    $("#divEmpDep-" + par).attr("class", "visible");
    $("#txtEmpDep-" + par).attr("class", "hide");   
    $("#btnEdit-" + par).attr("class", "visible");
    $("#btnSave-" + par).attr("class", "hide");
    var empName = $("#txtEmpName-" + par).val();
    var empDep = $("#txtEmpDep-" + par).val();
    var url = '@Url.Action("Index","Home")';
    $.post(
        url,
        { Id: par, empName: empName, empDep: empDep },
        function (data) {
            $("#divResult").html(data);
        }
    );

所以，在这里，我的目标被分成了几个步骤:

1-显示表中的员工列表-> OK

2-当我按下编辑按钮时，它会在文本框中显示数据，我可以编辑-> OK

3-当我按下保存按钮时，我保存最近在收集中输入的数据->不OK !!

4-当我再次按Save按钮时，在文本框中输入的数据将显示在div -> NOT OK !!

我希望通过修改数据集合(在本例中是我的模型)来实现这一点。我试着通过Url.Action和$post method这样做，但那部分是在互联网上找到的一些代码，我不确定…

如果我仍然应该使用url.action和$。Post，有谁能给我解释一下这两个cynergy吗?

ps:当我尝试调试索引的覆盖时，动作也从未达到

[HttpPost]
public ActionResult Index(int id, string empName, string empDep)
{
 _lstEmployee[id - 1].EmployeeName = empName;
 _lstEmployee[id - 1].EmployeeDep = empDep;
 return View(_lstEmployee);
}

我将非常感谢任何帮助，提前谢谢你。