渲染MVC3使用JQuery部分美景(Render Partial Views using JQue

2019-06-26 07:21发布

我有一些记录。 在点击每条记录有信息需要在手风琴来显示。

这些信息应该从数据库动态撷取。

我到目前为止已经做的是

创建的局部视图。 这是假设,以显示详细信息。

一旦点击记录,我打电话jQuery的方法并执行控制我的方法。 控制器返回对象的JSON(或任何其他事情,开放的任何建议)的形式。

现在JQuery的方法有(型号)的对象,但我怎么可能用它来使我从它的局部视图。

Answer 1:

我有一些记录。 在点击每条记录有信息需要在手风琴来显示。

还有,你可以实现你的愿望两种方式。 我猜你必须从提供有关记录的详细信息的操作,返回一个局部视图。

  1. 听着锚链接的点击事件和事件中,你必须帧的URL,然后$("#accordion-container-1").load(url)

防爆。

从您的评论我看你有没有通过orderNo行动作为参数。 所以,你必须设置orderNo为ID或附加其他一些字符串(以避免重复元素IDS),并设置为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结果的容器。

防爆。

在当你通过循环回收产生的记录,这种情况下,你必须创建链接(点击上已加载通过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中的局部视图内。

Tracking.cshtml

@model TrackingModel

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

当调用动作Tracking从jquery的或通过Ajax动作(如我先前所描述的),你将得到你可以加载到像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
});

}



文章来源: Render Partial Views using JQuery in MVC3