我有一个带有局部视图的搜索视图，用于显示搜索结果。 单击超链接时必须打开模态弹出窗口。
我的模态弹出窗口在这种情况下中断。它不再作为弹出窗口打开并且失去了它的所有样式。
我不确定我做错了什么。如果我不使用部分视图，则弹出窗口有效。
部分视图 _SearchCustomer.cshtml
@model PagedList.IPagedList<MDMWeb.Models.CustomerModel>
@using PagedList;
@using PagedList.Mvc;
<table id="tblResult" class="table table-bordered table-striped table-hover sortable">
<thead>
<tr>
<th>@Html.Label("MDM ID")</th>
<th>@Html.Label("Customer Type")</th>
<th>@Html.Label("Title")</th>
<th>@Html.Label("First Name")</th>
<th>@Html.Label("Surname")</th>
<th>@Html.Label("Email")</th>
<th>@Html.Label("Mobile")</th>
<th>@Html.Label("Phone")</th>
<th>@Html.Label("Private Customer")</th>
<th>@Html.Label("Status")</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
@Html.HiddenFor(model => item.code)
<tr>
<td><a data-modal="" href='@Url.Action("Edit","Customer",new { viewname = "Edit", mdmID = item.code })' title='@item.code'>@Html.DisplayFor(modelItem => item.code)</a></td>
<td> @Html.DisplayFor(modelItem => item.customerType) </td>
<td> @Html.DisplayFor(modelItem => item.title) </td>
<td> @Html.DisplayFor(modelItem => item.firstName) </td>
<td> @Html.DisplayFor(modelItem => item.lastName) </td>
<td> @Html.DisplayFor(modelItem => item.email) </td>
<td> @Html.DisplayFor(modelItem => item.mobile) </td>
<td> @Html.DisplayFor(modelItem => item.phone) </td>
<td> @Html.CheckBoxFor(modelItem => item.isPrivateCustomer) </td>
<td> @Html.DisplayFor(modelItem => item.status) </td>
</tr>
}
</tbody>
</table>
@if (Model.PageCount > 1)
{
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
@Html.PagedListPager(Model, page => Url.Action("SearchCustomer", new { page, pageSize = Model.PageSize, currentFilter = ViewBag.SearchCriteria }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.OnlyShowFivePagesAtATime, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "divResults", InsertionMode = InsertionMode.Replace }))
</ul>
</div>
}
Search.cshtml
@model string
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@if (Request.IsAuthenticated)
{
using (Ajax.BeginForm("SearchCustomer", "Customer", new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "divResults",
InsertionMode = InsertionMode.Replace,
}))
{
<h2>@ViewBag.PageTitle</h2>
<div class="row">
<div class="col-md-12">
<div class="box">
<!-- /.box-header -->
<div class="box-header with-border" id="searchCriteria">
<div class="row">
<div class="col-md-1"><label>Created From</label></div>
<div class="form-group col-md-3">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" id="datepickerfrom" name="datepickerfrom">
</div>
</div>
<div class="col-md-1">
<label class="pull-left">Created To</label>
</div>
<div class="form-group col-md-3">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" id="datepickerto" name="datepickerto">
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
<label>System</label>
</div>
<div class="col-md-3">
<select class="form-control" style="width: 100%;" name="sourcesystem">
<option selected="selected">All</option>
<option>Salesforce</option>
<option>Pathway</option>
</select>
</div>
<div class="col-md-1">
<label>Customer Type</label>
</div>
<div class="col-md-3">
<select class="form-control" style="width: 100%;" name="customertype">
<option selected="selected">All</option>
<option>Individual</option>
<option>Organisation</option>
</select>
</div>
<div class="col-md-3">
<input type="submit" value="Search" />
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-body" id="divResults">
</div>
</div>
<!-- /.box -->
</div>
</div>
<div id='myModal' class='modal fade bs-example-modal-lg' tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
@section scripts{
@Scripts.Render("~/scripts/appjs/referenceds.js")
<script>
$(function () {
var currentDate = new Date();
$('#datepickerto').datepicker({
autoclose: true
});
$("#datepickerto").datepicker("setDate", currentDate);
$('#datepickerfrom').datepicker({
autoclose: true
});
$("#datepickerfrom").datepicker("setDate", currentDate);
})
</script>
}
}
}
答案 0 :(得分：0)
你不能这样做，你可以用javascript或jquery试试这个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie Search</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="#modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
$("#modal-body").html('@Url.Content("~/{controller}/{Action}/{ID}")');
});
});
</script>
</body>
</html>
答案 1 :(得分：0)
请尝试此代码将适合您
<div id='myModalContent'>
@Html.Action("ActionName", "ControllerName")
</div>
or
<div id='myModalContent'>
@Html.Partial("_SearchCustomer")
</div>