在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 
}); 

}