MVC4.0 實現單一Action返回多種結果 - amywechat－IT工程師數位筆記本

文章出處

在開發過程中，我們往往會遇到這種情況。例如：展示學生的詳細信息頁面，加載學生的詳細信息局部視圖，異步請求學生的詳細信息Json數據等等。

一般情況下，我們會寫三個不同的action來支撐前臺數據的調用，Student（view視圖）、PartialStudent（Partial視圖）和JsonStudent（JsonResult視圖）。從實現上，我們寫的代碼沒有任何問題，這些功能都是我們想要的，而且代碼也很整潔。

但是仔細想想，會發現三個Action執行相同的業務邏輯，唯一的區別只是返回個瀏覽器內容的方式不同，為了減少重復的代碼，我們可以做出以下代碼調整

1.仿Request.IsAjaxRequest()，給HttpRequestBase擴展一個IsPartialRequest方法，來判斷是否是局部視圖請求（需要Url上加一個format=partial的參數來輔助實現）

    public static class HttpRequestBaseExtensions
    {
        public static bool IsPartialRequest(this HttpRequestBase request)
        {
            return string.Equals(request["format"], "partial");
        }
    }

2.仿Request.IsAjaxRequest()，給HttpRequestBase擴展一個IsJsonRequest方法，來判斷是否是Json請求（需要Url上加一個format=json的參數來輔助實現）

    public static class HttpRequestBaseExtensions
    {
        public static bool IsJsonRequest(this HttpRequestBase request)
        {
            return string.Equals(request["format"], "json");
        }
    }

3.合并請求的邏輯代碼

        public ActionResult Student()
        {
            if (Request.IsJsonRequest())
                return Json(new { Name = "我是小明" }, JsonRequestBehavior.AllowGet);

            if (Request.IsPartialRequest())
                return PartialView("PartialStudent");

            return View(new { Name = "小明", Sex = "女" });
        }

4.調取數據的前臺代碼如下：

<body>
    <h3>view視圖</h3>
    <div>我是小明</div>

    <h3>PartialView視圖：</h3>
    <div id="partial"></div>

    <h3>Json數據：</h3>
    <div id="json"></div>

    <script src="~/Content/js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $('#partial').load('@Url.Action("Student", "Home", new { area=string.Empty, format="partial" })');

            $.post('@Url.Action("Student", "Home")', { format: 'json' }, function (res) {
                if (res) {
                    $('#json').html(res.Name);
                }
            }, 'json')
        })
    </script>
</body>

5.我們可以看一下渲染效果