如何在视图中显示actionResult?

时间:2013-04-30 12:23:01

标签: ajax asp.net-mvc-4 razor

我有一个操作结果,我希望使用ajax在我的视图中将其显示为div标签,这是我的操作结果

public ActionResult Details(string id)
    {
        var subscriber = new SubscribersModel();
        IEnumerable<Subscribe> list = from s in dbcontext.Subscribes select s;
        foreach (var sb in list)
        {
            if (sb.cin == id)
            {
                subscriber.cin = sb.cin;
                subscriber.name = sb.name;
            }
        }
        return PartialView("Details",subscriber);
    }

这是我的详情视图

 @model _3SDWebProject.Models.SubscribersModel

 <fieldset>
<legend>SubscribersModel</legend>

<div class="display-label">
     @Html.DisplayNameFor(model => model.name)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.name)
</div>

<div class="display-label">
     @Html.DisplayNameFor(model => model.cin)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.cin)
</div>
</legend>

,这是我想要显示我的行动结果的索引视图:

  @model IEnumerable<_3SDWebProject.Models.SubscribersModel>
 @{
   ViewBag.Title = "Subscribers";
  }

<script>
  function details(id) {
    var url = '/Subscribers/Details/' + id; 
    $.ajax({
        url: url,
        type: 'GET',
        data: id,
        success: function () {
            $(".sidebar").html();
        }
    });
}

$(function () {
    $(".details-logo").on('click', function () {
        details($(this).attr("DtNo"));
        alert("ok");
    });

});
  </script>
  <div class="sidebar">
       //Here i want to show my result !!!!!!!
   </div>

<div class="content" style="width: 700px; margin-left: 250px; height: 545px;margin-top:  -30px;">
<h2>Subscribers</h2>
 table class="altrowstable" id="alternatecolor">
<tr>
    <th>
        CIN
    </th>
    <th>
        Name
    </th>
    <th>
</tr>
 @foreach (var item in Model) {
 <tr id="row-@item.cin">
    <td>
        @Html.DisplayFor(modelItem => item.cin)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.name)
    </td>
 </tr>
  //this is my actionLink
  @Html.ActionLink("Details", "Details", new { id = item.cin }, new { @class = "details-logo",@DtNo=item.cin})
 }

所以,如果有人知道我会非常感激。 Nb:当我按下我的详细信息动作链接时,它会给我真实的信息但不在我的侧边栏中,而是在这样的单独视图中:

enter image description here

2 个答案:

答案 0 :(得分:2)

只需将您的ajax功能更改为

即可
$.ajax({
        url: url,
        type: 'GET',
        data: id,
        success: function (result) {
            $(".sidebar").html(result);
        }
    });

这将获取订阅者详细信息页面并将其添加到.sidebar

修改

更改onclick事件处理程序以停止超链接的默认操作。只需添加return false即可阻止超链接转到新页面。见下文。

$(function () {
    $(".details-logo").on('click', function () {
        details($(this).attr("DtNo"));
        alert("ok");
        return false;
    });

});

答案 1 :(得分:1)

将您的ajax功能更改为

function details(id) {
    var url = '@Url.Action("Details", "Subscribers")'; 
    var params = {
      id:id
    }
    $.ajax({
        url: url,
        type: 'GET',
        data: JSON.stringify(params ),
        success: function (result) {
            $(".sidebar").html(result);
        }
    });
}