第一步:建立mobile项目类型

第二步:添加针对对话框的的DialogController.cs:

建立这个Controller的目的是此Dlg可以反复使用,把它做成一个固定界面,其他的Controller也可以调用。

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using System.Web.Mvc;

 namespace MvcDlgTest.Controllers

 {

     public class DialogController : Controller

     {

         //

         // GET: /Dialog/

         public ActionResult Index(string OKAction,string CancelAction,string CtrlName,string Message)

         {

             if (string.IsNullOrWhiteSpace(CtrlName))

                 CtrlName = "Home";

             ViewBag.CtrlName = CtrlName;

             ViewBag.Message = Message;

             ViewBag.OKAction = OKAction;

             ViewBag.CancelAction = CancelAction;

             return View();

         }

     }

 }

针对上述的Index的View为:

Index.cshtml：

@{

    ViewBag.Title = "温馨提示";

    Layout = "~/Views/Shared/_DlgLayout.cshtml";

}

<h2>@ViewBag.Message</h2>

<div data-inline="true">

@Html.ActionLink("取消", (string)ViewBag.CancelAction, (string)ViewBag.CtrlName, null, new { @data_role = "button", @data_inline = "true" })

@Html.ActionLink("确定", (string)ViewBag.OKAction, (string)ViewBag.CtrlName, null, new { @data_role = "button", @data_inline = "true" })　　

</div>

给上方的View做一个专用母版.复制默认模板_Layout.cshtml,,改名为: _DlgLayout.cshtml,内容如下:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>@ViewBag.Title</title>

        <meta name="viewport" content="width=device-width" />

        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

        @Styles.Render("~/Content/mobileCss", "~/Content/css")

        @Scripts.Render("~/bundles/modernizr")

    </head>

    <body>

        <div data-role="page" data-theme="b">

            <div data-role="header">

             <h1>@ViewBag.Title</h1>

           </div>

             <div data-role="content">

                @RenderBody()

            </div>

        </div>

        @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")

        @RenderSection("scripts", required: false)

    </body>

</html>

修改Home/index.cshtml:

@{

    ViewBag.Title = "Home Page";

}

   <h2>@Html.ActionLink("访问关于1", "Index", "Dialog", new {OKAction ="About", CancelAction="Index",CtrlName="Home",Message = "打算访问关于吗?" }, new{@data_rel="dialog",@data_transition="pop"})</h2>

   <h2>@Html.ActionLink("访问联系方式", "Index", "Dialog", new { OKAction = "Contact", CancelAction = "Other", CtrlName="Home",Message = "打算访问联系方式吗?" }, new { @data_rel = "dialog", @data_transition = "pop" })</h2>

 <h2> <a href="@Url.Action("Index", "Dialog",new { OKAction = "About", CancelAction = "Index", CtrlName = "Home", Message = "打算访问关于吗?"})" data-rel = "dialog", data-transition = "pop" > 访问关于2</a></h2>

在HomeController.cs文件中,增加一个Other Action以及相应的View Other,增加测试变化。

演示效果图:

演示代码下载->

MVC4中重复使用JQuery Mobile Dialog的做法实践.的更多相关文章

  1. [转]Jquery Mobile dialog的生命周期

    本文转自:http://www.cnblogs.com/jackhuclan/archive/2012/04/05/2432972.html JQuery Mobile对htm5的移动开发绝对是个好用 ...

  2. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  3. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素

    相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  4. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 面板

    左滑动面板效果: 右滑动面板效果: @{ ViewBag.Title = "JQuery Mobile Web Page"; } <!DOCTYPE html> < ...

  6. jQuery Mobile 中创建按钮

    在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素 使用 <input> 元素 使用 data- ...

  7. jQuery Mobile Api

        jQuery Mobile提供了使用Javascript与框架(html5)通信以及进行内容管理的API.下面介绍具体事件. 文档事件     mobileinit事件会在jQuery Mob ...

  8. JQuery Mobile - 解决动态更新页面内容，CSS失效问题！

    今天编写JQuery Mobile程序,需要对数组数据动态创建,并且每条数据对应一个复选框,于是我很顺利写了一个Demo,当我运行时候发现,和我期望的不一样!复选框确实创建出来了,但是却没有CSS效果 ...

  9. jquery mobile转场时加载js失效（转）

    jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...

随机推荐

  1. Jquery实现下拉联动表单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【HDU】2147 kiki's game

    http://acm.hdu.edu.cn/showproblem.php?pid=2147 题意:n×m的棋盘,每次可以向左走.向下走.向左下走,初始在(1, m),n,m<=2000,问先手 ...

  3. 【BZOJ】3834: [Poi2014]Solar Panels

    http://www.lydsy.com/JudgeOnline/problem.php?id=3834 题意:求$max\{(i,j)\}, smin<=i<=smax, wmin< ...

  4. Selenium_模拟淘宝登录Demo

    package com.lkb.start; import com.alibaba.fastjson.JSONObject; import com.lkb.bean.Entity; import co ...

  5. 线上Java应用排查和诊断规范

    @郑昀 整理 标准做法一:OOM触发HeadpDump 目的: OOM发生时,输出堆栈快照文件,供研发人员分析. 在JVM中,如果98%的时间是用于 GC 且可用的 Heap size 不足2%的时候 ...

  6. ng-repeat 指令

    <!--索引属性:$index,$first,$middle,$last--> <!--样式属性:ng-class-even,ng-class-odd--> <tr ng ...

  7. CSS3两个动画顺序衔接播放

    问题描述: 第一个动画先播放,播放完成后,第二个动画紧接着播放. 解决办法: 1. 将第二个的延迟时间(animation-delay) 设置成第一个的持续时间( animation-duration ...

  8. jQuery hide()并不等于hide(0)

    在实际使用中,经常用hide()函数来隐藏HTML元素,通常是没有什么问题的,但在一次做二级下拉菜单时遇到了问题,后来才发现有时候“speed”是不能省略的,即使“speed=0”,也就是说hide( ...

  9. JAVA递归算法

    1.什么是递归算法 递归算法就是直接或间接调用自己的算法 2.问题1:一列数的规则如下: 1.1.2.3.5.8.13.21.34 ,求第30位数是多少?使用递归实现 public class Fib ...

  10. html5语义标签