Zadzwoń do niestandardowego okna dialogowego potwierdzenia w Ajax.Beginform w MVC3

Question

Chcę móc korzystać z niestandardowego okna dialogowego jQuery lub przynajmniej mieć możliwość zmiany tekstu przycisków z OK/Anuluj na coś innego przy korzystaniu z właściwości AjaxOptions.Confirm w funkcji Ajax.Beginform. Tak:

<div> 
    @using (Ajax.BeginForm("Function", "Controller", new { id = theId }, new AjaxOptions 
     { 
      HttpMethod = "POST", 
      UpdateTargetId = "theForm", 
      InsertionMode = InsertionMode.Replace, 
      LoadingElementId = "iconGif", 
      OnBegin = "OnBegin", 
      OnFailure = "OnFailure", 
      OnSuccess = "OnSuccess", 
      Confirm = "Are you sure?" //TODO: Confirm with different dialog? 
     }, new { id = "feedback-form" })) 
    { 
     //Some stuff 
     <button onclick="derp()">Submit</button> 
    } 
</div> 

Czy istnieje sposób, aby osiągnąć ten cel z Ajax.BeginForm przez AjaxOptions.Confirm nieruchomości?

Answer 1

Nie, nie można tego osiągnąć za pomocą właściwości Confirm obiektu AjaxOptions. To po prostu używa metody javascript window.confirm, która nie dopuszcza żadnych dostosowań interfejsu użytkownika i zależy od przeglądarki. Będziesz musiał samodzielnie wdrożyć tę funkcję. Na przykład możesz wypróbować numer jQuery UI dialog plugin.

Answer 2

Natrafiłem na to, aby dostosować tekst AjaxOptions Potwierdź z wartością, która nie została jeszcze utworzona, gdy Ajax.Beginform jest renderowany.
Na przykład:
Confirm="Are you sure you want to create Customer Id" + someValue + "?"

Wreszcie znalazł rozwiązanie: Podejście dotyczy zmiany przedkłada zachowanie przycisku z JQuery wyciągnąć wartość, prowadzę własną dialogowym Potwierdzanie i wysłać formularz Ajax jeśli potwierdzą użytkownika.

etapy:
1- Usuń Potwierdź z AjaxOptions i unikać typ użytkownika przycisk SET = "submit", może być type = "przycisk"

<div> 
    @using (Ajax.BeginForm("Function", "Controller", new AjaxOptions 
     { 
      HttpMethod = "POST", 
      UpdateTargetId = "theForm", 
      InsertionMode = InsertionMode.Replace, 
      LoadingElementId = "iconGif", 
      OnBegin = "OnBegin", 
      OnFailure = "OnFailure", 
      OnSuccess = "OnSuccess" 
      // Confirm option has been removed 
     }, new { id = "feedback-form" })) 
    { 
     //Some stuff 
     <button id="buttonId" type="button" onclick="derp()">Submit</button> //Setting id and type 
    } 
</div> 

2- Dodaj następujący do js plik, do którego odnosi się na stronie lub układzie.

$("#buttonId").click(function() { 
if(confirm("Are you sure you want to create Id "+$("#CustomerId").val() + " ?")) 
{ 
$("#feedback-form").submit(); // Submitting the form if user clicks OK 
    } 
    }); 

"CustomerId" to identyfikator ukrytych danych wejściowych na stronie.
Mam nadzieję, że to pomoże.

Answer 3

Szukałem rozwiązania i przyszedłem tutaj. Chociaż Darin kategorycznie zaprzecza możliwości rozwiązania, Jego odpowiedź właściwie doprowadziła mnie do rozwiązania.

Jeśli można żyć z dostarczania jquery.unobtrusive-ajax.js plik w wiązce, a następnie można przejść z roztworem

Uwaga: Ta próbka wykorzystuje Bootstrap Dialog

zastąpić funkcję asyncRequest(element, options) w jquery.unobtrusive-ajax.js z tego

function asyncRequest(element, options) {    
     var confirm = element.getAttribute("data-ajax-confirm"); 
     if (confirm) { 
      BootstrapDialog.confirm({ 
       title: 'Please Confirm!', 
       type: BootstrapDialog.TYPE_WARNING, 
       message: confirm, 
       draggable: true, 
       callback: function (result) { 
        if (result) { 
         NewMethod(element, options); 
        }      
       } 
      }); 
     } 
     else { 
      NewMethod(element, options); 
     }   
    } 

    function NewMethod(element, options) 
    { 
     var loading, method, duration; 
     loading = $(element.getAttribute("data-ajax-loading")); 
     duration = parseInt(element.getAttribute("data-ajax-loading-duration"), 10) || 0; 

     $.extend(options, { 
      type: element.getAttribute("data-ajax-method") || undefined, 
      url: element.getAttribute("data-ajax-url") || undefined, 
      cache: !!element.getAttribute("data-ajax-cache"), 
      beforeSend: function (xhr) { 
       var result; 
       asyncOnBeforeSend(xhr, method); 
       result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(element, arguments); 
       if (result !== false) { 
        loading.show(duration); 
       } 
       return result; 
      }, 
      complete: function() { 
       loading.hide(duration); 
       getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(element, arguments); 
      }, 
      success: function (data, status, xhr) { 
       asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html"); 
       getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(element, arguments); 
      }, 
      error: function() { 
       getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"]).apply(element, arguments); 
      } 
     }); 

     options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" }); 

     method = options.type.toUpperCase(); 
     if (!isMethodProxySafe(method)) { 
      options.type = "POST"; 
      options.data.push({ name: "X-HTTP-Method-Override", value: method }); 
     } 

     $.ajax(options); 
    }