ASP.NET Mvc Jquery ui 不起作用？

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();
    });
});
});

我的问题是，当我单击第一个链接 (AddCustomer) 时，它会打开一个对话框窗格。但是我单击了 foreach 语句中的其他内容，它不起作用（它作为经典 html 而不是在对话框窗格中打开）。 AddCustomer.cshtml 和 EditCustomer.cshtml 相同。当我从EditCustomer(int sno) 操作中删除 sno 时它可以工作。（EditCustomer() 而不是EditCustomer(int sno) 这个工作。）

我该如何解决。我想将参数传递给操作并使用 ui-dialog-pane。

谢谢。

Answer 1

您似乎使用了 id-selector，即$('#EditCustomerLink')
由于每个页面的 id 应该是唯一的，因此 jQuery 在找到具有此类 id 的第一个元素后停止解析 DOM。

这就是你应该使用类选择器的原因。例如：

<td>@Html.ActionLink("Düzenle", "EditCustomer", "Customer", routeValues: new { sno = item.sno }, htmlAttributes: new { @class = "EditCustomerLink", data_dialog_title = "Müşteri Bilgileri Güncelle" })

并将click-event 绑定到$('.EditCustomerLink')