Fatal编程技术网
  • ajax/
  • Ajax 如何在视图中显示actionResult？

Ajax 如何在视图中显示actionResult？

ajax asp.net-mvc-4 razor

Ajax 如何在视图中显示actionResult？,ajax,asp.net-mvc-4,razor,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 l

我有一个动作结果，我想使用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>

公共操作结果详细信息（字符串id）
{
var subscriber=新subscriberModel（）；
IEnumerable list=来自dbcontext中的s。订阅选择s；
foreach（列表中的var sb）
{
如果（sb.cin==id）
{
subscriber.cin=sb.cin；
subscriber.name=sb.name；
}
}
返回PartialView（“详细信息”，订户）；
}
这是我的详细信息视图：

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\u 3SDWebProject.Models.SubscriberModel
认购人模型
@DisplayNameFor（model=>model.name）
@DisplayFor（model=>model.name）
@DisplayNameFor（model=>model.cin）
@DisplayFor（model=>model.cin）
这是我想显示操作结果的索引视图：

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

@model IEnumerable
@{
ViewBag.Title=“订阅者”；
}
功能详细信息（id）{
var url='/Subscribers/Details/'+id；
$.ajax({
url:url，
键入：“GET”，
数据：id，
成功：函数（）{
$（“.sidebar”）.html（）；
}
});
}
$（函数（）{
$（“.details logo”）。在（'click'，函数（）{
详细信息（$（this.attr（“DtNo”））；
警报（“正常”）；
});
});
//在这里我想展示我的成绩！！！！！！！
订户
table class=“altrowstable”id=“alternatecolor”>
CIN
名称
@foreach（模型中的var项目）{
@DisplayFor（modeleItem=>item.cin）
@DisplayFor（modelItem=>item.name）
//这是我的actionLink
@ActionLink（“Details”，“Details”，new{id=item.cin}，new{@class=“Details-logo”，@DtNo=item.cin}）
}
所以，如果有人有任何想法，我将非常感激。 注意：当我按下我的详细信息操作链接时，它会给我真实的信息，但不是在我的侧边栏中，而是在一个单独的视图中，如下所示：

只需将ajax函数更改为

$.ajax({
        url: url,
        type: 'GET',
        data: id,
        success: function (result) {
            $(".sidebar").html(result);
        }
    });
这将获得订阅者详细信息页面，并将其添加到
.sidebar

编辑：

  @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})
 }
更改onclick事件处理程序以停止超链接的默认操作。只需添加return false，即可阻止超链接将您带到新页面。见下文

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

});
将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);
        }
    });
}
您需要将结果添加到
侧栏
元素中。前面的答案就可以了。谢谢@Saptal，我更新了我的问题，我如何才能将结果添加到我的侧边栏？@Mohammadov，我有更新的答案，von v指出了错误