0
私はMVC 4 Webアプリケーション（テストサイト）を持っています。 私はProduct Controller、Product Views（インデックス（部分的な非表示））、Product.cshtml（部分的なビュー）を持っています。私はまた、_layout（MVCから来た）Jqueryのドキュメントの準備が部分的に表示されない
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（ "〜/ビュー/製品@初め内のすべてのデータをレンダリングしています/Product.cshtml "） 特定のデータを検索するときに、これも使用されているものです。
すべての質問は、文書準備がインデックスのロード時に正常に動作している、ある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>
に位置している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 AjaxBeginForm SearchProductを使用）を検索した後にパーシャルビューをロードすると、ドキュメントの準備が正常に動作しません。それぞれをクリックして検索ボックスを表示してもハイライトは表示されません。私は、準備ができていないすべての機能が呼び出されていることに気づいた。
なぜですか？ 、私はあなたの回答に感謝します
はあなたにたくさんありがとうござい - ジョン