我有一个MVC 4 Web应用程序（测试站点）。 我有一个产品控制器，产品视图（索引（非局部视图）和Product.cshtml（局部视图））。我也有_Layout（来自MVC）
Index.cshtml（不是部分视图）
@model IdentityASP.Models.ViewModel.ProductViewModel
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquery-unobstrusive-ajax")
@using (Ajax.BeginForm("SearchProduct", "Product", null, new
AjaxOptions() { UpdateTargetId = "searchResults" }, null))
{
<input type="datetime" name="From" />
<input type="datetime" name="To" />
<input type="submit" name="submit" value="Submit" />
}
<div id="searchResults">@Html.Partial("~/Views/Product/Product.cshtml")
这会在@ Html.Partial开头呈现所有数据（＆＃34;〜/ Views / Product / Product.cshtml＆＃34;） 在搜索特定数据时，这也是正在使用的数据。
Product.cshtml（部分视图）
@model IdentityASP.Models.ViewModel.ProductViewModel
<div class="container">
<table id="product-table" class="table">
<thead>
<tr>
<th>Product Id</th>
<th>CategoryId</th>
<th>Category</th>
<th>ManufacturerId</th>
<th>ManufacturerName</th>
<th>Name</th>
<th>Description</th>
<th>Model</th>
<th>Released Date</th>
<th>Released Year</th>
<th>Action</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.ProductList)
{
<tr>
<td>@item.Id</td>
<td>@item.CategoryId</td>
<td>@item.CategoryDescription</td>
<td>@item.ManufacturerId</td>
<td>@item.ManufacturerName</td>
<td>@item.Name</td>
<td>@item.Description</td>
<td>@item.Model</td>
<td>@item.ReleasedDate</td>
<td>@item.ReleasedYear</td>
<td><button type="button" data-toggle="modal" href="@Url.Action("EditProduct", "Product",new { id = item.Id })" data-target="#AddProductModal" class="btn-edit btn btn-info btn-default">Edit</button></td>
<td><button type="button" class="btn-delete btn btn-info btn-default">Delete</button></td>
</tr>
}
</tbody>
</table>
</div>
全部位于Index.cshtml中的脚本
<script type="text/javascript">
var dataTable;
$(document).ready(function () { // prepares datatable, highlight row selection , modal clear inputs on close.
dataTable = $('#product-table').DataTable({
stateSave: true,
"columnDefs": [
{
className: "hide_column", "targets": [1],
}
,
{
className: "hide_column", "targets": [3]
}]
});
$('#product-table tbody, .btn-edit, .btn-delete').on('click', 'tr', function () {
dataTable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
});
$("#AddProductModal").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null);
clearInputs();
});
var categoryDescription = $("#categoryId option:selected").text();
$("#categoryDescription").val(categoryDescription);
var manufacturerName = $("#manufacturerId option:selected").text();
$("#manufacturerName").val(manufacturerName);
});
function updateProductTable(e) { // called function on ajax.beginform success
// set e.data to array
// if true updates table after add or edit, use row.add(array) or row().data(array) respectively.
// if false, validates input and show validation messages on each input box.
var arr = null;
var new_record = null;
if (e.success) {
if (e.success == "TrueAdd") {
arr = $.map(e.data, function (value, index) { return [value]; });
var url = "@Html.Raw(@Url.Action("EditProduct", "Product", new { id = "product" }))";
url = url.replace('product', arr[0]);
alert(arr[0]);
new_record = [arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6], arr[7], arr[8],arr[9],
'<button type="button" data-toggle="modal" href=' + url + ' data-target="#AddProductModal" class="btn-edit btn btn-info btn-default">Edit</button>',
'<button type="button" class="btn-delete btn btn-info btn-default">Delete</button>'];
dataTable.row.add(new_record).draw(false);
clearInputs();
hideModal();
}
else if (e.success == "TrueEdit") {
arr = $.map(e.data, function (value, index) { return [value]; });
var url = "@Html.Raw(@Url.Action("EditProduct", "Product", new { id = "product" }))";
url = url.replace('product', arr[0]);
new_record = [arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6], arr[7], arr[8],arr[9],
'<button type="button" data-toggle="modal" href=' + url + ' data-target="#AddProductModal" class="btn-edit btn btn-info btn-default">Edit</button>',
'<button type="button" class="btn-delete btn btn-info btn-default">Delete</button>'];
dataTable.row('.selected').data(new_record).draw(false);
clearInputs();
hideModal();
}
}
else if (!e.success) {
$('.modal-body').find('input').each(function ()
{
if (!$(this).prop('required')) {}
else {}
});
}
}
function hideModal() {
$('#AddProductModal').modal('hide'); // called function hide modal.
}
function clearInputs() { // called function clear inputs , set productId to zero and categoryid to Select Category.
$('.modal-body').find('input').val('');
$('#productId').val('0');
$('select#categoryId option:eq(0)').prop('selected', 'selected');
$('select#manufacturerId option:eq(0)').prop('selected', 'selected');
}
$(document).on('click', '.btn-delete', function () { // delete, open dialog box , get selected row data, use jquery ajax to delete record, update table on success.
var productId = $(this).closest('tr').children('td:eq(0)').text();
if (productId != 0) {
if (confirm("Delete this record?")) {
$.ajax({
type: 'POST',
url: '/Product/Delete',
data: { productId: productId },
success: function (e) {
if (e.success) {
dataTable.row('.selected').remove().draw(false);
}
}
});
}
}
});
$(document).on('change', '#categoryId', function () { // adds categoryId text to category description hidden field
var categoryDescription = $("#categoryId option:selected").text();
$("#categoryDescription").val(categoryDescription);
});
$(document).on('change', '#manufacturerId', function () { // adds manufacturerId text to manufacturer name hidden field
var manufacturerName = $("#manufacturerId option:selected").text();
$("#manufacturerName").val(manufacturerName);
});
</script>
问题是，在加载索引和部分视图以显示所有数据列表（您已获得搜索框，单击每行时的高亮显示）时，文档就绪正常。 但是在搜索特定数据（使用Index.cshtml AjaxBeginForm SearchProduct）后加载部分视图时，文档就绪无法正常工作，单击每个文件后没有任何突出显示，没有搜索框。我注意到所有未处于文档准备状态的函数都被调用。
为什么呢？ ，我将非常感谢您的回复
非常感谢你 -John
答案 0 :(得分：1)
它现在正在工作，我将文档准备好的脚本放到Product.cshtml局部视图中，现在点击和突出显示现在正在工作。
谢谢， 约翰