Я использовал код из статьи ASP.NET MVC: форма диалога Ajax с использованием jQuery UI, и это в основном работает. Я создал сетку, в которой перечислены записи, и у каждой записи есть ссылка, чтобы открыть диалоговое окно для редактирования записи. После того, как запись была изменена, кнопка сохранения нажата, и сетка обновляется с помощью ajax. Это отлично работает, но проблема возникает после первого сохранения записи и обновления ajax сетки. Если щелкнуть ссылку для редактирования записи, диалоговое окно не появляется, отображается только частичное представление. Я предполагаю, но кажется, что частичное представление, которое я пытаюсь воссоздать снова, не распознает родительский контейнер. Есть идеи?
Отобразить частичный вид, содержащий сетку:
<div id="VehicleHold">
@Html.Partial("_VehicleHold")
</div>
Частичный вид, который составляет диалог:
@using VehicleWeb.MVCHelpers
@{
int agreementNumber = 0;
var countData = ViewBag.VehicleHoldViewModel as System.Collections.Generic.IEnumerable<VehicleWeb.Model.VehicleHoldViewModel>;
if (countData != null)
{
if (countData.Count() > 0)
{
agreementNumber = (int)countData.DefaultIfEmpty().First().AgreementNumber;
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<thead>
<tr class="table-header">
<th>Edit</th>
<th>Delete</th>
<th>
Type
</th>
<th>
Year
</th>
<th>
Make/Model
</th>
<th>
Plate
</th>
<th>
VIN
</th>
<th>
Num Pass
</th>
</tr>
</thead>
<tbody>
@{
foreach (var item in (ViewBag.VehicleHoldViewModel as System.Collections.Generic.IEnumerable<VehicleWeb.Model.VehicleHoldViewModel>))
{
<tr>
<td>
@Html.ImageDialogLink("UpdateVehicleHold", "Exposure", new { id = item.RID }, "Edit Hold Vehicle", "VehicleHold", Url.Action("RefreshVehicleHold/" + agreementNumber), Html.ResolveUrl("~/pics/edit-button.png"), "Edit Hold Vehicle", "600", "800", new { style = "text-decoration:none;" }, new { style = "text-decoration:none; border-style: none;" })
</td>
<td>
<div title="Vehicle Year">@item.EditType.ToString()</div>
</td>
<td>
<div title="Vehicle Year">@item.AutoYear.ToString()</div>
</td>
<td>
<div title="Vehicle Make/Model">@item.MakeModel.ToString()</div>
</td>
<td>
<div title="Vehicle Plate Number">@item.DistVehNo.ToString()</div>
</td>
<td>
<div title="Vehicle VIN">@item.IDNumber.ToString()</div>
</td>
<td>
<div title="Number Of Passengers">@item.NumOfPassengers.ToString()</div>
</td>
</tr>
}
}
</tbody>
</table>
}
}
}
Я новичок в задании вопросов здесь, поэтому просто дайте мне знать, если вам нужно увидеть больше кода.
EDIT: Я не знаю, имеет ли это значение для файлов jQuery. Я сегодня возился с сегодняшней позицией и не нашел успеха. У меня есть файл jQuery в основной форме, который он использовал для подключения диалогового окна. После того, как AJAX обновляет DIV, ссылка на редактирование, похоже, лишает вас всех знаний о каком-либо родительском коде. Моя последняя теория заключается в том, что это может быть связано с этим кодом. Может быть, потому, что он в готовом блоке?
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
// Wire up the click event of any current or future dialog links
$('.dialogLink').on('click', function () {
var element = $(this);
// Retrieve values from the HTML5 data attributes of the link
var dialogTitle = element.attr('data-dialog-title');
var dialogWidth = element.attr('data-dialog-width');
var dialogHeight = element.attr('data-dialog-height');
var updateTargetId = '#' + element.attr('data-update-target-id');
var updateUrl = element.attr('data-update-url');
// Generate a unique id for the dialog div
var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
var dialogDiv = "<div id='" + dialogId + "'></div>";
// Load the form into the dialog div
$(dialogDiv).load(this.href, function () {
$(this).dialog({
modal: true,
resizable: false,
title: dialogTitle,
closeOnEscape: false,
width: dialogWidth,
height: dialogHeight,
buttons: [
{
text: "Save",
icons: { primary: "ui-icon-check" },
click: function () {
// Manually submit the form
var form = $('form', this);
if ($(form).valid()) {
$(form).submit();
$(this).dialog('close');
}
}},
{
text: "Cancel",
icons: { primary: "ui-icon-closethick" },
click: function () {
$(this).dialog('close');
$(this).empty();
}
}]
});
// Enable client side validation
$.validator.unobtrusive.parse(this);
// Setup the ajax submit logic
wireUpForm(this, updateTargetId, updateUrl);
});
return false;
});
});
function wireUpForm(dialog, updateTargetId, updateUrl) {
$('form', dialog).submit(function () {
// Do not submit if the form
// does not pass client side validation
if (!$(this).valid()) {
return false;
}
// Client side validation passed, submit the form
// using the jQuery.ajax form
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
// Check whether the post was successful
if (result.success) {
// Close the dialog
$(dialog).dialog('close');
$(dialog).empty();
// Reload the updated data in the target div
$(updateTargetId).load(updateUrl);
} else {
alert('failure');
// Reload the dialog to show model errors
$(dialog).html(result);
// Enable client side validation
$.validator.unobtrusive.parse(dialog);
// Setup the ajax submit logic
wireUpForm(dialog, updateTargetId, updateUrl);
}
}
});
return false;
});
}
Это случается, когда мы сохраняем сценарий в главном представлении, он будет связывать событие в первый раз, но не будет работать после обратной передачи, попробуйте переместить скрипт в частичном представлении, если он не работает, поделитесь еще одним кодом и увидит, что не так