Boîte de dialogue JQuery UI et Ajax.BeginForm

Question

J'ai une boîte de dialogue JQuery UI. L'application permet aux gens de créer des listes et cette boîte de dialogue leur permet de spécifier le nom de la liste. Le voici:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Klera.Models.CList>" %> 

    <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %> 

    <% using (Ajax.BeginForm("CreateList", new AjaxOptions {UpdateTargetId="mylists"})) %> 

      <p> 
       <label for="listname">List Name:</label> 
       <%= Html.TextBox("listname") %> 
       <%= Html.ValidationMessage("listname", "*") %> 
      </p> 

      <%=Ajax.ActionLink("Create", "CreateList", new AjaxOptions{}) %> 



    <% } %> 

J'ai essayé d'en faire une forme HTML normale et d'appeler la méthode de JQuery. Je ne suis pas sûr si je faisais quelque chose de mal, mais l'objet qui a été renvoyé au contrôleur était nul. Je suppose que c'est parce que Jquery ne sérialise pas et que je dois spécifier des propriétés telles que name = "un champ de formulaire", etc. dans l'action de publication. est-ce une supposition correcte?

Dans tous les cas, étant donné les difficultés liées au démarrage d'une action de JQuery, j'ai essayé d'utiliser Ajax.ActionLink et Ajax.BeginForm.

Lorsque je clique pour que la boîte de dialogue s'affiche, rien ne s'affiche maintenant. Je me demande si c'est un problème de synchronisation? Sur $ (document) .ready(), je suis en cours d'initialisation une boîte de dialogue avant de charger la vue partielle:

$("#listdiv").dialog({ 
       autoOpen: false, 
       buttons: { 
        Create: function() { 
        }, 
        Cancel: function() { 
         $(this).dialog('close'); 
        } 
       } 

      }); 

Je puis ajouter un gestionnaire d'événements pour un événement click:

$("#newlist").click(function() { 
       $("#listdiv").load("Record/CreateList"); 
       $("#listdiv").dialog("open"); 

      }); 

Je ne sais pas exactement pourquoi une vue partielle n'apparaît pas dans ce cas.

Answer 1

Tout d'abord, mettre en cache la boîte de dialogue, puis mettre à jour son code HTML

var dialog=$('#newlist').dialog({ 
    //dialog options 
}); 

$.ajax({ 
    url: 'Record/CreateList', 
    success: function(html){ 
    console.log(html);//look good? 
    dialog.html(html).dialog('open'); 
    } 
});