0
我有一个MVC 4 web应用程序（测试站点）。 我有产品控制器，产品视图（索引（非局部视图）和Product.cshtml（局部视图））。我也有一个_layoutJquery的文档已准备好在部分视图中不起作用
Index.cshtml（不是局部视图）（从MVC来）
@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（“〜/查看/产品的所有数据/Product.cshtml“） 当搜索特定的数据时，这也是正在使用的内容。
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