我没有模型的细节，但给出了您提供的标记和代码我使用Microsoft jQuery Unobtrusive Ajax（必须安装它，如果尚未安装，请使用Nuget是最简单的方法。在Nuget控制台中输入Install-Package Microsoft.jQuery.Unobtrusive.Ajax。你也可以使用NuGet Packages Manager）。
这可以按预期方式发送到服务器（通过AJAX进入动作EmployeesPost）移位代码TextBoxes上的新值。
安装后Microsoft.jQuery.Unobtrusive.Ajax你必须在你的BundleConfig.cs文件中添加捆App_Start文件夹下，这样的：
bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(
"~/Scripts/jquery.unobtrusive-ajax.js"));
下面是我创建试图重现你的模型： （我把所有这些在Models文件夹下的文件EmployeeViewModels.cs）
using System.Collections.Generic;
namespace ExemplesApplication.Models
{
public class ShiftCode
{
public string Name { get; set; }
}
public class EmployeeLine
{
public ShiftCode ShiftCode { get; set; }
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string Type { get; set; }
public List<EmployeeLine> EmployeeLineItems { get; set; }
public Employee()
{
EmployeeLineItems = new List<EmployeeLine>
{
new EmployeeLine {ShiftCode = new ShiftCode {Name = "Morning" }},
new EmployeeLine {ShiftCode = new ShiftCode {Name = "NOON"}},
new EmployeeLine {ShiftCode = new ShiftCode {Name = "Afternoon"}},
new EmployeeLine {ShiftCode = new ShiftCode {Name = "evening"}},
new EmployeeLine {ShiftCode = new ShiftCode {Name = "Night"}}
};
}
}
public class EmployeesViewModel
{
public bool HaveToAddRow { get; set; }
public Dictionary<string, string> WorkDays
{
get
{
return new Dictionary<string, string>
{
{"Monday", "1"},
{"Tuesday", "2"},
{"Wednesday", "3"},
{"Thursday", "4"},
{"Friday", "5"}
};
}
}
public List<Employee> Employees { get; set; }
public EmployeesViewModel()
{
Employees = new List<Employee>
{
new Employee {Id = 1, Name = "Robert", Type = "Engineer"},
new Employee {Id = 2, Name = "Albert", Type = "Driver"},
new Employee {Id = 3, Name = "Fred", Type = "Manager"},
new Employee {Id = 4, Name = "Thomas", Type = "Sales"},
new Employee {Id = 5, Name = "Sahra", Type = "Engineer"}
};
}
}
}
然后，控制器看起来像这样（EmployeeController.cs）：
using ExemplesApplication.Models;
using System.Web.Mvc;
namespace ExemplesApplication.Controllers
{
public partial class EmployeeController : Controller
{
public virtual ActionResult Index()
{
return View(new EmployeesViewModel());
}
public virtual ActionResult EmployeesPost(EmployeesViewModel model)
{
if (model.HaveToAddRow)
{
//add row
model.Employees.Add(new Employee {Id = 1, Name = "New employee", Type = "Engineer"});
return PartialView(MVC.Employee.Views._TableEmployees, model);
}
else
{
// your logic to save
//here
// render the partial view
return PartialView(MVC.Employee.Views._TableEmployees, model);
}
}
}
}
然后创建一个视图和一个局部视图：
视图（/Views/Employee/Index.cshtml）
@model ExemplesApplication.Models.EmployeesViewModel
@{
ViewBag.Title = "Employees";
var ajaxOptions = new AjaxOptions {UpdateTargetId = "employees-table-container", Url = Url.Action(MVC.Employee.EmployeesPost())};
}
<h2>Index</h2>
@using(Ajax.BeginForm(ajaxOptions))
{
@Html.HiddenFor(m=>m.HaveToAddRow)
<div id="employee-container">
<div id="employees-table-container">
@Html.Partial(MVC.Employee.Views._TableEmployees, Model)
</div>
<input id="add-row" type="button" value="Add Row" />
<input id="save-table"type="submit" value="Submit" />
</div>
}
@section scripts
{
@Scripts.Render("~/bundles/jqueryajax")
<script type="text/javascript">
$(document).ready(function() {
var $form = $("form"),
$haveToAddRowHidden = $("#HaveToAddRow");
$("#add-row").on("click", function() {
$haveToAddRowHidden.val(true);
$form.submit();
});
$("#save-table").on("click", function() {
$haveToAddRowHidden.val(false);
});
});
</script>
}
PartialView（/Views/Employee/_TableEmployees.cshtml）
@model ExemplesApplication.Models.EmployeesViewModel
<table class="customtable" width="100%">
<thead>
<tr>
<td>
<div style="width: 80px">Employee ID</div>
</td>
<td>
<label class="control-label">Employee Name:</label>
</td>
<td>
<div style="width: 100px">Employee Type</div>
</td>
@foreach (var workDay in Model.WorkDays)
{
<td>
@workDay.Value
<br> @workDay.Key
</td>
}
</tr>
</thead>
<tbody>
@for (var i = 0; i < Model.Employees.Count(); i++)
{
<tr>
<td>
@Html.DisplayFor(m => @Model.Employees[i].Id)
@Html.HiddenFor(m => @Model.Employees[i].Id)
</td>
<td>
@Html.DisplayFor(m => @Model.Employees[i].Name)
@Html.HiddenFor(m => @Model.Employees[i].Name)
</td>
<td>
@Html.DisplayFor(m => @Model.Employees[i].Type)
@Html.HiddenFor(m => @Model.Employees[i].Type)
</td>
@for (var j = 0; j < Model.Employees[i].EmployeeLineItems.Count; j++)
{
<td>@Html.EditorFor(m => m.Employees[i].EmployeeLineItems[j].ShiftCode, MVC.Shared.Views.EditorTemplates.ShiftCodePicker)</td>
}
</tr>
}
</tbody>
</table>
最后，我创建的EditorTemplate（Views/Shared/EditorTemplates/ShiftCodePicker.chtml ）
@model ExemplesApplication.Models.ShiftCode
@Html.TextBoxFor(m=> m.Name, new { @class = "editor-for-shiftcode" })
感谢您的回复。 这个要求我需要有两个按钮。 一种是向表中添加行。和另一个保存表格。 我的问题是与第一个。 保存按钮我正在[Httppost]方法中获取值。 但另一个添加按钮，它将行添加到表。我需要的是现有的模型，其中有挑选代码选择。并用默认的移码添加一个新行。并将其传回到视图。 这是我需要获取模型的地方。 （我试图添加一个图像，但它需要10个信用点：（ – ISP 2014-12-02 18:08:02
）你可以添加一个属性到你的模型中（比如'public bool HasToAddRow {get; set;}'）按钮的事件点击会改变隐藏的值。然后在action（'EmployeePost'）中，你可以有一个'if'来处理你想要的东西：（if（model.HasToAddRow）{// add row} else {// save}） – sabotero 2014-12-02 18:40:21
@ISP我修改了我的文章你的评论。您可以看到我向模型添加了一个属性，并修改了视图和控制器来管理这个新属性。 现在你可以添加一行，点击“添加行”按钮。 – sabotero 2014-12-03 09:02:56