摘要:[ASP.NET MVC]如何使用PARTIAL VIEW(部分檢視)
1.第一個作法是：新增在~/Views/Shared/路徑下，通常是template會用到的partialView, partialview檔案名稱就跟controller的actionResult名稱相同：
這個partialView加在這路徑下：
而且內容如下，可以傳入Server端的參數喔：
<span style="color:red;">線上人數:88888</span>
<span>@ViewBag.ServerVar</span>controller裡面是：
public ActionResult OnlineUserCounter()
{
ViewBag.ServerVar = "Html.RenderAction is appropriate for dynamic data";
return PartialView();
}cshtml端這樣呼叫：注意一下，只有@Html.RenderAction吃的到Server端的參數喔
@*這樣寫效能較差，不推薦使用*@
@Html.Partial("OnlineUserCounter")
@*這樣寫效能較Html.Partial好，建議使用*@
@{
Html.RenderPartial("OnlineUserCounter");
}
@*這樣寫的話還可以傳參數，建議使用*@
@{
Html.RenderAction("OnlineUserCounter");
}執行結果像是這樣：
2.第二個作法是：把cshmlt新增在~/Views/Controller名稱資料夾下，通常是Ajax用的, cshtml檔案名稱習慣會加上底線(避免直接被caller存取)
這是PartialView的檔案，加入在這邊：
這個PartialView內容是：
@model MvcGuestbook.Models.Guestbook
<table border="1">
<tr>
<td colspan="2" style="text-align:center">
<h2>這是Guestbook第一筆資料</h2>
</td>
</tr>
<tr>
<td style="text-align:right;">
@Html.DisplayNameFor(model => model.Message)
</td>
<td style="text-align:left;">
@Html.DisplayFor(model => model.Message)
</td>
</tr>
<tr>
<td style="text-align:right;">
@Html.DisplayNameFor(model => model.CreatedOn)
</td>
<td style="text-align:left;">
@Html.DisplayFor(model => model.CreatedOn)
</td>
</tr>
</table>Controller呼叫的方式如下：
//取得Guestbook的第一筆資料的時候，以防Server取得的是Cache，必須即時更新
[OutputCache(NoStore=true,Duration=0)]
public ActionResult GuestbookTop1Data()
{
var guestbook = GetGuestbookTop1Data();
return PartialView("_GuestbookTop1Data", guestbook);
}執行結果如下，此時還沒設定限定Ajax專用，因此甚至用網頁打網址都可直接開：http://localhost:4102/Guestbook/GuestbookTop1Data
如果你要增加安全性，因此要設定為Ajax限定專用的話，controller改成這樣：
[OutputCache(NoStore=true,Duration=0)]
public ActionResult GuestbookTop1Data()
{
var guestbook = GetGuestbookTop1Data();
//return PartialView("_GuestbookTop1Data", guestbook);
//限定同網站的Ajax專用
if (Request.IsAjaxRequest())
{
return PartialView("_GuestbookTop1Data", guestbook);
}
else
{
return Content("Fail");
}
}這時候在用網頁直接打網址開的話會出現錯誤訊息：
此時要使用這個ParitalView的話就只能用Ajax方式，如果用.net內建的方式呼叫ajax的話是這樣，記得method要用post喔，以下是cshtml的呼叫法：
<div id="GuestbookTop1Data">
<!--兩個都要 include進來，注意順序有差-->
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
@Ajax.ActionLink("Ajax.ActionLink show the top 1 data in Guestbook", "GuestbookTop1Data",
new AjaxOptions { UpdateTargetId = "GuestbookTop1Data", InsertionMode = InsertionMode.Replace, HttpMethod = "POST" })
</div>這是mvc內建的ajax的hyperlink呼叫法，點下去連結之前：
點下去連結之後：
要自訂jquery去做ajax呼叫也可以，如下，只是html與javacript要一起格式化有點麻煩，乾脆直接貼上囉：
<div id="GuestbookTop1DataByScripts"> <!--兩個都要 include進來，注意順序有差--> <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> <script type="text/javascript"> function MyAjaxCall() { var resultConfirm = ''; $.ajax({ type: "post", url: "http://localhost:4102/Guestbook/GuestbookTop1Data", url: "/Guestbook/GuestbookTop1Data", //不用傳參數的話，放個大括弧就好 data: "{}", //data: '{txtContent: "' + $("input[id*=txtTest]").val() + '" }', contentType: "application/html; charset=utf-8", dataType: "html", async: false,//由於最後需要使用ajax取得的result的數值，必須設定為false(才會變成sync同步執行） cache: false, //防止ie8一直取到舊資料的話，請設定為false success: function (result) { //平常是取得result.d才對，但是這邊要取result resultConfirm = result; }, failure: function (response) { //callback function result(on failure) alert(response.d); } }); $("#GuestbookTop1DataByScripts").html(resultConfirm); } </script> <input type='button' id='AjaxCallTop1Btn' value='AjaxCallTop1Btn' onclick='MyAjaxCall();' /> </div>
然後執行看看，效果一樣的拉：以下是點下去ajax按鈕之前：
自訂ajaxCall點下去後：
