• 写在前面的
  • 传参方式
    • Controller与View之间
      • ViewBag
      • ViewData
      • JS
        • Ajax
        • URL
    • Action与Action之间Controller内部
  • 总结

写在前面的

  传值的问题在MVC中也算是一个比较丰富的机制,我们可以借助各种方式和工具组件在Controller和View中来回传递参数。常用的有这么几种方式,Controller<—->View;Action<—->Action;以及Controller<—->Controller

传参方式

Controller与View之间

ViewBag

  • ViewBag比较灵活,可以自定义属性,和ViewData类似。但是ViewBag的好处就是可以通过HtmlHelper的TextBox来自动实现数据绑定。
//在控制器中

    ViewBag.mvcname= "myfirstframe";    
    ViewBag.mvcads= "fast";
//在页面中

    <div>
        @Html.TextBox("mvcname")    
        @ViewBag.mvcads
    </div>
  • 同样,viewBag还可以用来拼页面,这样,我们就可以把所有的页面写在Controller里面,简化View的页面代码,如图:

  • 在页面中直接使用拼接好的页面即可:

ViewData

  • 和ViewBag的用法相差不是很多,ViewData的形式采用Key-Value来进行识别并显示Value值。
//在controller中

    String mvc ="what an ammazing frame is!"
    ViewData["stringMvc"]=mvc;
//在页面中

    <div>
        <font>How do you like MVC?</font>
    </div>
    <div>
        <font>@ViewData["stringMvc"]</font>
    </div>

JS

  • 通过JS传值的方法就比较多了,我们最常用的是AJAX,其次还有通过ulr来传值

Ajax

  • 使用AJAX传值的话是一种比较方便的方式,主要是运用了JQ中封装好的一些传值方法,来参与View与Controller之间的相互传值。
//页面中的方法
/*ajax有一套自己的固定写法,如下所示,只要按照固定的格式,就可以实现前后台相互传值*/

    $(document).ready(function () {
    $.ajax({
        //指定Url,格式“Controller名字/Action方法名”
        url: 'SubmitSuccess/GetAnnounce',//传值方式,post/get
        type: 'get',//指定返回值类型
        dataType: 'json',//返回值data如果不是空值,也就是返回成功,那么执行function中的代码
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                $(".content" + i).html(data[i].announceContent);
            }
            executeQueryName();
        }
    });
//在SubmitSusseccController中是这样的形式
    public ActionResult GetAnnounce()
        {
            List<t_announce> data = new List<t_announce>();
            SubmitSuccessBLL getallannounce = new SubmitSuccessBLL();
            data = getallannounce.GetAnnounce();
            return Json(data,JsonRequestBehavior.AllowGet);
        }

URL

  • 再有就是通过地址栏中的url进行传值了,网上有好多已经封装好的JS代码,这里就不再展示了,我用一个简单的例子来展示一下简单的获取原理。
//rul传值可以灵活运用,可以在View与Controller之间,也可以是view与view之间
    //我们要做的就是把地址栏的rul改变,然后再获取并修改
    //html片段
    <body>
        <div id="mvcurl">MVC URL GET</div>
    <body>
    //如何将div的innerHtml获取
    <script type="text/javascript"> function geturl(){ var prop = document.getElementById("mvcurl"); //获取内容 var propdoc= prop.innerHTML; //将地址栏rul添加参数 var url = "mvcurl" + "?" + "content" + propdoc; window.location.assign(url); } </script>
  • 在执行完上面的方法之后,地址栏的链接会变成:

  • 我们在另一个页面或者后台怎么获取这个innerHTML呢?

<script type="text/javascript"> var url = location.href; //将链接地址以"?"划分成为两部分,获取第二部分 var url2 = url.split("?")[1]; //将链接的第二部分再以“=”划分,取第二部分 var url3= url2.split("=")[1]; //这个时候我们就获取到了“MVC URL GET”的内容 var content = url3; </script>

Action与Action之间(Controller内部)

  • 如果需要在Controller内部传值的话,就需要用到TempData,和ViewData一样,只不过ViewData做不到不同Action之间的传值罢了。
public ActionResult Indexa(){
        TempData["mvc"]="mvc oh yellllllllll";
        return View();
    }

    public ActionResult Indexb(){
        String mvc = TempData["name"].toString;
        return View();
    }

总结

  还有一种controller与controller之间传值的方法,由于不常用,暂时在这里就不做说明了,总之掌握以上常用的方法,会很方便的我们对页面的调用和传值。

【MVC】传值大全参考的更多相关文章

  1. 基于EJB技术的商务预订系统的开发

    用EJB结构开发的应用程序是可伸缩的、事务型的、多用户安全的。总的来说,EJB是一个组件事务监控的标准服务器端的组件模型。基于EJB技术的系统结构模型EJB结构是一个服务端组件结构,是一个层次性结构,其结构模型如图1所示。图2:商务预订系统的构架EntityBean是为了现实世界的对象建造的模型,这些对象通常是数据库的一些持久记录。

  2. js中‘!.’是什么意思

  3. InnoDB 和 MyISAM 引擎恢复数据库,使用 .frm、.ibd文件恢复数据库

  4. Error: Cannot find module ‘node:util‘问题解决

    控制台 安装 Vue-Cli 最后一步出现 Error: Cannot find module 'node:util' 问题解决方案1.问题C:\Windows\System32>cnpm install -g @vue/cli@4.0.3internal/modules/cjs/loader.js:638 throw err; &nbs

  5. yarn的安装和使用(全网最详细)

    一、yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点:速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。三、y

  6. 前端环境 本机可切换node多版本 问题源头是node使用的高版本

    前言投降投降 重头再来 重装环境 也就分分钟的事 偏要折腾 这下好了1天了 还没折腾出来问题的源头是node 使用的高版本 方案那就用 本机可切换多版本最终问题是因为nodejs的版本太高,导致的node-sass不兼容问题,我的node是v16.14.0的版本,项目中用了"node-sass": "^4.7.2"版本,无法匹配当前的node版本根据文章的提

  7. 宝塔Linux的FTP连接不上的解决方法

    宝塔Linux的FTP连接不上的解决方法常见的几个可能,建议先排查。1.注意内网IP和外网IP2.检查ftp服务是否启动 (面板首页即可看到)3.检查防火墙20端口 ftp 21端口及被动端口39000 - 40000是否放行 (如是腾讯云/阿里云等还需检查安全组)4.是否主动/被动模式都不能连接5.新建一个用户看是否能连接6.修改ftp配置文件 将ForcePassiveIP前面的#去掉 将19

  8. 扩展element-ui el-upload组件,实现复制粘贴上传图片文件,带图片预览功能

  9. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部