<script src="jquery-js">
$("._detailsInfo").click( function () {
var Id = $(this).attr('Id');
$.ajax({
"url": "/Test/Details/"+Id,
"type": "GET",
"dataType": "html",
success: function (response) {
$('#myModal').modal(options);
$('#myModal').modal('show');
},
failure: function (response) {
alert(response.responseText);
}
});
});
</script>
@model BOL3.tbl_Appoiment_Diary
<div class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<button type="button" class="close" data-dissmiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="myModalLabel">Details</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Title)
</dt>
<dd>
@Html.DisplayFor(model => model.Title)
</dd>
</dl>
</div>
<p>
@Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
@Html.ActionLink("Back to List", "Index")
</p>
</div>
</div>
<td>
@*@Html.ActionLink("Details", "Details", new { id = item.ID }) |*@
<button class="btn btn-info btn btn-xs _detailsInfo" id=" '+ item.ID +' ">Details</button> |
@Html.Partial("_Details", new BOL3.tbl_Appoiment_Diary())
@*@Html.ActionLink("Details", "_Details", new { @class = "_detailsInfo", id = "'+item.ID+'" }) |*@
</td>
任何人都可以帮助我。请记住，我在使用Javascript和Jquery时非常新，所以非常感谢任何帮助。我尝试了来自多个网站的不同方法，但没有任何效果。以下是我尝试过的一些网站：
jquery-dialog-with-aspnet-mvc，jquery-dialog以及其他许多人，但似乎没有任何效果。
这是我到目前为止所尝试的：
public ActionResult Details(int Id)
{
BOL3.tbl_Appoiment_Diary appd = new BOL3.tbl_Appoiment_Diary();
appd = db.tbl_Appoiment_Diary.Find(Id);
return PartialView("_Details", appd);
}
这是控制器部分。
<script src="jquery-js">
//$(function () {
// $("#dialog").dialog({
// autoOpen: false,
// modal: true,
// title: "Details"
// });
// $("#AppoimentDiary .details").click(function () {
// var ID = $(this).closest("tr").find("td").eq(0).html();
// $.ajax({
// type: "POST",
// url: "/Test/Details/",
// data: '{ID: "' + ID + '"}',
// contentType: "application/json; charset=utf-8",
// dataType: "html",
// success: function (response) {
// $('#dialog').html(response);
// $('#dialog').dialog('open');
// },
// failure: function (response) {
// alert(response.responseText);
// },
// error: function (response) {
// alert(response.responseText);
// }
// });
// });
//});
//$(document).ready(function () {
// $("#btnCreate").click(function () {
// InitializeDialog($("#testdialog"));
// $("#testdialog").dialog("open");
// });
// function InitializeDialog($element) {
// $.dialog({
// autoOpen: false,
// width: 400,
// resizable: true,
// draggable: true,
// title: "Appointments",
// model: true,
// show: 'slide',
// closeText: 'x',
// dialogClass: 'alert',
// closeOnEscape: true,
// open: function (event, ui) {
// $element.load('/Test/Add');
// },
// close: function () {
// $(this).dialog('close');
// }
// });
// }
//});
//$.ajaxSetup({ cache: false });
//$(document).ready(function () {
// $(".openPopup").live("click", function (e) {
// e.preventDefault();
// $("<div></div><p>")
// .addClass("dialog")
// .attr("id", $(this)
// .attr("data-dialog-id"))
// .appendTo("body")
// .dialog({
// title: $(this).attr("data-dialog-title"),
// close: function () { $(this).remove(); },
// modal: true,
// height: 250,
// width: 900,
// left: 0
// })
// .load(this.href);
// });
// $(".close").live("click", function (e) {
// e.preventDefault();
// $(this).closest(".dialog").dialog("close");
// });
//});
@*var url = '@Url.Action("Details", "Test")';
$('selector').load(url, { id: 1 });*@
</script> @Html.ActionLink("Det", "Details", new { id = item.ID, @class = "data-toggle = 'modal' data-target = '#myModal' " }) |
<div id="dialog" style="display: none">
</div>
</div>
@*<div id='myModal' class='modal'>
<div class="modal-dialog">
<div class="modal-content">
<div id="myModalContent"></div>
</div>
</div>
</div>
<script src="jquery-js">
var TeamDetailPostBackURL = '/Test/Details';
$(function () {
$(".anchorDetail").click(function () {
debugger;
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
url: TeamDetailPostBackURL,
contentType: "application/json; charset=utf-8",
data: { "Id": id },
datatype: "json",
success: function (data) {
debugger;
$('#myModalContent').html(data);
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function () {
alert("Loading the data is not possible!");
}
});
});
$("#closbtn").click(function () {
$('#myModal').modal('hide');
});
});
</script>*@
@*<div class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color:aqua">
<h4 class="modal-title">Ada New</h4>
</div>
<div class="modal-body">
@Url.Action("/Test/Details")
</div>
<div class="modal-footer" style="background-color:aqua">
<button type="button" class="btn btn-danger" data-dissmiss="modal">Close</button>
<button type="button" data-dismiss="modal" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>*@
非常感谢有关此主题的任何帮助。
修改：
这是索引按钮，脚本来自你的回答：
在同一索引视图中，这是局部视图：
答案 0 :(得分：1)
请注意，您无需再次调用模态正文中的详细信息方法。
在局部视图中创建一个模态，并将所有局部视图HTML保留在模态体内。在您的局部视图中，添加您的模态参考，如下图，
@model Your_Project_Name.ModalFolderName.tbl_Appoiment_Diary
<div class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">Details Info</div>
<div class="modal-body">
/*Here keep your all HTML to display details data*/
</div>
</div>
</div>
相应地更改或更新上述HTML。并使用项目名称和类名更改引用名称。
在主视图中创建“详细信息”按钮，如下所示
<button class="btn btn-info _detailsInfo" id="'+item.ID+'"></Details>
单击此按钮调用jquery单击函数，如bellow，
$("._detailsInfo").click(function ()
{
var Id = $(this).attr('Id');
$.ajax({
"url": "/Test/Details/"+Id,
"type": "Get",
"dataType": "html",
success: function (response) {
$('#myModal').modal(options);
$('#myModal').modal('show');
},
failure: function (response) {
alert(response.responseText);
}
});
});
假设您的部分视图名称是_Details.cshtml。然后只需在主视图中渲染它，（基本上将此波纹管代码保留在主视图的 body 的关闭标记之前）
@Html.Partial("_Details", new tbl_Appoiment_Diary())
就是这样！希望它可以帮到你。