第一步:建立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. chrome快捷键，让开发更快捷:

    9:18 2015/12/9chrome快捷键,让开发更快捷:部分:按住 Ctrl 键,然后点击链接 从后台在新标签页中打开链接,但您仍停留在当 前标签页中 按住 Ctrl+Shift 键,然后点击链 ...

  2. 'Could not load NIB in bundle: 'NSBundle xxx/storeFlix.app> ' with name 'UIViewController-w6Q-ra-j06' and directory 'StoreFlixIpad.storyboardc

    1.此代码是从 git clone xxx 下载的. 2.使用 sourcetree 下载即可解决此问题.

  3. [慢查优化]慎用MySQL子查询，尤其是看到DEPENDENT SUBQUERY标记时

    案例梳理时间:2013-9-25 写在前面的话: 在慢查优化1和2里都反复强调过 explain 的重要性,但有时候肉眼看不出 explain 结果如何指导优化,这时候还需要有一些其他基础知识的佐助, ...

  4. asp.net发送邮件

    using System.Net.Mail; /// 发送邮件 /// </summary> /// <param name="sender"></p ...

  5. MyBatis调用存储过程，含有返回结果集、return参数和output参数

    Ibatis是我们经常使用的O/R映射框架,mybats是ibatis被Google收购后重新命名的一个工程,当然也做了大量的升级.而调用存储过程也是一次额C/S架构模式下经常使用的手段,我们知道,i ...

  6. hbase的查询scan功能注意点（setStartRow, setStopRow）

    来自http://hi.baidu.com/7636553/blog/item/982beb17713bc004972b43ee.html hbase的scan查询功能注意项: Scan scan = ...

  7. 重命名PDF打印文件名

    Odoo系统默认打印出来的PDF文件都是以当前文档模型对象对应的模板文件名命名的,对用户来说,这样的命名很不友好. 我们希望能够将打印出来的文件名以单号命名,下面是实现这种目的的方法. 在report ...

  8. Thinkphp框架感悟（一）

    一.assign() /** * 分析: * 此处是Controller类里面的assign方法,我们一般写的控制器所调用的assign方法就是调的这个. * 而这个方法就干了三件事:1.获取传过来的 ...

  9. spring security 匿名登录

    匿名登录,即用户尚未登录系统,系统会为所有未登录的用户分配一个匿名用户,这个用户也拥有自己的权限,不过他是不能访问任何被保护资源的. 设置一个匿名用户的好处是,我们在进行权限判断时,可以保证Secur ...

  10. MyEclipse安装lombok

    1. 将lombok.jar复制到myeclipse.ini所在的文件夹 2. 打开myeclipse.ini,插入以下两行: -Xbootclasspath/a:lombok.jar-javaage ...