Question

我是ASP MVC的新手。我使用RAZOR视图引擎创建了一个visual 2013 MVC项目。这是我的重新分配：我的模型类名为EmployeeModel：

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

我的控制器类：

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;
        }
    }
}

然后是我的Html类，名为 Index.cshtml

@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-显示表格中的“员工”列表 - ＆gt;确定

2-当我按下编辑按钮时，它会以我可以编辑的方式在文本框中显示数据 - ＆gt;确定

3-当我按下保存按钮时，我保存最近进入集合 - ＆gt;的数据。不行!!!

4-当我再次按下保存按钮时，文本框中的数据将显示在div ---＆gt;中。不行!!!

我希望通过修改数据集合（在本例中为我的模型）。我尝试通过Url.Action和$post method执行此操作，但该部分是在互联网上找到的一些代码，我不确定...

有谁能告诉我在这种情况下实现目标的最佳做法是什么？

如果我仍然应该使用url.action和$ .post，任何人都可以向我解释更多关于这两种能量的信息吗？

ps：当我尝试调试索引操作的覆盖时，也永远不会达到

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

我会非常感谢你的帮助，谢谢你。

Answer 1

首先，您无法在Visual Studio的java脚本中设置断点。你必须编写调试器;在JavaScript代码中。在post的索引方法中还有一件事。您必须初始化员工列表 _lstEmployee = GetEmployees（）;

Answer 2

由于您要求最佳实践使用jQuery通过JavaScript将表单数据发送到操作。在这里，我的建议是：

像这样扩展您的视图（.cshtml）:(只需将您的输入元素 - 在本例中为表格 - 包装在一个表单中）

<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>
  <tbody>
    @foreach (var m in Model)
    {
    @using(Html.BeginForm(/*set unique id*/))
    {
      <tr>
        <td>@Html.EditorFor(model => m.EmpId)</td>
        <td>@Html.EditorFor(model => m.EmployeeName)</td>
        <td>@Html.EditorFor(model => m.EmployeeDep)</td>
        <td><!--buttons etc--></td>
      </tr>
    }
    }
  </tbody>
</table>

然后你可以通过jQuery-AJAX函数轻松地将这个序列化的表单数据发布到你的行为中：

$.post('@Url.Action("Home", "Remove")', $('#/*uniqueformid*/').serialize())

现在最好的部分：你的MVC-Action

[HttpPost]
public ActionResult Remove(EmployeeModel model)
{
  _lstEmployee.Remove(model); //This will work if your IEnumerable<EmployeeModel> is an List<EmployeeModel>
  return base.RedirectToAction("Index");
}

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

2 个答案: