这是我的HTML:
@model ModalPopupMVC.Models.User
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("View All", "Index")
@using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<table>
<tr>
<td>
<input type="text" id="txtName" name="searchparam" placeholder="type here to search" />
</td>
<td>
<input type="submit" id="btnSubmit" value="Search" />
</td>
</tr>
</table>
}
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.FName)
</th>
<th>
@Html.DisplayNameFor(model => model.LName)
</th>
<th>
@Html.DisplayNameFor(model => model.location)
</th>
<th></th>
</tr>
@foreach (var item in Model.emp1)
{
<tr>
<td>
@Html.DisplayFor (modelItem =>item.FName)
</td>
<td>
@Html.DisplayFor(modelItem => item.LName)
</td>
<td>
@Html.DisplayFor(modelItem => item.location)
</td>
<td>
<a href="javascript:void(0);" class="anchorDetail" data-id="@item.Entryid">
Details
</a>
</td>
</tr>
}
</table>
<div id='myModal' class='modal'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
以下是我的脚本:
@section scripts
{
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
var TeamDetailPostBackURL = '/Home/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("Dynamic content load failed.");
}
});
});
//$("#closebtn").on('click',function(){
// $('#myModal').modal('hide');
$("#closbtn").click(function () {
$('#myModal').modal('hide');
});
});
</script>
}
这是我的控制器:
public class HomeController : Controller
{
DataSet ds = new DataSet();
DataAccess objda = new DataAccess();
[HttpGet]
public ActionResult Index()
{
User emp = new User();
emp.Action = 4000;
ds = objda.getData(emp);
var bList = new List<User>();
{
foreach (DataRow dr in ds.Tables[0].Rows)
{
bList.Add(new User
{
Entryid = Convert.ToInt32(dr[0]),
sno = dr[0].ToString(),
FName = dr[2].ToString(),
LName = dr[3].ToString(),
location = dr[4].ToString(),
email = dr[5].ToString(),
});
}
}
emp.emp1 = bList;
return View("Index", emp);
}
[HttpGet]
public ActionResult Details(int Id)
{
User usr = new User();
usr.Entryid = Id;
usr.Action = 4002;
ds = objda.getData(usr);
var bList = new List<User>();
{
foreach (DataRow dr in ds.Tables[0].Rows)
{
bList.Add(new User
{
Entryid = Convert.ToInt32(dr[0]),
sno = dr[0].ToString(),
FName = dr[2].ToString(),
LName = dr[3].ToString(),
location = dr[4].ToString(),
email = dr[5].ToString(),
});
}
}
usr.emp1 = bList;
return PartialView("_Details", usr);
}
}
//这是我的部分视图
<div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Edit User</h4>
</div>
@foreach (var MenuItem in Model.emp1)
{
<div class="modal-body">
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
@Html.AntiForgeryToken()
<div>
@Html.EditorFor(model => model.FName, new { htmlAttributes = new { placeholder = "First name", @Value = MenuItem.FName, @Class = "editor-field" } })
@Html.ValidationMessageFor(model => model.FName)
</div>
<div>
@Html.EditorFor(model => model.LName, new { htmlAttributes = new { placeholder = "Last name", @Value = MenuItem.LName, @Class = "editor-field" } })
</div>
<div>
@Html.EditorFor(model => model.email, new { htmlAttributes = new { placeholder = "Email id", @Value = MenuItem.email, @Class = "editor-field" } })
@Html.ValidationMessageFor(model => model.email)
</div>
<div>
@Html.EditorFor(model => model.location, new { htmlAttributes = new { placeholder = "Address", @Value = MenuItem.location, @Class = "editor-field" } })
@Html.ValidationMessageFor(model => model.location)
</div>
}
<div class="modal-footer">
<button type="button" class="btn btn-info">Save Changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
}
</div>
在我的代码中,我使用ajax调用部分视图,但是当我单击用户详细信息链接时,不会通过ajax检索该用户的描述,它会显示一个空白引导模式弹出窗口。
我正在检索用户在同一页面上选择的用户的详细信息,但未检索到该用户。请提出任何建议问题,因为我是ASP.NET MVC 5的新手。
由于
答案 0 :(得分:0)
我怀疑你正在构建的网址是不正确的。尝试删除contentType
,data
和dataType
参数,并使用格式为{controller}/{action}/{id}
的网址,这是我认为您的路由引擎已配置为支持:
var TeamDetailPostBackURL = '@Url.Action("Details", "Home")';
$(".anchorDetail").click(function () {
debugger;
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
url: TeamDetailPostBackURL + '/' + id,
success: function (data) {
debugger;
$('#myModalContent').html(data);
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
});
还可以使用浏览器开发人员工具栏检查发送到服务器的AJAX请求和实际响应。这样您就可以更轻松地调试代码问题。