問題鏈接: MVC如何實(shí)現(xiàn)異步調(diào)用輸出HTML頁面
該問題是個(gè)常見的 case, 故寫篇文章用于提示新人。
在asp.net mvc中返回View時(shí)使用的是ViewResult,它繼承自ViewResultBase 同時(shí)它還有個(gè)兄弟PartialViewResult
相信聰明的你已經(jīng)知道了它倆的區(qū)別了，沒錯(cuò) 一個(gè)用于返回整體，另一個(gè)返回局部(部分)。
假設(shè)我有這樣一個(gè)需求，輸入用戶名，然后返回相關(guān)信息。之前的做法可能會(huì)是用json格式來返回用戶的相關(guān)信息，然后到頁面去渲染相關(guān)
的HTML，如果產(chǎn)生的相關(guān)HTML比較大的話，我還是建議你沿用之前的方案(返回json)，因?yàn)閭鬏數(shù)臄?shù)據(jù)少，響應(yīng)快一些。
反之，PartialViewResult 則是返回部分HTML 的不錯(cuò)選擇。
下面就讓我們看下如何使用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);
}
調(diào)用 Controller.PartialView方法時(shí),可以指定 Partial View or View User Control 效果是一樣的
不寫后綴時(shí)，會(huì)查找同目錄和Shared目錄下的文件，也就是在同目錄或Shared目錄下時(shí)可以省略后綴名。
如果目錄下存在同名的情況，會(huì)找第一個(gè)并返回。
eg: 同目錄下有 ViewUserControl.ascx 和 ViewUserControl.cshtml
這時(shí)使用 return PartialView("ViewUserControl");
會(huì)返回 ViewUserControl.ascx 的內(nèi)容，因?yàn)樽帜竌在c前 :)
如果在這種情況下想調(diào)用 ViewUserControl.cshtml
則需要寫全路徑，return PartialView("~/Views/Home/ViewUserControl.cshtml");
當(dāng)想訪問的 Partial View or View User Control 在不同目錄時(shí)，也可以通過全路徑的方式訪問。
