当我们使用jQuery异步提交表单数据的时候，需要把部分视图转换成字符串(带验证信息),以json的形式传递给前端视图。
使用jQuery异步加载部分视图，返回内容追加到页面某个div：
jQuery异步提交失败，返回带验证失败信息的部分视图字符串,并追加到页面div：
jQuery异步提交成功，返回显示提交成功的部分视图字符串,并追加到页面div：
一个简单的Model:
using System.ComponentModel.DataAnnotations;
namespace MvcApplication1.Models
{ public class Pet
{ public int Id { get; set; } [Display(Name = "宠物")]
[Required(ErrorMessage = "必填")]
public string Name { get; set; } }
}
扩展控制器，把部分视图内容转换成字符串。
using System.IO;
namespace System.Web.Mvc
{ public static class ControllerExtensions
{ //根据部分视图名称，把部分视图内容转换成字符串
public static string RenderPartialViewToString(this Controller controller, string partialViewName)
{ return controller.RenderPartialViewToString(partialViewName, null);
}
//根据部分视图名称和model，把部分视图内容转换成字符串
public static string RenderPartialViewToString(this Controller controller, string partialViewName, object model)
{ //如果partialViewName为空,就把action名称作为部分视图名称
if (string.IsNullOrEmpty(partialViewName))
{ partialViewName = controller.ControllerContext.RouteData.GetRequiredString("action"); }
//把model放到Controller.ViewData.Model属性中
controller.ViewData.Model = model;
using (var sw = new StringWriter())
{ //通过视图引擎，在当前ControllerContext中，根据部分视图名称获取ViewEngineResult类型
var viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, partialViewName);
//创建ViewContext
var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData,
controller.TempData, sw);
//把内容写到StringWriter中
viewResult.View.Render(viewContext, sw);
//StringWriter→string
return sw.GetStringBuilder().ToString();
}
}
}
}
Home/Index.cshtml视图，提交之前，以异步Get方式请求部分视图的html内容；点击提交，以异步Post方式请求从控制器返回的部分视图字符串内容。
@{ ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts
{ $(function() { init();
//提交
$('#btn').click(function() { $.ajax({ cache: false,
url: '@Url.Action("SaveData", "Home")', type: "POST",
data: $('#addForm').serialize(), success: function (data) { $('#petContent').empty(); $('#petContent').append(data.message); },
error: function (jqXhr, textStatus, errorThrown) { alert("出错了 '" + jqXhr.status + "' (状态: '" + textStatus + "', 错误为: '" + errorThrown + "')"); }
});
});
});
function init() { $.ajax({ cache: false,
url: '@Url.Action("GetPet", "Home")', contentType: 'application/html;charset=utf-8',
type: "GET",
success: function(result) { $('#petContent').append(result); },
error: function(xhr, status) { alert("加载内容失败" + status); }
});
}
}
HomeController部分：
using System.Web.Mvc;
using MvcApplication1.Models;
namespace MvcApplication1.Controllers
{ public class HomeController : Controller
{ //主页面
public ActionResult Index()
{ return View();
}
//接收异步Get请求，部分视图以html返回给前端视图
public ActionResult GetPet()
{ return PartialView();
}
//接收异步Post请求，部分视图转换成字符串，以json返回给前端视图
[HttpPost]
public ActionResult SaveData(Pet pet)
{ if (ModelState.IsValid)
{ //TODO: insert into database
return Json(new {msg = true, message = this.RenderPartialViewToString("Success", pet)}); }
return Json(new { msg = false, message = this.RenderPartialViewToString("GetPet", pet) }); }
}
}
Home/GetPet.cshtml部分视图：
@model MvcApplication1.Models.Pet
@using (Html.BeginForm("SaveData", "Home", FormMethod.Post, new {id = "addForm"})) { @Html.LabelFor(model => model.Name)
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
}
Home/Success.cshtml部分视图：
@model MvcApplication1.Models.Pet
@Model.Name 提交成功！