第一步骤 Model
public class Person
{
[Required(ErrorMessage = "请输入姓名")]
public string FirstName { get; set; }
[Required(ErrorMessage = "请输入名字")]
public string LastName { get; set; }
[Range(18, 100, ErrorMessage = "请输入{1}到{2}之间")]
public int age { get; set; }
[DataType(DataType.Date)]
public DateTime date { get; set; }
}
第二步骤Action
准备JsonResult
public JsonResult Indexs()
{
List<Person> persons = new List<Person>();
for (int i = 0; i < 10; i++)
{
Person person = new Person();
person.FirstName = "ml";
person.LastName = "dark";
person.age = i;
person.date = DateTime.Now;
persons.Add(person);
}
var jsons = persons.Select(m => new { date = m.date.ToLongDateString(), age = m.age });
return Json(jsons, JsonRequestBehavior.AllowGet);
// return View(persons);
}
第三步骤view
首先 引入JS
<script src="@Url.Content("/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
其次
@{
AjaxOptions ajaxOption = new AjaxOptions {
// UpdateTargetId = "updateElement" ,
Url = Url.Action("indexs"),
LoadingElementId="loading",
LoadingElementDuration = 3000,
OnSuccess = "OnSuccess"
};
}
@using(Ajax.BeginForm(ajaxOption))
{
<div id="loading" style=" display:none;">加载ing</div>
<ul id="updateElement"></ul>
<div>
@Ajax.ActionLink("点击", "Indexs", ajaxOption)
</div>
}
最后
<script type="text/javascript">
function OnSuccess(data) {
var updateelement = $("#updateElement")
for (i = 0; i < data.length; i++) {
updateelement.append("<li>" + data[i].age + " " + data[i].date + "</li>")
}
}
</script>
注意 web.config
<appSettings><add key ="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>