在asp.net mvc中使用PartialView返回部分HTML段

阿非發表於2011-04-07
ASP.NETMVCViewHTML

問題連結: MVC如何實現非同步呼叫輸出HTML頁面

 

該問題是個常見的 case, 故寫篇文章用於提示新人。

 

在asp.net mvc中返回View時使用的是ViewResult,它繼承自ViewResultBase 同時它還有個兄弟PartialViewResult

 

相信聰明的你已經知道了它倆的區別了，沒錯 一個用於返回整體，另一個返回區域性(部分)。

 

假設我有這樣一個需求，輸入使用者名稱，然後返回相關資訊。之前的做法可能會是用json格式來返回使用者的相關資訊，然後到頁面去渲染相關

 

的HTML，如果產生的相關HTML比較大的話，我還是建議你沿用之前的方案(返回json)，因為傳輸的資料少，響應快一些。

 

反之，PartialViewResult 則是返回部分HTML 的不錯選擇。

 

下面就讓我們看下如何使用PartialViewResult:

 

Layout.cshtml

 

<!DOCTYPE html>

<html>

<head>

    <title>@ViewBag.Title</title>

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

</head>

<body>

    @RenderBody()

</body>

</html>

 

Index.cshtml

 

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>

    PartialView Demo</h2>

<div>

    Please write your name here

    <input type='text' id='txtName' />

    <input type='button' value='submit' id='btnOK' />

</div>

<br />

<div id='content'>

</div>

<script type="text/javascript">

    $(function () {

        $('#btnOK').click(function () {

            var data = { Name: $('#txtName').val()};                

            $.ajax({

                type: "POST",

                url: '@Url.Action("PartialViewDemo", "Home")',

                data: data,

                datatype: "html",

                success: function (data) {

                        $('#content').html(data);                   

                },

                error: function () {

                    alert("處理失敗!");

                }

            });

        });      

    });

</script>

 

ViewUserControl.cshtml （Partial View）

 

@model Sample.Models.PartialViewDemoViewModel 

<div> 

 

 

<h2>ViewUserControl.cshtml</h2> 

 

@Model.dt

<br /><br />

Hello~  @Model.Name 

</div>

 

or ViewUC.ascx   （View User Control）

 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Vancl.Sample.Models.PartialViewDemoViewModel>" %>

 

<div>

 

<h2>ViewUC.ascx</h2> 

 

<%=Model.dt %>

 

<br /><br />

 

Hello~  <%=Model.Name %>

 

</div>

 

Model

 

public class PartialViewDemoViewModel

    {

        public string Name { set; get; }

        public DateTime? dt { set; get; }

    }

 

Action

 

[HttpPost]

        public ActionResult PartialViewDemo(PartialViewDemoViewModel model)

        {

            model.dt = DateTime.Now;

            return PartialView("ViewUserControl", model); 

            //return PartialView("ViewUC", model); 

        } 

 

呼叫 Controller.PartialView方法時,可以指定 Partial View or View User Control 效果是一樣的

 

不寫字尾時，會查詢同目錄和Shared目錄下的檔案，也就是在同目錄或Shared目錄下時可以省略字尾名。

 

如果目錄下存在同名的情況，會找第一個並返回。

 

eg: 同目錄下有 ViewUserControl.ascx 和 ViewUserControl.cshtml

 

這時使用 return PartialView("ViewUserControl");

 

會返回 ViewUserControl.ascx 的內容，因為字母a在c前 :)

 

如果在這種情況下想呼叫 ViewUserControl.cshtml

 

則需要寫全路徑，return PartialView("~/Views/Home/ViewUserControl.cshtml");

 

當想訪問的 Partial View or View User Control 在不同目錄時，也可以通過全路徑的方式訪問。

 

Hope this helps,

Sandy

 

相關文章