Javascript Jquery'；s的“文档准备就绪”在部分视图中不起作用
我有一个MVC4Web应用程序（一个测试站点）。 我有一个产品控制器、产品视图（索引（非部分视图）和Product.cshtml（部分视图））。我也有一个_布局（来自MVC） cshtml（不是局部视图）Javascript Jquery'；s的“文档准备就绪”在部分视图中不起作用,javascript,jquery,asp.net-mvc,asp.net-mvc-4,Javascript,Jquery,Asp.net Mvc,Asp.net Mvc 4,我有一个MVC4Web应用程序（一个测试站点）。 我有一个产品控制器、产品视图（索引（非部分视图）和Product.cshtml（部分视图））。我也有一个_布局（来自MVC） cshtml（不是局部视图） @model identitysp.Models.ViewModel.ProductViewModel @{ Layout=“~/Views/Shared/_Layout.cshtml”； } @Scripts.Render（“~/bundles/jquery”） @Scripts.Rende
@model identitysp.Models.ViewModel.ProductViewModel
@{
Layout=“~/Views/Shared/_Layout.cshtml”；
}
@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/jquery非结构化ajax”）
@使用（Ajax.BeginForm（“SearchProduct”、“Product”），null，new
AjaxOptions（）{UpdateTargetId=“searchResults”}，null））
{
}
@Html.Partial（“~/Views/Product/Product.cshtml”）
@model identitysp.Models.ViewModel.ProductViewModel
产品Id
类别
类别
制造厂
制造商名称
名称
描述
模型
发布日期
发布年份
行动
@foreach（Model.ProductList中的var项）
{
@项目Id
@项目.类别ID
@item.CategoryDescription
@项目1.ManufacturerId
@item.ManufacturerName
@项目名称
@项目.说明
@项目.模型
@item.ReleasedDate
@item.ReleasedYear
编辑
删除
}
<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>
var数据表；
$（document）.ready（函数（）{//准备数据表，突出显示行选择，关闭时清除模式输入）。
dataTable=$（“#产品表”）。dataTable({
stateSave：没错，
“columnDefs”：[
{
类名：“隐藏列”，“目标”：[1]，
}
,
{
类名：“隐藏列”，“目标”：[3]
}]
});
$（“#产品表tbody、.btn edit、.btn delete”）。在（'click'，'tr'，function（）{
dataTable.$（'tr.selected'）。removeClass（'selected'）；
$（this.addClass（'selected'）；
});
$（“#AddProductModal”）.on（'hidden.bs.modal'，function（）{
$（this.data（'bs.model'，null）；
clearInputs（）；
});
var categoryDescription=$（“#categoryId选项：选中”）.text（）；
$（“#类别说明”）.val（类别说明）；
var manufacturerName=$（“#manufacturerId选项：选中”）.text（）；
$（“#制造商名称”）.val（制造商名称）；
});
函数updateProductTable（e）{//调用了ajax.beginform上的函数
//将e.data设置为数组
//如果true在添加或编辑后更新表，则分别使用row.add（数组）或row（）.data（数组）。
//如果为false，则验证输入并在每个输入框上显示验证消息。
var-arr=null；
var new_record=null；
如果（如成功）{
如果（例如，成功==“TrueAdd”）{
arr=$.map（例如数据、函数（值、索引）{return[value]；}）；
var url=“@Html.Raw（@url.Action（“EditProduct”，“Product”，new{id=“Product”}））”；
url=url.replace（'product'，arr[0]）；
警报（arr[0]）；
新记录=[arr[0]、arr[1]、arr[2]、arr[3]、arr[4]、arr[5]、arr[6]、arr[7]、arr[8]、arr[9]，
“编辑”，
'删除']；
dataTable.row.add（新记录）.draw（false）；
clearInputs（）；
hideModal（）；
}
否则如果（如成功==“TrueEdit”）{
arr=$.map（例如数据、函数（值、索引）{return[value]；}）；
var url=“@Html.Raw（@url.Action（“EditProduct”，“Product”，new{id=“Product”}））”；
url=url.replace（'product'，arr[0]）；
新记录=[arr[0]、arr[1]、arr[2]、arr[3]、arr[4]、arr[5]、arr[6]、arr[7]、arr[8]、arr[9]，
“编辑”，
'删除']；
dataTable.row（'.selected'）。数据（新记录）。绘制（false）；
clearInputs（）；
hideModal（）；
}
}
否则如果（！e.成功）{
$（'.modal body'）。查找（'input'）。每个（函数（）
{
if（！$（this.prop（'required'））{
else{}
});
}
}
函数hideModal（）{
$（'#AddProductModal'）.modal（'hide'）；//调用函数hide-modal。
}
函数clearInputs（）{//调用函数clear inputs，将productId设置为零，将categoryid设置为选择类别。
$（'.modal body'）.find（'input'）.val（''）；
$（'#productId'）.val（'0'）；
$（'select#categoryId option:eq（0）'）。prop（'selected'，'selected'）；
$（'select#manufacturerId option:eq（0）'）.prop（'selected'，'selected'）；
}
$（文档）.on（'click'，'.btn delete'，函数（）{//delete，打开对话框，获取所选行数据，使用jquery ajax删除记录，成功时更新表。
var-productId=$（this）.closest（'tr'）.children（'td:eq（0）'）.text（）；
if（productId！=0）{
如果（确认（“删除此记录？”）{
$.ajax({
键入：“POST”，
@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>
<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>