What is MVC

•M：Model
•V ：View
•C ：Controller
-

How ASP.NET MVC Works?
M.V.C. parts in project
Controller
•Default Url : Home/Index
•Control
•Action
•Index
•
•Route
View
•HTML Helper
•Strong Type HTML Helper
•URL Helper
•Ajax Helper
•HTML5 = HTML + CSS + JavaScript(JQuery)
Model
•Entity Framework
•Validation
•Model Binding
Simple CRUD Example
•List
•Create
•Detail
•Update
•Delete
Http Get/Post
•GET
•POST
Ajax
•Microsoft Ajax
•JQuery
JQuery UI
Benefits
•Clean Separation of Concern (Soc)
•Full markup control
•Enable and makes easily REST (like /category/1/7243, enables SEO)
•More easy client-side integration (Javascript)
•Multi View Engine
•Stateless (No ViewState and PostBack events)
•Maintains
ASP.NET VS ASP.NET MVC
•Car VS Motorcycle
Reference





<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.base.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" />

     <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
</head>
@model IEnumerable<MvcApplication1.Models.Picture>

 @{
    ViewBag.Title = "Index";
}

 <h2>Index</h2>

 <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

 @{  //路徑管理
    var ajaxloadercomplementImg = Url.Content("~/Content/images/ajax-loader-complement.gif"); //ajax圖片位置
    var sendOffShelfCmdUrl = Url.Content("~/Product/ProductOffShelfSingle/");    //商品下架
    }

 <script language="javascript" type="text/javascript">
    var ajaxloadercomplementImg = "@ajaxloadercomplementImg";
    var sendOffShelfCmdUrl = "@sendOffShelfCmdUrl";

     jQuery(document).ready(function () {
            //商品下架初始化
            InitialOffShelfDialog(150, 300, ajaxloadercomplementImg, sendOffShelfCmdUrl, null);
            //商品下架按鈕
            $('#btnOffShelf').click(function () {
                jQuery('#dialogOffShelf').dialog('open');
                //jQueryHelper.showOverlay();
            });
    });
    // 初始化商品下架
    function InitialOffShelfDialog(height, width, ajaxImg, ajaxUrl, openevent) {
        var doalogbody =
        '<div id="dialogOffShelf" title="商品下架" >' +
        '<div style="width:200px; height: 30px;">' +
            '<a id="ErrorMsgOffShelf"></a>' +
            '<p>確定要將此商品下架嗎？</p>' +
            '<div id="loadingImgOffShelf" style="display:none;"><img src="' + ajaxImg + '" alt="處理中"/>處理中...</div>' +
        '</div>' +
     '</div>';

         var jDialog = $(doalogbody);

         jDialog.dialog({
            height: height,
            width: width,
            autoOpen: false,
            modal: true,
            closeOnEscape: false,
            buttons: {
                "確定": function () {
                    jDialog.dialog("disable");
                    OffShelf(ajaxUrl);
                    jDialog.dialog("close");
                },
                Cancel: function () {
                    jDialog.dialog("close");
                }
            }
        });
    }

     //商品下架
    function OffShelf(url) {
        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: { 'productId': $('#Id').val() }, //$('#Id').val() 就是商品編號
            success: function (data) {
                if (typeof (data.error) != 'undefined') {
                    if (data.error != '') { //伺服器回物有錯誤
                        alert(data.error + data.msg);
                    }
                    else  //成功
                    {
                        alert(data.data);
                        $('#productStatus').show();
                    }
                }
            }
        });
    }

 </script>

 <p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            Name
        </th>
        <th></th>
    </tr>

 @foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
        </td>
    </tr>
}
   
</table>

  <input type="button" id="btnOffShelf" value="本商品下架" style="background-color:Yellow; border-style:groove; border-color:Red" />






















































留言

張貼留言

熱門文章