AJax技术

第46课:ASP.NET MVC异步AJAX请求部分视图(PartialViewResult)

字号+ 作者:H5之家 来源:H5之家 2017-08-15 14:02 我要评论( )

asp.net mvc调用ajax加载部分视图,实现勾选不同的单选框显示不同的html代码。

视频如果觉得不够清晰,可以在视频的右下角选择高清模式。 (键盘左右键可以切换上下课时)

     补充一下ASP.NET MVC的一个加载部分视图的一个Result,前面我们简单介绍过PartialViewResult,读者可以访问我们前面的课程 第34课:Action的理解-RedirectResult JavaScript PartialViewResult,我们通常我们在action里面可以返回一个ViewResult,那么其实MVC还提供一个允许我们返回HTML的一部分标签的一个Result,那么它就是PartialViewResult ,主要是用来解析一部分的视图。
    我们现在来做一下这个功能,现在有一个表单,根据用户选择的不同省份,然后现在不同省份下面的这个市的一个选择。
1首先我们写一个radio,只能单选的  <input type="radio" value="bj"/>北京 <input type="radio" value="tj"/>浙江 <input type="radio" value="tj"/>广东 <input type="radio" value="tj" />江苏     然后我们创建几个部分视图    在shard目录下面创建_BJ.cshtml _GD.cshtml _JS.cshtml _ZJ.cshtml,它们都是部分视图
     然后我们给radio注册一个点击事件,点击的时候得到radio的type <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script> $(function () { $("input[type='radio']").click(function () { var value = $("input[type='radio']:checked").val(); }); }); </script> 2然后使用jquery的ajax的请求,返回html代码,传递一个name的参数过去 $.ajax({ type: "GET", url: "/home/province", dataType: "html", data: "name=" + value, beforeSend: function (XMLHttpRequest) { $("#city").text("正在查询..."); }, success: function (html) { $("#city").html(html); }, complete: function (XMLHttpRequest, textStatus) { //隐藏正在查询图片 }, error: function () { //错误处理 $("#city").text("出错了..."); } });     然后我们去实现这个部分视图PartialViewResult 这个,我们在ACTION里面 要判断参数,如果参数不是那几个的话,那么就返回一个错误页的视图 public PartialViewResult Province(string name) { if (name!="_JS"&& name != "_GD"&& name != "_BJ"&& name != "_ZJ") { return PartialView("_Error");//不能返回View 因为View是一个完整的html } return PartialView(name); } 每个部分视图给不同html代码,也可以查找数据库,读取不同的市出来,然后渲染这个视图,我们可以给不同的部分视图不同的数据,不同的部分视图可以是不一样@model List<string> <span>广东下面的市</span> <ul> @for (int i = 0; i < Model.Count; i++) { <li>@Model[i]</li> } </ul> 3下面是部分视图的actionpublic PartialViewResult Province(string name) { if (name!="_JS"&& name != "_GD" && name != "_BJ" && name != "_ZJ") { return PartialView("_Error");//不能返回View 因为View是一个完整的html } if (name == "_GD") { var data = new List<string>(); data.Add("广州"); data.Add("深圳"); ViewBag.Title = "北盟网校"; return PartialView(name,data); } return PartialView(name); } 参考

在asp.net mvc中使用PartialView返回部分HTML段

PartialViewResult不鸟_ViewStart.cshtml

PartialViewResult 类


课时列表

  • 第01课:认识ASP.NET MVC

    00:15:54

  • 第02课:第一个ASP.NET MVC项目实现一个Hello Word

    00:23:14

  • 第03课:介绍一下MVC项目的文件结构

    00:12:03

  • 第04课:我们来重点说说和改造一下我们的这个HelloWord项目

    00:15:17

  • 第05课:我们来改造一下我们的项目,去掉一些不必要和搭建EF环境

    00:06:18

  • 第06课:搭建EF开发环境 第一节

    00:27:21

  • 第07课:搭建EF开发环境 第二节 处理dbcontext的问题

    00:13:14

  • 第08课:MVC中表单提交-以前的这种使用Form来获取

    00:16:13

  • 第09课:MVC中表单提交-直接在action方法的参数中绑定

    00:05:22

  • 第10课:MVC中表单提交-直接表单实体绑定

    00:08:19

  • 第11课:使用HtmlHelper来呈现表单

    00:11:28

  • 第12课:视图页面使用Model来呈现

    00:14:17

  • 第13课:另外一个更强大的Helper 就是EditorForModel

    00:08:07

  • 第14课:完善我们的这个EditorForModel 给实体添加标注 进行验证

    00:10:46

  • 第15课:我们来开始讲一下这个mvc的路由 默认路由器

    00:09:45

  • 第16课:自定义自己的路由和顺序的问题

    00:22:12

  • 第17课:使用命名空间来区分不同路由规则下面的控制器

    00:09:57

  • 第18课:路由规则实践-默认博客园

    00:20:31

  • 第19课:完成博客园文章路由规则

    00:15:48

  • 第20课:完成博客园文章路由规则-问题的解决

    00:10:16

  • 第21课:区域的学习Area

    00:16:56

  • 第22课:区域独立放到一个类库里面

    00:17:46

  • 第23课:后台往前台传递参数-Model

    00:10:52

  • 第24课:后台往前台传递参数-ViewBag

    00:03:43

  • 第25课:后台往前台传递参数-ViewData

    00:03:42

  • 第26课:Razor基本语法-主要规则

    00:14:02

  • 第27课:Razor有自己的类型转换扩展方法,主要是As..和Is系列

    00:05:08

  • 第28课:自定义帮助类Helper-直接视图中定义

    00:05:16

  • 第29课:视图中的布局Layout和RenderBody

    00:07:58

  • 第30课:Section区域

    00:06:03

  • 第31课:使用for foreach if else 着一些逻辑

    00:02:26

  • 第32课:在视图中输出另外一个视图的内容RenderPartial,Partial,RenderAction

    00:06:33

  • 第33课:Action的理解-viewResult josnresult contentresult

    00:21:39

  • 第34课:Action的理解-RedirectResult JavaScript PartialViewResult

    00:14:49

  • 第35课:Action的理解-FileResult EmptyResult

    00:11:33

  • 第36课:Action的理解-HttpStatusCodeResult HttpNotFoundResult

    00:10:44

  • 第37课:重点来讲讲ViewResult和View方法

    00:14:55

  • 第38课:MVC中使用FormsAuthenticationTicket完成登录验证

    00:13:18

  • 第39课:FormsAuthenticationTicket完成登录验证

    00:31:14

  • 第40课:HTML 帮助器 Htmlhelper

    00:14:44

  • 第41课:自定义扩展方法

    00:09:37

  • 第42课:自定义控件htmlhelper

    00:17:33

  • 第43课:editorformodel的使用和DisplayTemplates和EditorTemplates字段模板

    00:58:49

  • 第44课:自定义验证标注 包括服务器端和客户端

    00:43:59

  • 第45课:标注的使用和meta元素据的理解

    00:14:14

  • 第46课:ASP.NET MVC异步AJAX请求部分视图(PartialViewResult)的实现

    00:45:10

  • 首页
  • 上一页
  • 1
  • 下一页
  • 尾页

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • jquery请求servlet实现ajax异步请求的示例

      jquery请求servlet实现ajax异步请求的示例

      2017-08-15 09:00

    • asp.net下ajax.ajaxMethod使用方法

      asp.net下ajax.ajaxMethod使用方法

      2017-08-06 08:04

    • 9.1.2 Ajax与传统Web技术的区别

      9.1.2 Ajax与传统Web技术的区别

      2017-08-03 08:00

    • Ajax异步请求技术讲解

      Ajax异步请求技术讲解

      2017-07-20 16:06

    网友点评