在MVC3中使用JQuery呈現部分視圖

Question

我有一些記錄。點擊每條記錄後，需要用手風琴顯示信息。

該信息應該從數據庫中動態獲取。

我到目前爲止所做的是

創建部分視圖。這是假設顯示詳細信息。

在點擊記錄時，我打電話給jquery方法並在控制器上執行我的方法。控制器以Json的形式返回對象（或其他任何東西，可以打開任何建議）。

現在JQuery方法有（模型）對象，但我怎麼能用它來 渲染我的部分視圖。

Answer 1

我有一些記錄。在點擊每條記錄時，需要以手風琴顯示信息 。

有兩種方法可以實現你的願望。我想你必須從提供有關該記錄的詳細信息的操作中返回部分視圖。

1. 收聽錨鏈接的點擊事件和事件內部，你必須構造url，然後$("#accordion-container-1").load(url)。

Ex。

從您的評論我看你必須通過orderNo作爲參數的行動。因此，您必須將orderNo設置爲id或將其附加到某個字符串（以避免元素中出現重複的id）並將其設置爲錨鏈接的id。

然後，

$(function(){ 

    $("a.somecssclass").click(function(){ 

    var orderNo = this.id; 

    var url = "/ControllerName/Tracking?orderNo=" + orderNo; 

    // this will call the action through ajax and update the container with the 
    // partial view's html. 
    $("#divToLoadTheHtml").load(url); 
    }); 
}); 

1. 使用MVC支持AJAX動作鏈接。您可以使用Ajax.ActionLink創建一個操作鏈接，通過ajax調用某些控制器操作，並將html結果更新爲容器。

Ex。

在當你通過循環，你必須創建鏈接（點擊上已加載通過Ajax的內容）通過Ajax.ActionLink方法，你也必須包括jquery'unobtrusive.ajax.js圖書館收集產生的記錄，這種情況下。基於OP的評論

@foreach(var m in Collection) 
{ 
    .. other stuff 

    @Ajax.ActionLink(link name, "Action", new { orderNo = m.something? }, 
    new AjaxOptions 
    { 
     UpdateTargetId = "somediv" // set the div name where you want to load the partial view 
    }); 
} 

更新

你的操作方法應該是這樣的，

public PartialViewResult Tracking(int orderNo) 
{ 
    var manager = new OrderManager(); 
    return PartialView(manager.Tracking(orderNo)); 
} 

你應該有一個局部視圖，或者與名稱Tracking.cshtml和局部視圖內您必須創建html代表您正在談論的記錄的詳細信息。

Tracking.cshtml

@model TrackingModel 

<div> 
    @Html.DisplayFor(...) 
    ... 
</div> 

當調用從jquery的或通過Ajax動作的動作Tracking（如我先前所描述的），你將得到你可以加載到像DIV特定容器的局部視圖的html 。

Answer 2

這是一個基本的方法 當你需要提交某種形式和呈現局部視圖結果

function GetView(){ 
if ($('#MyHtmlForm').valid()){ 
    $.ajax(
    { 
     type: "POST", 
     url: $('#MyHtmlForm').attr("action"), 
     data: $('#MyHtmlForm').serialize(), 
     success: function(result) { 
     //Render the partial view 
     } 
     }, 
     error: function(req, status, err) { 
     //handle the error 
     } 
    }); 
} 

}

這對於通過JSON格式得到行基本的細節，所以使用javascritp生成HTML

function GetSomeData() { 
var cod = $('.row').val(); 
$.getJSON('@Url.action("ActionName","Controller")', { cod: cod }, function (result) { 
    //Render data 
}); 

}