第一步:建立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. ACM: 限时训练题解-Heavy Coins-枚举子集-暴力枚举

    Heavy Coins   Bahosain has a lot of coins in his pocket. These coins are really heavy, so he always ...

  2. NOI题库 1768最大子矩阵 题解

    NOI题库 1768最大子矩阵  题解     总时间限制: 1000ms 内存限制: 65536kB   描述   已知矩阵的大小定义为矩阵中所有元素的和.给定一个矩阵,你的任务是找到最大的非空(大 ...

  3. NOI模拟赛Day5

    T1 有and,xor,or三种操作,每个人手中一个数,求和左边进行某一种运算的最大值,当t==2时,还需要求最大值的个数. test1 20% n<=1000 O(n^2)暴力 test2 2 ...

  4. 预定义指令之debug

    1)根据你必须知道的.NET一书, #define DEBUG class Program { static void Main(string[] args) { #if DEBUG Console. ...

  5. iOS上让按钮文本左对齐问题

    一,问题分析 1.在做历史记录视图的时候,由于让键盘退出后才能触发表格的 didselect 那个代理方法,也就是得点两下才触发,而表格中的按钮点一下就可以立即响应. 2.于是我就有了用按钮事件代替 ...

  6. 8.0/9.0 Email 设置

    Email 设置一直都是Odoo的一个坑,巨坑. 先讲结论,发邮件可以用,收还是算了吧 1. 发邮件设置 发的设置相对简单,如果企业邮箱支持catcll all功能,基本不用改动可以直接用,否则需要安 ...

  7. HTML 表单和验证事件

    1.表单验证<form></form> (1)非空验证(去空格) (2)对比验证(跟一个值对比) (3)范围验证(根据一个范围进行判断) (4)固定格式验证:电话号码,身份证号 ...

  8. SQL server 视图、范式

    视图 1.视图的概述       视图其实就是一条查询sql语句,用于显示一个或多个表或其他视图中的相关数据.视图将一个查询的结果作为一个表来使用,因此视图可以被看作是存储的查询 或一个虚拟表.视图来 ...

  9. git管理maven项目实现

    1,在自己的git网新建一个项目.复制项目的地址. 2.在合适的目录  执行 git clone命令,这样就把git的本地仓库建立好了. 3,java中 ,新建maven项目, 在location这里 ...

  10. Rocky4.2下安装金仓v7数据库(KingbaseES)

    1.准备操作系统 1.1 系统登录界面 1.2 操作系统版本信息 jdbh:~ # uname -ra Linux jdbh -x86_64 # SMP Fri Dec :: CST x86_64 G ...