ASP.NET Mvc Jquery ui ne fonctionne pas?

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

Et ma question, Quand je cliqué sur le premier lien (AddCustomer), il ouvre une fenêtre de dialogue. Mais j'ai cliqué sur autre qui est dans l'instruction foreach, est ne fonctionne pas (il est ouvert en tant que html classique pas dans un volet de dialogue). AddCustomer.cshtml et EditCustomer.cshtml sont les mêmes. Lorsque je supprime sno de EditCustomer(int sno) action Cela fonctionne. (EditCustomer() au lieu de EditCustomer(int sno) ce travail.)

Comment puis-je résoudre ce problème. Je veux passer paramater à l'action et utiliser ui-dialog-pane.

Merci.

Answer 1

Il semble que vous utilisez id-sélecteur, à savoir $('#EditCustomerLink')
Comme id doit être unique par page, jQuery arrête l'analyse syntaxique DOM après avoir trouvé premier élément avec un tel id. C'est pourquoi vous devez utiliser des sélecteurs de classe. Par exemple:

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

et se lient click -event à $('.EditCustomerLink')