我有一个简单的MVC应用程序，我正在其中显示来自控制器的数据。 换句话说，我正在为html表设置一些默认数据，并希望在单击按钮时使用Ajax调用来更改它。 如何才能做到这一点，我可以将代码分享如下:
模型是:
public class Employee
{
public string Name { get; set; }
public string Surname { get; set; }
}
控制器是:
public class SendAjaxParameterController : Controller
{
// GET: SendAjaxParameter
public ActionResult GetTheData()
{
List<Employee> Employee_Details = new List<Employee>();
Employee_Details = DefaultValues();
return View(Employee_Details);
}
public List<Employee> DefaultValues()
{
List<Employee> Employee_Details = new List<Employee>();
Employee emp = new Employee
{
Name = "John",
Surname = "Doe"
};
Employee emp1 = new Employee
{
Name = "Mary",
Surname = "Addinson"
};
Employee_Details.Add(emp);
Employee_Details.Add(emp1);
return Employee_Details;
}
[HttpPost]
public ActionResult Ajax_GetParameter(string name)
{
string nameofEmp = name;
List<Employee> Employee_Details = new List<Employee>();
if (name == "Monica")
{
Employee emp = new Employee
{
Name = "John",
Surname = "Doe"
};
Employee emp1 = new Employee
{
Name = "Mary",
Surname = "Addinson"
};
Employee_Details.Add(emp);
Employee_Details.Add(emp1);
}
else
{
Employee emp = new Employee
{
Name = "Robert",
Surname = "Doe"
};
Employee emp1 = new Employee
{
Name = "Monica",
Surname = "Addinson"
};
Employee_Details.Add(emp);
Employee_Details.Add(emp1);
}
return Json(new { success = true, data = Employee_Details },JsonRequestBehavior.AllowGet);
}
}
其观点是:
@model IEnumerable<datatableViewTocontroller.Models.Employee>
@{
ViewBag.Title = "GetTheData";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GetData</title>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Scripts/datatable/DataTables-1.10.20/css/dataTables.jqueryui.min.css" rel="stylesheet" />
@section Scripts{
<script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/datatable/DataTables-1.10.20/js/dataTables.jqueryui.min.js"></script>
<script>
var nameValue = "";
var dttable = $("#mytable").DataTable();
$("#btn_GetData").click(function () {
if (confirm("Do you want to continue?")) {
nameValue = "Monica";
$.ajax({
type: "POST",
url: "/SendAjaxParameter/Ajax_GetParameter",
data: '{name:"' + nameValue + '"}',
contentType: "application/json; utf-8",
dataType: "json",
success: function (data) {
if (data.success) {
alert(data);
}
}
});
}
else {
nameValue = "Not Monica";
$.ajax({
type: "POST",
url: "/SendAjaxParameter/Ajax_GetParameter",
data: '{name:"' + nameValue + '"}',
contentType: "application/json; utf-8",
dataType: "json",
success: function (data) {
}
});
}
});
</script>
}
</head>
<body>
<div id="table-div">
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
@foreach (var modeldata in Model)
{
<tr>
<td>@modeldata.Name</td>
<td>@modeldata.Surname</td>
</tr>
}
</tbody>
</table>
</div>
<br />
<button id="btn_GetData" style="float:right;">GetData</button>
</body>
</html>
那么，问题是我如何给表分配新数据呢？ 请救命！
您可以在Ajax成功调用后使用Jquery重新记录表结构。 只需使表Td结构化并在各自的div中追加即可。
例如。
$('You Parent div').empty().append('new structure');
