0

我这里有这个小提琴。它演示了悬停并出现一个包含信息的框。

我想要实现的是，当“查看详细信息”悬停时，它会触发 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);
}

所以规范是：

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

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

4

1 回答 1

1

1) 在悬停时提交 Ajax。

2）按照此处的示例将视图呈现为字符串，以将您的视图呈现为服务器中的 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);
 }
});
于 2013-05-21T10:27:31.637 回答