首页 > 代码库 > MVC扩展控制器, 把部分视图转换成字符串(带验证信息), 并以json传递给前端视图

MVC扩展控制器, 把部分视图转换成字符串(带验证信息), 并以json传递给前端视图

当我们使用jQuery异步提交表单数据的时候,需要把部分视图转换成字符串(带验证信息),以json的形式传递给前端视图。

 

使用jQuery异步加载部分视图,返回内容追加到页面某个div:

1

 

jQuery异步提交失败,返回带验证失败信息的部分视图字符串,并追加到页面div:

2

 

jQuery异步提交成功,返回显示提交成功的部分视图字符串,并追加到页面div:

3

 

一个简单的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; }
    }
}
 

<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

扩展控制器,把部分视图内容转换成字符串。

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();
            }
        }
    }
}
 
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

Home/Index.cshtml视图,提交之前,以异步Get方式请求部分视图的html内容;点击提交,以异步Post方式请求从控制器返回的部分视图字符串内容。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<div id="petContent">
</div>
<div>
    <input type="button" id="btn" value="提交"/>
</div>
 
@section scripts
{
    <script type="text/javascript">
        $(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);
                }
            });
        }
    </script>
}
 
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

 

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) });
        }
    }
}
 
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

 

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)
}
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

 

Home/Success.cshtml部分视图:

@model MvcApplication1.Models.Pet
 
@Model.Name 提交成功!
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>