在MVC中加載view(點開鏈接)的方式


主要有:

  • Html.ActionLink
  • Html.RenderPartial
  • Html.RenderAction
  • Html.Partial
  • AJAX.ActionLink
  • load
  • 瀏覽器對象模型 (BOM)(Browser Object Model)

html中

1. Html.ActionLink

比如html代碼

@Html.ActionLink("查看", "index", "home",  new { ID="first"}, new { @class="mybutton"})     

查看頁面上形成的元素是錨標簽。       

<a class="mybutton" href="/home/index?id=first">查看</a>

 

2. Html.RenderPartial與 Html.RenderAction

Html.RenderPartial與Html.RenderAction 這個兩個方法都是用於把MVC用戶控件嵌入到View中。

Html.RenderPartial是直接將MVC用戶控件嵌入到界面上

Html.RenderAction是通過Controller中的Action來調用MVC用戶控件

在MVC 2.0中,新增加了Html.RenderAction();這個方法RenderPartial有點不一樣,他是直接重新執行一次Controller → Model → View的順序,然后把產生的頁面帶回到原來的View中再回傳。

所以Html.RenderAction中傳遞的參數是執行的Controller和Action名稱。

若是在控制器中的某個方法只能讓Html.RenderAction()調用時,可以在方法上添加特性[ChildActionOnly],其它的地方無法訪問。

復制代碼
public class ChildActionOnlyTestController : Controller
{
    [ChildActionOnly]
    public ActionResult GetSupplierList() 
    {
        var controller = new SupplierController();
        return controller.SupplierList();
    }
}
復制代碼

3. Html.RenderPartial和Html.Partial

語法上不同

 @Html.Partial 對應  @{Html.RenderPartial(....);}

 

在Razor中,下面2中寫法是等價的:

@Html.Partial("ViewName")

@{Html.RenderPartial("ViewName");  }

使用 Html.Partial, 把Partial View的輸出保存到變量中, 但是Html.RenderPartial不行. Html.RenderPartial會在執行的時候,直接把輸出寫進Response.

兩種方法都是不走控制器的,所以傳遞參數的時候用 ViewDataDictionary

 比如說控制器中定義

Person p = new Person()
p = p.Get(ID);
ViewDataDictionary vd = new ViewDataDictionary();
vd.Add("person",p);
vd.Add("id",p.id);
ViedData["id"]= vd;


那么在進入view中的時候

可以在view里的某一處向下一個view直接傳遞數據,而不用經過控制器

 中介view

<div>
  @{Html.RenderPartial("~/views/home/check", ViewData["vd"] as ViewDataDictionary)}
</div>


然后在最終的頁面上就可以直接使用 ViewData["person"] 和 ViewData["id"]

@{
  var p  = ViewData["person"] as Person
}
<input type = "text" value="@ViewData["id"]" />

  

    如果遇到一個主view中嵌套很多partialView的情況,這種方法是比較方便的,因為可以一次性把所有數據都傳到主view上,然后在用這種加載的方法依次向下傳遞

 

4. Ajax.ActionLink

Ajax 屬性的ActionLink方法可以創建一個具有異步行為的錨標簽。

ActionLink方法的第一個參數指定了鏈接文本,第二個參數是要異步調用的操作的名稱。類似於同名的HTML輔助方法,AJAX輔助方法ActionLink也提供了各種重載版本,
用來傳遞控制器名稱、路由值和HTML特性。

復制代碼
//使用時先引入 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

@Ajax.ActionLink("首頁", "Index", "Home", new AjaxOptions() { UpdateTargetId = "body_content", HttpMethod = "Post",
InsertionMode = InsertionMode.Replace, Confirm = " 您確定要刪除該記錄嗎?該操作不可恢復!" })
復制代碼


生成的標簽是

<a href="/Home/Index" data-ajax-update="#body_content"
                                    data-ajax-mode="replace" 
                                    data-ajax-method="Post" 
                                    data-ajax-confirm="您確定要刪除該記錄嗎?該操作不可恢復!" 
                                    data-ajax="true"></a>

Confirm我們看到這個屬性,獲取或設置在請求之前顯示在確認窗口中的消息,不難理解我們可以通過這個內容來實現我們alert的消息提示功能。(是不是有種要拜托javascript的感覺呢?其實機制仍然是javascript)

 

 

javascript中

load()方法

1. 名為 load 的 jQuery 事件方法。

語法

$(selector).load(function

當指定的元素(及子元素)已加載時,會發生 load() 事件。

該事件適用於任何帶有 URL 的元素(比如圖像、腳本、框架、內聯框架)。

2. 名為 load() 的 jQuery Ajax 方法

    load() 方法通過 AJAX 請求從服務器加載數據,並把返回的數據放置到指定的元素中。 

load(url,data,function(response,status,xhr))
$("#table").load("../home/index", { ID: $("#ID").val() }, function () {
           alert("加載完成");
 });
參數 描述
url 規定要將請求發送到哪個 URL。
data 可選。規定連同請求發送到服務器的數據。
function(response,status,xhr)

可選。規定當請求完成時運行的函數。

額外的參數:

  • response - 包含來自請求的結果數據
  • status - 包含請求的狀態("success", "notmodified", "error", "timeout" 或 "parsererror")
  • xhr - 包含 XMLHttpRequest 對象

 

 

 

瀏覽器對象模型 (BOM)

  • window.open(url) - 打開新窗口
  • window.close() - 關閉當前窗口
  • window.moveTo() - 移動當前窗口
  • window.resizeTo() - 調整當前窗口的尺寸
  • window.location.replace(url); 在當前窗口加載新頁面
  • window.location.reload();刷新當前窗口

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM