從控制器內部獲取部分視圖的HTML

Question

我為我的mvc網站開發了一個簡單的機制，通過jquery引入html，然后填充指定的div。 一切都很好，看起來很酷。
我的問題是我現在正在我的控制器內部創建html標記（這在VB.net中很容易做到btw）我寧可不要混淆一些關注點。

是否可以使用自定義的“MVC View用戶控件”來滿足這種需求？ 我可以創建控件的實例，傳入模型數據並渲染為html嗎？ 然后，這將是一個簡單的渲染和傳遞回調用瀏覽器的問題。

Answer 1

這是一個與ASP.Net MVC 1.0一起使用的解決方案（很多聲稱與beta 3一起使用的解決方案不能與1.0一起工作），不會受到“服務器無法在HTTP標頭發送后設置內容類型”的問題並且可以從控制器（不僅是視圖）中調用：

/// <summary>
/// Render a view into a string. It's a hack, it may fail badly.
/// </summary>
/// <param name="name">Name of the view, that is, its path.</param>
/// <param name="data">Data to pass to the view, a model or something like that.</param>
/// <returns>A string with the (HTML of) view.</returns>
public static string RenderPartialToString(string controlName, object viewData) {
    ViewPage viewPage = new ViewPage() { ViewContext = new ViewContext() };
    viewPage.Url = GetBogusUrlHelper();

    viewPage.ViewData = new ViewDataDictionary(viewData);
    viewPage.Controls.Add(viewPage.LoadControl(controlName));

    StringBuilder sb = new StringBuilder();
    using (StringWriter sw = new StringWriter(sb)) {
        using (HtmlTextWriter tw = new HtmlTextWriter(sw)) {
            viewPage.RenderControl(tw);
        }
    }

    return sb.ToString();
}

public static UrlHelper GetBogusUrlHelper() {
  var httpContext = HttpContext.Current;

  if (httpContext == null) {
    var request = new HttpRequest("/", Config.Url.ToString(), "");
    var response = new HttpResponse(new StringWriter());
    httpContext = new HttpContext(request, response);
  }

  var httpContextBase = new HttpContextWrapper(httpContext);
  var routeData = new RouteData();
  var requestContext = new RequestContext(httpContextBase, routeData);

  return new UrlHelper(requestContext);
}

這是一種靜態方法，你可以放在一個方便的地方。 你可以這樣稱呼它：

string view = RenderPartialToString("~/Views/Controller/AView.ascx", someModelObject); 

Answer 2

我整理了一個粗略的框架，它允許您從MVC Beta中的控制器方法向字符串渲染視圖。 這應該有助於解決這個限制。

此外，我還為MVC Beta組建了一個類似Rails的RJS javascript生成框架。

請訪問http://www.brightmix.com/blog/how-to-renderpartial-to-string-in-asp-net-mvc查看，並告訴我您的想法。

Answer 3

你會像這樣創建你的動作：

        public PartialViewResult LoginForm()
        {
            var model = // get model data from somewhere
            return PartialView(model);
        }

並且該操作會將呈現的部分視圖返回到您的jquery響應。

你的jquery看起來像這樣：

$('#targetdiv').load('/MyController/LoginForm',function(){alert('complete!');});

Answer 4

您應該使用jquery來填充div（如果需要，還可以創建新的html元素），以及ActionResult的Json序列化。

其他方法是使用jquery來調用一些控制器/動作，但是json使用常規View（aspx或ascx，webforms視圖引擎）來呈現內容，而jquery只是將html注入到某個div中。 這是來自asp.net ajax的UpdatePanels的一半...

我可能會選擇第一種方法，使用json，你可以做更多的工作，但它更加“優化”，因為你不會通過電線傳輸整個html，只有序列化的對象。 這就是“大人物”（gmail，g docs，hotmail，..）這樣做的方式 - 許多用UI操作的JS代碼。

如果你不需要ajax，那么你基本上有兩種方法來調用局部視圖：

• html.renderpartial（“ascx名稱”）
• 來自Microsoft.web.mvc的html.RenderAction（x => x.ActionName）（mvc期貨）

Answer 5

經過深入挖掘谷歌我找到了答案。 您無法輕松訪問視圖輸出的html。

http://ayende.com/Blog/archive/2008/11/11/another-asp.net-mvc-bug-rendering-views-to-different-output-source.aspx

Answer 6

我已經為我正在開發的應用做了類似的事情。 我有部分視圖返回渲染內容可以使用他們的REST路徑或使用：

<% Html.RenderAction("Action", "Controller"); %>

然后在我的實際顯示HTML中我有一個從jQuery填充的DIV：

<div class="onload">/controller/action</div>

jQuery看起來像這樣：

<script type="text/javascript">
    $.ajaxSetup({ cache: false });

    $(document).ready(function () {
        $('div.onload').each(function () {
            var source = $(this).html();
            if (source != "") {
                $(this).load(source);
            }
        });
    });
</script>

這將掃描與“onload”類匹配的所有DIV，並從其內容中讀取REST路徑。 然后它在該REST路徑上執行jQuery.load並使用結果填充DIV。

對不起，我得趕緊回家。 如果您想讓我詳細說明，請告訴我。

Answer 7

你有幾個選擇。

在控制器中為視圖創建MVC視圖用戶控件和操作處理程序。 要渲染視圖使用

<% Html.RenderPartial("MyControl") %>

在這種情況下，您的操作處理程序將需要將模型數據傳遞給視圖

public ActionResult MyControl ()
{
    // get modelData

    render View (modelData);
}

您的另一個選擇是從父頁面傳遞模型數據。 在這種情況下，您不需要操作處理程序，並且模型類型與父項相同：

<% Html.RenderPartial("MyControl", ViewData.Model) %>

如果您的用戶控件具有自己的數據類型，您也可以在頁面中構建它

在MyControl.ascx.cs中：

public class MyControlViewData
{
    public string Name { get; set; }
    public string Email { get; set; }
}

public partial class MyControl : System.Web.Mvc.ViewUserControl <MyControlViewData>
{
}

在您的頁面中，您可以初始化控件的數據模型：

<% Html.RenderPartial("MyControl", new MyControlViewData ()
   {
        Name= ViewData.Model.FirstName,
        Email = ViewData.Model.Email,
   });
 %>

Answer 8

你只需要創建一個強類型的局部視圖（或用戶控件），然后在你的cotroller中就像這樣：

public PartialViewResult yourpartialviewresult()
{
    var yourModel
    return PartialView("yourPartialView", yourModel);
}

然后你可以使用JQuery來執行你想要的請求：

$.ajax({
    type: 'GET',
    url: '/home/yourpartialviewresult',
    dataType: 'html', //be sure to use html dataType
    contentType: 'application/json; charset=utf-8',
    success: function(data){
         $(container).html(data);
    },
    complete: function(){ }
 });    

Answer 9

在rails中，這稱為渲染局部視圖，您可以使用render :partial => 'yourfilename' 。 我相信ASP.NET MVC有一個類似的RenderPartial方法，但我找不到MVC的官方文檔來確認或否認這樣的事情。

Answer 10

我發現這一行代碼完美無缺。 orderModel是我的模型對象。 在我的情況下，我有一個幫助方法，我必須合並部分視圖的HTML。

System.Web.Mvc.Html.PartialExtensions.Partial(html, "~/Views/Orders/OrdersPartialView.cshtml", orderModel).ToString();