ASP.NET Mvc Jquery ui does not work?
-
18-06-2021 - |
Question
CustomerController.cs
public ActionResult AddCustomer()
{
return ContextDependentView(new _Customers());
}
public ActionResult EditCustomer(int sno)
{
return ContextDependentView(entity.Customers.Where(x => x.sno == sno).FirstOrDefault());
}
private ActionResult ContextDependentView(object model)
{
string actionName = ControllerContext.RouteData.GetRequiredString("action");
if (Request.QueryString.AllKeys != null)
{
ViewBag.FormAction = "Json" + actionName;
return PartialView(model);
}
else
{
ViewBag.FormAction = actionName;
return View(model);
}
}
customers.cshtml
@Html.ActionLink("Müşteri Ekle", "AddCustomer", "Customer", routeValues: null, htmlAttributes: new { id = "AddCustomerLink", data_dialog_title = "Yeni Müşteri" })
<div class="div_grid_container" id="div_grid_container_customers">
<table id="table_grid" class="tablesorter">
<thead>
<tr>
<th>
Güncelle
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@Html.ActionLink("Düzenle", "EditCustomer", "Customer", routeValues: new { sno = item.sno }, htmlAttributes: new { id = "EditCustomerLink", data_dialog_title = "Müşteri Bilgileri Güncelle" })
</td>
</tr>
}
</tbody>
</table>
</div>
jquery
$(function () {
// Cache for dialogs
var dialogs = {};
var getValidationSummaryErrors = function ($form) {
// We verify if we created it beforehand
var errorSummary = $form.find('.validation-summary-errors, .validation-summary-valid');
if (!errorSummary.length) {
errorSummary = $('<div class="validation-summary-errors"><span>Lütfen hataları düzeltin ve tekrar deneyin.</span><ul></ul></div>')
.prependTo($form);
}
return errorSummary;
};
var displayErrors = function (form, errors) {
var errorSummary = getValidationSummaryErrors(form)
.removeClass('validation-summary-valid')
.addClass('validation-summary-errors');
var items = $.map(errors, function (error) {
return '<li>' + error + '</li>';
}).join('');
var ul = errorSummary
.find('ul')
.empty()
.append(items);
};
var resetForm = function ($form) {
// We reset the form so we make sure unobtrusive errors get cleared out.
$form[0].reset();
getValidationSummaryErrors($form)
.removeClass('validation-summary-errors')
.addClass('validation-summary-valid')
};
var formSubmitHandler = function (e) {
var $form = $(this);
// We check if jQuery.validator exists on the form
if (!$form.valid || $form.valid()) {
$.post($form.attr('action'), $form.serializeArray())
.done(function (json) {
json = json || {};
// In case of success, we redirect to the provided URL or the same page.
if (json.success) {
location = json.redirect || location.href;
} else if (json.errors) {
displayErrors($form, json.errors);
}
})
.error(function () {
displayErrors($form, ['Bilinmeyen bir hata oluştu.']);
});
}
// Prevent the normal behavior since we opened the dialog
e.preventDefault();
};
var loadAndShowDialog = function (id, link, url) {
var separator = url.indexOf('?') >= 0 ? '&' : '?';
// Save an empty jQuery in our cache for now.
dialogs[id] = $();
// Load the dialog with the content=1 QueryString in order to get a PartialView
$.get(url + separator + 'content=1')
.done(function (content) {
dialogs[id] = $('<div class="modal-popup">' + content + '</div>')
.hide() // Hide the dialog for now so we prevent flicker
.appendTo(document.body)
.filter('div') // Filter for the div tag only, script tags could surface
.dialog({ // Create the jQuery UI dialog
title: link.data('dialog-title'),
modal: true,
resizable: true,
draggable: true,
width: link.data('dialog-width') || 600,
beforeClose: function () { resetForm($(this).find('form')); }
})
.find('form') // Attach logic on forms
.submit(formSubmitHandler)
.end();
});
};
// List of link ids to have an ajax dialog
var links = ['#loginLink', '#registerLink', '#AddCustomerLink', '#AddCustomerMeterLink', '#EditCustomerLink'];
$.each(links, function (i, id) {
$(id).click(function (e) {
var link = $(this),
url = link.attr('href');
if (!dialogs[id]) {
loadAndShowDialog(id, link, url);
} else {
dialogs[id].dialog('open');
}
// Prevent the normal behavior since we use a dialog
e.preventDefault();
});
});
});
And my question, When I clicked the first link (AddCustomer
), it opens a dialog pane. But I clicked other that is in foreach statement, Is does not work(It is opened as classic html not in a dialog-pane). AddCustomer.cshtml
and EditCustomer.cshtml
are same. When I remove sno from EditCustomer(int sno)
action It works.(EditCustomer()
instead of EditCustomer(int sno)
this work.)
How Can I fix it. I want to pass paramater to action and to use ui-dialog-pane.
Thanks.
La solution
It seems that you use id-selector, i.e. $('#EditCustomerLink')
Since id should be unique per page, jQuery stops parsing DOM after finding first element with such id.
That's why you should use class-selectors. For example:
<td>@Html.ActionLink("Düzenle", "EditCustomer", "Customer", routeValues: new { sno = item.sno }, htmlAttributes: new { @class = "EditCustomerLink", data_dialog_title = "Müşteri Bilgileri Güncelle" })
And bind click
-event to $('.EditCustomerLink')