Question

我这里有fiddle。它演示了一个悬停在其上的信息框中出现的信息。

我想要实现的是，当“查看详情”悬停时，它会触发MVC操作Details(guid Id)，并在框中呈现该操作的结果。

我不完全确定如何做到这一点。我假设在悬停时提交了一个AJAX表单，所以这需要由JS完成（我真的不知道如何用JS做AJAX）。然后div将显示一个新呈现的@Html.Action("Detail", "Stuff", new { Id = @item.Model.Id })

我关闭了吗？

视图将是这样的

<table>
   <thead>
      <tr>
         <td>Name</td>
         <td>E-mail</td>
      </tr>
   </thead>
   <tbody>
   @foreach (var item in Model.ItemList)
   {
      <tr>
         <td>@Html.DisplayFor(model => item.Name)</td>
         <td>@Html.DisplayFor(model => item.Email)</td>
         <td>@using(Ajax.BeginForm(ajaxOpts))
             {
                <span>Hover for Details</span>
                @Html.HiddenFor(model => item.Id)
             }
         </td>
      </tr>
   }
   </tbody>
</table>

这个动作纯粹是：

[ChildActionOnly]
public ActionResult Detail(Guid id)
{
    var item = _repository.Stuff.FirstOrDefualt(x => x.Id.Equals(id));

    return View(item);
}

所以规范是：

当“Hover for Details”被悬停以显示一个框，其中光标显示最近从数据库中获取的详细信息

我已经把这一切都写在了我的头顶，所以不要仔细检查它的准确性，它纯粹是为了展示一个想法，我不是在寻找代码中的错误。我正在寻找有效工作实例的想法。感谢。

Answer 1

1）在悬停时提交Ajax。

2）按照此处的示例Render a view as a string将您的视图呈现为服务器中的HTML字符串。

3）使用$（“＃showme”）。html（ReturnedHTMLData）;将返回的html放入DOM对象。

即。服务器端

public JsonResult GetDetail(Guid id)
{
 return Json(ViewToStringMethod(ViewName, id), "rest of Json allowget stuff");
}

即。客户端

$("#DomElement").on("hover", function(){
 $.getJSON("GetDetail", {id: $('this').attr("id"), function(returnedData){
  $("#showme").html(ReturnedHTMLData);
 }
});

MVC将鼠标悬停在视图中的项目上以呈现视图

1 个答案: