Ajax.BeginForm e validazione

Question

validazione lato client

non funziona per me in Ajax.BeginForm

Questo è il mio codice:

<div id="report"> 
    <div id="projectReport"> 
     <div > 
      @{ 
       Html.EnableClientValidation(); 
      } 

      @using (Ajax.BeginForm("AnalyticsDates", new AjaxOptions 
       { 
        InsertionMode = InsertionMode.Replace, 
        UpdateTargetId = "reportContent" 
       })) 
      { 
       @Html.LabelFor(m => m.StartDate) 
       @Html.TextBoxFor(m => m.StartDate, new { id = "start" }) 
       @Html.ValidationMessageFor(model => model.StartDate) 
       @Html.LabelFor(m => m.EndDate) 
       @Html.TextBoxFor(m => m.EndDate, new { id = "end" }) 
       @Html.ValidationMessageFor(model => model.EndDate) 
       <input id="btnsearch" type="submit" value=@Titles.Search class="iconHeader"/> 
      } 
     </div> 
    </div> 
    <div id="reportContent"> 
    </div> 
</div> 

E mi hanno consentito di convalida nella pagina web.config:

<add key="ClientValidationEnabled" value="true" /> 
<add key="UnobtrusiveJavaScriptEnabled" value="true" /> 

e ha aggiunto i file js e

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script> 

secondo problema correlato al primo, mia azione è

[HttpPost] 
     [Authorize(Roles = "XXXReport")] 
     public async Task<ActionResult> AnalyticsDates(ReportRequestVM reportRequestVM) 
     { 
      if (!ModelState.IsValid) 
      { 
       return View("**MainReports**", reportRequestVM); 
      } 

      // fill reportRequestVM with data 
      return View("**PartialReport**", reportRequestVM); 


     } 

Se il modello è valido torno una vista parziale e la pagina guarda bene, altrimenti torno vista principale, con la forma, ma in questo la pagina lo rende doppio. la domanda è, nel caso in cui la validazione del client fallisca, come restituire il modulo principale con gli errori di validazione?

Qualsiasi aiuto sarebbe apprezzato, 10x Rony

Answer 1

Ho capito ... si dovrebbe avere una vista parziale sul risultato e sulla query.

e in caso di errore è necessario restituire "http bad request" e utilizzare quanto segue per impostare la convalida sulla vista parziale della ricerca.

questo è come dovrebbe apparire:

 @using (Ajax.BeginForm("CloudAnalyticsDates", new AjaxOptions 
      { 
       InsertionMode = InsertionMode.Replace, 
       UpdateTargetId = "reportContent", 
       OnFailure = "OnCloudAnalyticsFailure", 
       OnBegin = "ValidateForm", 


      })) 
     { 
      @Html.LabelFor(m => m.StartDate) 
      @Html.TextBoxFor(m => m.StartDate, new { id = "start" }) 
      @Html.ValidationMessageFor(model => model.StartDate) 
      @Html.LabelFor(m => m.EndDate) 
      @Html.TextBoxFor(m => m.EndDate, new { id = "end" }) 
      @Html.ValidationMessageFor(model => model.EndDate) 
      <input id="btnsearch" type="submit" value=@Titles.Search class="iconHeader"/> 
     } 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#datePicker").kendoDatePicker(); 
     $("#start").kendoDatePicker().data("kendoDatePicker"); 
     $("#end").kendoDatePicker().data("kendoDatePicker"); 
    }); 


    function OnCloudAnalyticsFailure(parameters) { 

     $('#projectReport').html(parameters.responseText); 
     $('#reportContent').empty(); 
     CleanValidationError('form'); 
    } 



</script> 

e sul server dovrebbe assomigliare:

[HttpPost] 

    public async Task<ActionResult> CloudAnalyticsDates(ReportRequestVM reportRequestVM) 
    { 
     if (!ModelState.IsValid) 
     { 
      Response.StatusCode = (int)HttpStatusCode.BadRequest; 
      return PartialView("_ReportQuery", reportRequestVM); 
     } 


     reportRequestVM.BomTotals = await CommonRequestsHelper.GetBomTotalAnalytics(bomTotalRequest); 
     return PartialView("_ProjectReport", reportRequestVM); 
    } 

Answer 2

Quando il ModelState non è valido e si ritorna la vista con il modello che contiene gli errori, la risposta inviata dal server dispone di uno stato HTTP 200 che indica che la richiesta successo. In questo caso, il modulo Ajax fa ciò che gli hai ordinato di fare e cioè inserire la risposta restituita nella divisione repostContent (puoi verificarlo controllando che il secondo rendering della pagina sia fatto all'interno di quel div). Per quanto riguarda il modo in cui ottenere un modulo di invio di ajax per comportarsi allo stesso modo dell'invio di moduli normali per quanto riguarda la visualizzazione di messaggi di convalida, non ho trovato un semplice metodo diretto (forse qualcuno può indicarne uno qui :) per noi). Ho risolto questo problema:

1. Avere il modulo in una vista parziale reso in un div (formDiv) della vista principale.
2. Avere un "OnFailure" specificata sul modulo ajax che inserisce il testo di risposta nel div che conteneva la forma originale (formDiv)
3. Override OnActionExecuted (dal momento che ho un regolatore principale che tutti i miei altri quelli ereditano da questo è fatto in un unico posto) per verificare se una richiesta IsAjax e ModelState non è valida, cambio lo stato della risposta in 4xx. Questo fa sì che "OnFailure" venga licenziato sostituendo il modulo originale con quello restituito all'interno del ramo If (! ModelState.Isvalid).