MVC将鼠标悬停在视图上以显示查看

我在这里有这个fiddle这里。它演示了一个悬停和一个框中出现的信息。MVC将鼠标悬停在视图上以显示查看

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

所以规格是：

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

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

来源

2013-05-21 Callum Linington

1）在悬停时提交Ajax。

2）按照此处的示例Render a view as a string将您的视图呈现为服务器中的HTML字符串。 3）使用$（“＃showme”）。html（ReturnedHTMLData）;使用$（“＃showme”）。将返回的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-21 10:27:31

哦，别忘了来缓存也会从你的JSON调用返回的The HTML数据，使其在快一点点未来:) –

不错，我会给它一个快速的问题，为什么你使用'$（）。on（“hover”，function（）{}）'而不是'$（）。hover（function（）{}）'有什么特别的原因，还是只是你的偏好？ –

我认为这对我更偏好。 “.on”来自版本1.8（我认为），并且是相对较新的，用于更动态的页面，其中带有事件的新项目一直添加到页面中。 –

MVC将鼠标悬停在视图上以显示查看

回答

相关问题