第一步:建立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. Codeforces Round #242 (Div. 2) A. Squats

    注意题目一次只能改变一个松鼠,Pasha can make some hamster ether sit down or stand up.是单数不是复数 #include <iostream& ...

  2. [小工具]ChemistryHelper

    // 此博文为迁移而来,写于2015年3月25日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vuv7.html 前几天 ...

  3. 【BZOJ】1406: [AHOI2007]密码箱

    http://www.lydsy.com/JudgeOnline/problem.php?id=1406 题意:求$0<=x<n, 1<=n<=2,000,000,000, 且 ...

  4. 不错的判断 UITextView 内容不超过20个字符串的方法

    - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSSt ...

  5. vim安装插件

    1. 下载bundle mkdir ~/.vim/bundlegit clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle 2 ...

  6. How to pull Android database to local file system

    >adb shell# ls /data/data/PACKAGE_NAME/databases# exit// pull it>adb pull /data/data/PACKAGE_N ...

  7. js判断移动端系统

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  8. ZeroclipboardJS+flash实现将内容复制到剪贴板实例

    Zeroclipboard 的实现原理 Zeroclipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.但最新的 Flash ...

  9. tomcat 设置根目录访问

    from http://nj-apple-tree.iteye.com/blog/1635953 1,设置跟路径时,三种方式 在Tomcat默认安装后,tomcat的主目录是webapps/root目 ...

  10. 无法删除DLL文件解决方法（转）

    手动解决dll文件无法删除的终极方法 手动解决dll文件无法删除的终极方法 相信大家都遇见过:在删除一些软件的时候弹出某某文件正在运行或磁盘写保护不能删除这样的报错提示吧.而常常删除不掉的都一些后缀为 ...