1

我有一些记录。单击每条记录后，需要在手风琴中显示信息。

该信息应该动态地从数据库中获取。

到目前为止我所做的是

创建局部视图。那是假设显示详细信息。

单击记录后，我调用 jquery 方法并在控制器上执行我的方法。控制器以 Json 的形式返回对象（或任何其他东西，欢迎提出任何建议）。

现在 JQuery 方法有那个（模型）对象，但我怎么能用它来渲染我的部分视图。

4

2 回答 2

2

我有一些记录。单击每条记录后，需要在手风琴中显示信息。

有两种方法可以实现您的愿望。我想您必须从提供有关记录的详细信息的操作中返回部分视图。

  1. 监听锚链接的点击事件，在事件内部你必须框住 url，然后$("#accordion-container-1").load(url).

前任。

从您的评论中，我看到您必须将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 调用某些控制器操作来创建操作链接Ajax.ActionLink，并将 html 结果更新到容器。

前任。

在这种情况下，当您通过循环集合生成记录时，您必须通过方法创建链接（单击时必须通过 ajax 加载内容）Ajax.ActionLink，并且您还必须包含jquery'unobtrusive.ajax.js库。

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

根据 OP 的评论更新

你的动作方法应该是这样的，

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

您应该有一个带有名称Tracking.cshtml的局部视图，并且在局部视图中您必须创建 html 代表您正在谈论的记录的详细信息。

跟踪.cshtml

@model TrackingModel

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

当您Tracking从 jquery 或通过 ajax 操作（如前所述）调用操作时，您将获得部分视图 html，您可以将其加载到特定容器（如 div）中。

于 2012-07-19T11:33:21.427 回答
0

当您需要提交一些表单并将部分视图呈现为结果时，这是一种基本方法

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

}

于 2012-07-14T20:38:13.180 回答