第一步:建立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. 【BZOJ1008】1008: [HNOI2008]越狱 简单组合数学+快速幂

    Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 In ...

  2. locale的设定及其LANG、LC_ALL、LANGUAGE环境变量的区别

    locale这个单词中文翻译成地区或者地域,其实这个单词包含的意义要宽泛很多.Locale是根据计算机用户所使用的语言,所在国家或者地区,以及当地的文化传统所定义的一个软件运行时的语言环境. [ora ...

  3. ObjectContext,DataContext和DBContext 分别获取linq 的sql方法

    ObjectContext 先定义一个扩展方法: public static string ToTraceString<T>(this IQueryable<T> t) { s ...

  4. JS引用另外JS文件的顺序问题。

    1.在a.js中可以引用b.js文件,这样就可以在网页中只引用a.js文件,从而可以使用a.js和b.js文件中的所有方法. 引用格式如下:document.write('<script typ ...

  5. JS代码判断字符串中有多少汉字【转】

    $("form").submit(function () { 2 var content = editor.getContentTxt(); 3 var sum = 0; 4 re ...

  6. GO语言练习：网络编程 TCP 示例

    1.代码 2.编译及运行 1.网络编程 TCP 示例 simplehttp.go 代码 package main import ( "net" "os" &qu ...

  7. 纪念逝去的岁月——C/C++交换排序

    交换排序 代码 #include <stdio.h> void printList(int iList[], int iLen) { ; ; i < iLen; i++) { pri ...

  8. java工程展示问题

    当java工程这样展示时,需要选择window---->Open Perspective----->java改变java工程的展示方式

  9. 好看的css3按钮和文本框

    .button{ width: 80px; line-height: 25px; text-align: center; ; color: #fff; text-shadow:1px 1px 1px ...

  10. 诅咒JavaScript之：Jquery ajax提交内容异常

    jquery ajax 通过url提交内容,在服务器端获取却出现很奇怪的值,代码如下: ajaxurl = "aspx/logTable.ashx?action=load&Every ...