- Html.Partial和Html. RenderPartial用法
Html.partial和RenderPartial的用法與區別
Html.partial和RenderPartial都是輸出html片段,區別在於
Partial是將視圖內容直接生成一個字符串並返回(相當於有個轉義的過程),RenderPartial方法是直接輸出至當前 HttpContext(因為是直接輸出,所以性能好)。因此它們在視圖中的使用方式是不同的:
MVC2:
輸出到 HttpContext
輸出為string 直接到頁面
MVC3:
@Html.Partial("BasicChart")
@{
Html.RenderPartial("BasicChart");
}
Html.partial和RenderPartial的其它三個重載很有用,第二個重載@{Html.RenderPartial("BasicChart",model);}
用這個重載可以在部分視圖里使用強類型,然后在主視圖中使用第二個參數傳model過去,而不用controller
比如從list中傳其中一項myClass過去
第三個重載用來傳ViewData同理,如:@{Html.RenderPartial("BasicChart",ViewData["myData"]);}
示例:
<div id="logindisplay">
@*@Html.Partial("_LogOnPartial")*@
@{
Html.RenderPartial("_LogOnPartial");
}
</div>
另:相關資料:
@RenderBody、@RenderSection、@RenderPage、Html.RenderPartial、Html.RenderAction的作用和區別
1. RenderBody
在Razor引擎中沒有了“母版頁”,取而代之的是叫做“布局”的頁面(_Layout.cshtml)放在了共享視圖文件夾中。在這個頁面中,會看到標簽里有這樣一條語句:
@RenderBody()
其實它的作用和母版頁中的服務器控件類似,當創建基於此布局頁面的視圖時,視圖的內容會和布局頁面合並,而新創建視圖的內容會通過布局頁面的@RenderBody()方法呈現在標簽之間。
這個方法不需要參數,而且只能出現一次。
2. RenderPage
從名稱可以猜出來這個方法是要呈現一個頁面。比如網頁中固定的頭部可以單獨放在一個共享的視圖文件中,然后在布局頁面中通過這個方法調用,用法如下:
@RenderPage(“~/Views/Shared/_Header.cshtml”)
帶參數
@RenderPage(“~/Views/Shared/_Header.cshtml”,new{parm="my",parm2="you")
調用頁面獲取參數:
//獲取 RenderPage() 傳遞過來的參數
@PageData["param"]
3. RenderSection
布局頁面還有節(Section)的概念,也就是說,如果某個視圖模板中定義了一個節,那么可以把它單獨呈現出來,用法如下:
@RenderPage(“~/Views/Shared/_Header.cshtml”)
@RenderBody()
//模板里添加了一個節
@RenderSection(“head”)
當然還要在視圖中定義節,否則會出現異常:
@section head{
//do
}
為了防止因缺少節而出現異常,可以給RenderSection()提供第2個參數:
@RenderSection("SubMenu", false)
或
@if (IsSectionDefined("SubMenu"))
{
@RenderSection("SubMenu", false)
}
else
{
<p>SubMenu Section is not defined!</p>
}
4.@Html.Partial
Partial 每次都會創建自己的 TextWriter 實例並且把內容緩存在內存中. 最后把所有 writer輸出的內容發送到一個 MvcString對象中
更多時候我們會使用 @{ Html.RenderPartial("Details"); } 而不是@Html.Partial
RenderPage()和RenderPartial()的區別
RenderPage()調用的頁面只能使用其傳遞過去的數據。
而RenderPartial()是可以使用viewdata,model等數據的。
Html.RenderPartial和Html.RenderAction的區別
Html.RenderPartial適合用在重覆使用的UserControl,並且只需要透過Model來呈現內容,或是對於廣告的UserControl也適合使用。 Html.RenderAction則會先去呼叫Controller的Action方法,如果此UserControl是需要透過資料庫取得資料來呈現(透過Action來讀取資料庫),此時會比較適合使用此方式。
5.Html.Partial("MyView")
以MvcHtmlString形式返回試圖流,遵循標准的路由規則。
Renders the "MyView" view to an MvcHtmlString. It follows the standard rules for view lookup (i.e. check current directory, then check the Shared directory).
Html.RenderPartial("MyView")
與Html.Partial()類似,區別是直接輸入到頁面,不進行緩存。
Does the same as Html.Partial(), except that it writes its output directly to the response stream. This is more efficient, because the view content is not buffered in memory. However, because the method does not return any output, @Html.RenderPartial("MyView") won't work. You have to wrap the call in a code block instead: @{Html.RenderPartial("MyView");}.
RenderPage("MyView.cshtml")
返回帶路徑、文件名等的特殊視圖,同Heml.RenderPartial()一樣直接輸出,不進行緩存。可以傳遞model變量。
Renders the specified view (identified by path and file name rather than by view name) directly to the response stream, like Html.RenderPartial(). You can supply any model you like to the view by including it as a second parameter
RenderPage("MyView.cshtml",MyModel)
I prefer
@RenderPage("_LayoutHeader.cshtml")
Over
@{Html.RenderPartial("_LayoutHeader");}
Only because the syntax is easier and it is more readable. Other than that there doesn't seem to be any differences functionality wise.
2.<span>@Html.Raw("aaa<br/>bb")</span>
輸出為aaa
bb
@{
ViewBag.Title = "Index<br/>aa";
}
<span>@ViewBag.Title</span>
輸出為Index<br/>aa
asp.net MVC3.0 中@Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction
1、帶有Render的方法返回值是void,在方法內部進行輸出;不帶的返回值類型為MvcHtmlString,所以只能這樣使用:
@Html.Partial 對應 @{Html.RenderPartial(....);}
@Html.Action 對應 @{Html.RenderAction(....);}
2、Html.Partial可以直接提供用戶控件名作為參數,
而Html.Action需要有對應的Action,在Action內部返回PartailResult(即retun PartialView())。
3、對於簡單的沒有任何邏輯的用戶控件,推薦使用Html.Partial;對於需要設置一些Model的用戶控件,推薦使用Html.Action。當然,有Model數據也是可以使用Html.Partial方法的,可以看方法的重載。
4、使用Html.Action有個好處,就是可以根據不同的場景選擇不同的用戶控件。比如:@Html.Action("UserInfoControl")在對應的 UserInfoControl這個Action中,在用戶未登錄的時候,可以retun PartialView("LogOnUserControl");登錄后,可以retun PartialView("UserInfoControl");
Html.Partial和Html.RenderPartial, Html.Action和Html.RenderAction的區別
Html.Partial返回的是一個字符串, Html.RenderPartial會將內容寫入到response中, 返回void 在Razor中,下面2中寫法是等價的: @Html.Partial("ViewName") @{Html.RenderPartial("ViewName"); } 你可以使用 Html.Partial, 把Partial View的輸出保存到變量中, 但是Html.RenderPartial不行. Html.RenderPartial會在執行的時候,直接把輸出寫進Response. Html.Action和Html.RenderAction的區別和上面的就是一樣的了。 |
在MVC中要實現Ajax有很多的方式,有微軟自己的MicrosoftAjax,也可以用JQuery的AJax來實現,如果對其他的JavaScript框架熟悉,還可以采用其他的實現方案,比如說Prototype等等。
以下是微軟自己的實現方案。
需要預先加載的JavaScript文件:
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
在MVC中已經提供了下面幾個現成的HTML Hepler:
- Ajax.ActionLink()
- Ajax.BeginForm()
- Ajax.RouteLink()
- Ajax.BeginRouteForm()
Ajax.ActionLink
使用ActionLink發送異步請求的方法:
View
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div>
@Ajax.ActionLink("Click Me", "GetTime", new AjaxOptions { UpdateTargetId = "myPnl" })
Controller
public ActionResult GetTime()
{
return Content(DateTime.Now.ToString());
}
以上示例使用ActionLink超鏈接發送請求到GetTime,返回一個ContentResult,通過AjaxOptions中的UpdateTargetId屬性指定了需要更新的頁面元素。
AjaxOptions中還有其他可以指定的屬性:
Confirm |
等效於javascript中的return confirm(msg),在點擊該鏈接時先提示需要確認的信息。 |
HttpMethod |
指定使用Get或者是Post方式發送Http請求 |
InsertMode |
指定使用哪一種方式在指定的UpdateTargetId元素更新數據,可以有三種方式: "InsertAfter", "InsertBefore", or "Replace" 。默認為:Replace |
LoadingElementDuration |
Loading元素顯示的時間 |
LoadingElementId |
可以指定在Http請求期間顯示的Loading元素 |
OnBegin |
在Http請求之前執行的javascript方法 |
OnComplete |
在Http請求結束時執行的方法 |
OnFailure |
在Http請求失敗時執行的方法 |
OnSuccess |
在Http請求成功時執行的方法 |
UpdateTargetId |
Http請求更新的頁面元素 |
Url |
Http請求的Url |
關於AjaxOptions中各方法的使用方法,在之前關於ActionResult的介紹的文章中有相關的列子:
注意點
- OnComplete和OnSuccess的區別:OnComplete是獲取了Http請求時引發的,此時頁面還沒有進行更新,OnSuccess是在頁面已經更新后引發的。
- ActionLink中的actionName和AjaxOption中的Url的關系:兩者分別產生的HTML如下,但是執行的結果相同,希望有高手能解釋下這兩者有無區別。
<a href="/Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me</a>
<a href="/" data-ajax-url="Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me</a>
Ajax.BeginForm
該Html Hepler可以實現使用Ajax方式提交Form,在指定的頁面元素中顯示提交的結果。
View
@model MvcAjax.Models.UserModel
@{
ViewBag.Title = "AjaxForm";
}
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div>
@using (Ajax.BeginForm("SaveUser", new AjaxOptions { UpdateTargetId = "myPnl" }))
{
<table>
<tr>
<td>
@Html.LabelFor(m => m.UserName)
</td>
<td>
@Html.TextBoxFor(m => m.UserName)
</td>
</tr>
<tr>
<td>
@Html.LabelFor(m => m.Email)
</td>
<td>
@Html.TextBoxFor(m => m.Email)
</td>
</tr>
<tr>
<td>
@Html.LabelFor(m => m.Desc)
</td>
<td>
@Html.TextBoxFor(m => m.Desc)
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
}
Model
using System.ComponentModel.DataAnnotations;
namespace MvcAjax.Models
{
public class UserModel
{
[Display(Name = "Username")]
public string UserName { get; set; }
[Display(Name = "Email")]
public string Email { get; set; }
[Display(Name = "Description")]
public string Desc { get; set; }
}
}
Controller
public ActionResult AjaxForm()
{
return View();
}
[HttpPost]
public ActionResult SaveUser(UserModel userModel)
{
//Save User Code Here
//......
return Content("Save Complete!");
}
以上示例代碼實現了采用Ajax提交Form數據的大概方法,在Ajax.BeginForm中同樣使用AjaxOptions來設置Ajax請求的參數,和Ajax.ActionLink中的使用方法相同。
其他:
在介紹JavaScriptResult時曾經提到了該ActionResult在普通的請求中是直接當作文件Reponse出的,但是在Ajax請求中,便可以使用該Result,並且執行Result中的JavaScript。
比如將上面的Conntroller更改為以下代碼:
[HttpPost]
public ActionResult SaveUser(UserModel userModel)
{
//Save User Code Here
//......
//return Content("Save Complete!");
return JavaScript("alert('Save Complete!');");
}
便可在執行改Ajax請求之后執行JavaScriptResult中的語句。