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

2024-07-05 18:05:51 218人阅读

当我们使用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";

<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>

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 提交成功！

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们