Javascript 引导模式弹出窗口内的局部视图
我想在模式弹出窗口中显示部分视图。我有一个主页,我在其中调用基于按钮点击Id的部分视图 我的主要观点是:Javascript 引导模式弹出窗口内的局部视图,javascript,jquery,asp.net-mvc,Javascript,Jquery,Asp.net Mvc,我想在模式弹出窗口中显示部分视图。我有一个主页,我在其中调用基于按钮点击Id的部分视图 我的主要观点是: <table id="tblSearch" class="table table-hover"> <tr> <th> @Html.DisplayNameFor(m =>m.Name) </th> <th> @Html.Dis
<table id="tblSearch" class="table table-hover">
<tr>
<th>
@Html.DisplayNameFor(m =>m.Name)
</th>
<th>
@Html.DisplayNameFor(m => m.Description)
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)</span>
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
<input class="search btn-default" type="button" value="Search"
data-assigned-id="@item.Id" data-toggle="modal" data-target="#exampleModalLong" />
</td>
</tr>
}
</table>
我的意见是:
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="partial"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
&时代;
接近
保存更改
有谁能指导我如何编写JavaScript代码来实现这一点吗?非常感谢您的帮助。下面的代码正在运行
<script type="text/javascript">
$(function () {
$('.search').click(function () {
var id = $(this).data('assigned-id');
var route = '@Url.Action("ViewTest", "Home")?id=' + id;
$('#partial').load(route);
});
});
</script>
<table id="tblSearch" class="table table-hover">
<tr>
<td>
<input class="search btn-default" type="button" value="Search"
data-assigned-id="1" data-toggle="modal" data-target="#exampleModalLong" />
</td>
</tr>
@* modify as per your code change, data-assigned-id="1" also *@
</table>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="partial"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
局部视图
<div>
Sample Partial Views
</div>
局部视图示例
您读过方法的定义吗?您可能需要的是隐藏模式弹出窗口中的Html.Partial
或Html.RenderPartial
,并在search
单击触发的事件时显示它。@TetsuyaYamamoto,我有多个部分视图,基于按钮单击的Id,它显示部分视图。那么您有什么问题?并在Home
controller中显示您的DisplaySearchResults
方法请在帖子中包含您的操作(DisplaySearchResults)。我的问题与您在此处发布的答案有什么区别?两个看起来都一样。请澄清这一点。我已经在VisualStudio中测试了上述代码及其工作情况,我不知道您的操作方法做了什么,js代码是否编写正确。
public ActionResult Test()
{
//main view
return View();
}
public ActionResult ViewTest(int id)
{
//Write your logic here
return PartialView("_TestPartial");
}
<div>
Sample Partial Views
</div>