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

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

.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; }

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

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();
            }
        }
    }
}
 

.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; }

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

.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; }

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) });
        }
    }
}
 

.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; }

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

.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; }

Home/Success.cshtml部分视图：

@model MvcApplication1.Models.Pet
 
@Model.Name 提交成功！

.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; }

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

时间： 2024-10-10 13:33:49

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

MVC扩展控制器工厂,通过继承DefaultControllerFactory来决定使用哪个接口实现,使用Ninject

希望实现的效果是:对购物车中所有商品的总价,实现9折或8折: 当点击"9折": 当点击"8折": □ 思路 8折或9折是打折接口的不同实现,关键是:由什么条件决定使用哪种打折方式? --当点击8折或9折链接的时候,把参数放在路由中,然后在自定义控制器工厂中根据参数的不同选择使用哪种打折方式. □ model public class CartLine    {        public int Id { get; set; }        public stri

MVC扩展控制器工厂,通过实现IControllerFactory

关于控制器工厂的扩展,要么通过实现IControllerFactory接口,要么通过继承DefaultControllerFactory.本篇中,我想体验的是: 1.当请求经过路由,controller, action名称是以key/value键值对形式存放的,我们可以通过RequestContext.RouteData.Values["action"]和RequestContext.RouteData.Values["controller"]获取action或co

如何在AJAX的毁掉函数中传递JSON数据？如何在控制器中接受并转换成数组？

首先,我们经过测试(或者你平时的开发经验)知道,在AJAX的回调函数中使用get或者post方式可以传递字符串(不信可以自己去写实例测试,不过要注意:get方式有数据量的限制): 方法一:我们将ajax的请求放回的JSON数组转换成字符串,然后在回调函数中get过去: a.html页面的AJAX请求代码: b.后台两个处理函数(尤其注意第二个是回调函数指向的处理函数): 方法二:我们在回调函数中直接处理发送一个新的AJAX请求(也可以写成匿名函数),将ajax请回来的JSON数组转化为字符串作为

前台 JSON对象转换成字符串 相互转换 的几种方式

在最近的工作中,使用到JSON进行数据的传递,特别是从前端传递到后台,前台可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,后台使用request进行接收.有时传递了几个数值,还好接收.但是如果传递一个json数组,这样后台接受的时候Request多个很麻烦,此时要按照类的格式或者 集合的形式进行传递.例如下面的例子: 前台按类的格式传递JSON对象: var jsonUserInfo = "{\"TUserName\&quo

谭浩强 c程序设计 8.17用递归法将一个整数n转换成字符串。例如，输入486，应输出字符串&quot;486&quot;。n的位数不确定，可以是任意位数的整数。

8.17用递归法将一个整数n转换成字符串.例如,输入486,应输出字符串"486".n的位数不确定,可以是任意位数的整数. #include <stdio.h> char str1[20];int i=0;long n;int main(){        int longToStr(long n);    char *revstr(char *str, int len);    printf("请输入一个整数n:\n");    scanf("

将整形数字(int)转换成字符串

#define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include<string.h> #include<string.h> void itoa(int n, char *buf) { int count = 0; char nu; char buf2[128] = { 0 }; //核心算法很简单 就是每次取出各位数字然后把数字转存进数组,中间有一个数组匿置的过程 do

浮点数转换成字符串函数

sprintf函数太大,在STM8上面根本不敢用,动不动就.text overflow.为了将采集的数值通过串口上传到计算机,只能自己写了一个浮点数转换成字符串的函数: #include <stdio.h> #include <stdint.h> static char table[]={'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'}; void num2char(char *str, double number, uint8_t

数字按照不同格式转换成字符串

如果自己写函数,不使用itoa怎么判断呢? 我们用通常的办法,对数字进行每位的除商,得到后与字符'0'相加. flag = 0; for(i=0;i<6;i++){ tmp = int(num/pow(10,5-i)); if(tmp != 0){ *str = 1; flag = 1; } if(*str != 0 || flag){ *str++ = tmp+'0'; num = num%int(pow(10,5-i)); } } 要注意的就是,我们设置标志位flag,为1之前的所有0都不输

输入流转换成字符串

/** * 输入流转换成字符串 * @param is * @param destCode * @return * @throws IOException */ public static String readFromStream(InputStream is,String destCode) throws IOException { ByteArrayOutputStream baos = new ByteArrayOutputStream(); byte[] buffer = new by