html 实现表格控制器,在html动态表格中将数据发布到带有ajax的控制器

我没有模型的细节，但给出了您提供的标记和代码我使用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 EmployeeLineItems { get; set; }

public Employee()

{

EmployeeLineItems = new List

{

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 WorkDays

{

get

{

return new Dictionary

{

{"Monday", "1"},

{"Tuesday", "2"},

{"Wednesday", "3"},

{"Thursday", "4"},

{"Friday", "5"}

};

}

}

public List Employees { get; set; }

public EmployeesViewModel()

{

Employees = new List

{

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

}

Index

@using(Ajax.BeginForm(ajaxOptions))

{

@Html.HiddenFor(m=>m.HaveToAddRow)

@Html.Partial(MVC.Employee.Views._TableEmployees, Model)

}

@section scripts

{

@Scripts.Render("~/bundles/jqueryajax")

$(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);

});

});

}

PartialView(/Views/Employee/_TableEmployees.cshtml)

@model ExemplesApplication.Models.EmployeesViewModel

Employee ID

Employee Name:

Employee Type

@foreach (var workDay in Model.WorkDays)

{

@workDay.Value

  @workDay.Key

}

@for (var i = 0; i < Model.Employees.Count(); i++)

{

@Html.DisplayFor(m => @Model.Employees[i].Id)

@Html.HiddenFor(m => @Model.Employees[i].Id)

@Html.DisplayFor(m => @Model.Employees[i].Name)

@Html.HiddenFor(m => @Model.Employees[i].Name)

@Html.DisplayFor(m => @Model.Employees[i].Type)

@Html.HiddenFor(m => @Model.Employees[i].Type)

@for (var j = 0; j < Model.Employees[i].EmployeeLineItems.Count; j++)

{

@Html.EditorFor(m => m.Employees[i].EmployeeLineItems[j].ShiftCode, MVC.Shared.Views.EditorTemplates.ShiftCodePicker)

}

}

最后，我创建的EditorTemplate(Views/Shared/EditorTemplates/ShiftCodePicker.chtml )

@model ExemplesApplication.Models.ShiftCode

@Html.TextBoxFor(m=> m.Name, new { @class = "editor-for-shiftcode" })