Chuyển đến nội dung chính

Sử dụng JQuery Mobile với ASP.NET MVC

JQuery Mobile là một Web UI Framework, thuộc cùng một dự án với JQuery Project. JQuery Mobile được xây dựng dựa trên JQuery Core và mục tiêu là mang lại 1 khung giao diện người dùng phù hợp trên các nền tảng di động.

Để bắt đầu sử dụng Jquery Mobile framework, bạn cần download các file .js và css tại: http://jquerymobile.com/download/ hoặc sử dụng các file được đưa lên trên mạng:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
Đầu tiên, bạn tạo 1 dự án ASP.NET MVC empty.
Copy và paste các file *.js vào thư mục Scripts và *.css vào thư mục Contents.
Tạo file _LayoutMobile.html:
<html>
<head>
    <link rel="stylesheet" 
	href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <script type="text/javascript" 
	src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" 
	src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>My MVC Application</h1>
        </div>
        <div data-role="content">@RenderBody()</div>
        <div data-role="footer">
            <h4>Page Footer</h4>
        </div>
    </div>
</body>
</html>
Ở mỗi thẻ div, bạn đặt thuộc tính data-role="page". Điều này đảm bảo Jquery Mobile nhận biết và thêm các file css tương ứng.
Tạo file HomeController, bạn tạo 2 ActionResult là Index và About.

Và tạo tương ứng 2 trang View:
Index.cshtml
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
<ul data-role="listview">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href=http://asp.net/mvc 
	title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
tương tự với trang About.cshtml 
@{
    ViewBag.Title = "About";
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
<h2>About</h2>
Put content here.
Demo:
 Bạn có thể download project mẫu tại đây: Mediafire

Labels:

Nhận xét

Đăng nhận xét