0

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.

2
  • Can you post your Jquery code which opens the dialogs? Commented Jul 3, 2012 at 8:53
  • I added jquery codes. I use microsoft defaults that is used login and register. I used this jquery for a lot of page. They work fine. Commented Jul 3, 2012 at 8:58

1 Answer 1

1

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')

Sign up to request clarification or add additional context in comments.

4 Comments

When I remove sno from EditCustomer action in controller it works.
I did it. But still not working. I added this: $('.EditCustomerLink').click(function () { $(this).attr("id", "EditCustomerLink"); }); Is this right ??
Nope. You can just change this line: var links = ['#loginLink', '#registerLink', '#AddCustomerLink', '#AddCustomerMeterLink', '.EditCustomerLink'];
it works but I have new problem :) after I clicked one of them I should refresh page. Because custumerId is not refresh. When I clicked another It always shows first clicked customer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.