Invio tramite controller Ajax a MVC

Ciao Attualmente sto cercando di ottenere un modulo per pubblicare un controller utilizzando AJAX, ma finora non ho avuto fortuna, ho cercato di ottenere il modulo per inviare i valori nel modulo al controller sulla sottomissione del modulo ma non funzionerà nessuno sa perché? :Invio tramite controller Ajax a MVC

CSHTML:

@{ 
    Layout = null; 
} 
<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Abintegro Search Prototype</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script> 
     $("#submitsearch").click(function (e) { 
      e.preventDefault(); 
      var form = $("#searchform"); 
      $.ajax({ 
       url: "Search/GetSearchDetails", 
       data: form.serialize(), 
       type: 'POST', 
       success: function (data) { 
        //Show popup 
        $("#popup").html(data); 
       } 
      }); 
     }); 
</script> 

    <!-- Javascript function to add autocomplete search phrases for the company name text search--> 
    <script> 
     $(function() { 
      var searchPhrases = [ 
       "Zep Solutions", 
       "Wetherby Consultants Ltd", 
       "Webmploy", 
       "WATS Recruitment Ltd", 
       "Vital Resources", 
       "VG Charles and Co", 
       "Veredus UK", 
       "Venn Group", 
       "VanDuo Consulting" 
      ]; 
      $("#phrases").autocomplete({ source: searchPhrases }); 
     }); 
</script> 
</head> 

<body> 
    <form id="searchform" name="searchform"> 

     <div class="company-textbox"> 
     <label for="companyname">Company Name</label> 
     <input id="phrases" name="companyname"> 
     </div> 

     <br /> 

     <div class="specialities"> 
      <label for="specialities-dropdown">Specialities:</label> 
      <select name="specialities-dropdown"> 
       <option value="Consumer Products & Services">Consumer Product & Services</option> 
       <option value="Support Services">Support Services</option> 
       <option value="Communication & Entertainment">Communication & Entertainment</option> 
       <option value="Business & Professional Services">Business & Professional Services</option> 
       <option value="Public Sector">Public Sector</option> 
       <option value="Not for profit">Not for profit</option> 
       <option value="Sports Information">Sports Information</option> 
      </select> 
     </div> 

     <br /> 

     <div class="category"> 
      <label for="category-dropdown">Category:</label> 
      <select name="category-dropdown"> 
       <option value="Generalist">Generalist</option> 
       <option value="Specialist">Specialist</option> 
       <option value="Exec Search">Exec Search</option> 
       <option value="Interim Management">Interim Management</option> 
      </select> 
     </div>  

     <br /> 

     <div class="location-dropdown"> 
      <label for="location-dropdown">Location:</label> 
      <select name="Location"> 
       <option value="London">London</option> 
       <option value="Bristol">Bristol</option> 
       <option value="Manchester">Manchester</option> 
       <option value="Birmingham">Birmingham</option> 
      </select> 
     </div> 

     <input type="submit" value="Submit" name="submitsearch" id="submitsearch"> 
    </form> 
</body> 
</html>

Controller:

[HttpPost] 
     public string GetSearchDetails(string companyName, string specialities, string category, string location) 
     { 
      return liveSearchRepository.GetUserInputResults(companyName,specialities,category,location); 
     }

fonte

2016-02-29 Rob

cosa produce 'form.serialize()'? È meglio se crei una classe poco per l'operazione 'POST', e senti i dati di conseguenza dal tuo script. –

Prova ad inserire dataType: "html", come argomento nella tua chiamata .ajax – andreasnico

Che cosa esattamente non funziona? È possibile eseguire il debug di Javascript per verificare che sia necessario inviare i dati dei post al controller? –

Utilizzare questo codice Javascript invece di quello attuale. Ho corretto i problemi in dati post e il formiato corretto è inferiore:

<script> $("#submitsearch").click(function (e) { var postData = $(this).serializeArray(); e.preventDefault(); var form = $("#searchform"); $.ajax({ url: "Search/GetSearchDetails", data: postData, type: 'POST', success: function (data) { //Show popup $("#popup").html(data); } }); }); </script>

fonte

2016-02-29 09:53:40

Quando eseguo il debug di questo codice, arriva a: $ ("# submitsearch")) .click (function (e) {e quindi passi in un file chiamato BrowserLink dove sembra rimanere bloccato in un ciclo, un esempio del codice: (i.log ("Trasporto non valido:" + f + ", rimuovendolo dall'elenco dei trasporti."), t.splice (u, 1)); t.length === 0 && (i.log ("Nessun trasporto rimane all'interno dello spazio specificato transport array. "), t = null)} else if (n.type (t) ===" oggetto "|| r.transports [t] || t ===" auto ") {if (t == = "auto" && r ._. ieVersion <= 8) return ["longPolling"]} else i.log ("Trasporto non valido:" + t.toString() + "."), t = null; return t} function b (n) {return – Rob

Puoi controllare la console con i browser controlla lo strumento elemento e condividi l'errore che hai ricevuto. –

Non è un errore si blocca in un loop su una riga di codice in un file chiamato "BrowserLink" – Rob

Da quello che posso vedere sembra che i vostri controlli di modulo e la vostra azione di controllo non collega correttamente a causa i nomi dei tuoi controlli non corrispondono ai parametri della tua azione.

Cambiare anche il contentType nella chiamata ajax a JSON e convertire i dati del modulo in una stringa JSON. In questo modo, se invii i dati del modulo alla console prima di inviarli tramite Ajax, puoi vedere cosa viene inviato.

Provare le seguenti modifiche:

@{ 
 
    Layout = null; 
 
} 
 
<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width" /> 
 
    <title>Abintegro Search Prototype</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <script> 
 
     $("#submitsearch").click(function (e) { 
 
      e.preventDefault(); 
 

 
      var formData = JSON.stringify($("#searchform").serializeArray()); 
 

 
      console.log(formData); 
 

 
      $.ajax({ 
 
       url: "Search/GetSearchDetails", 
 
       data: formData, 
 
       type: 'POST', 
 
       contentType: 'json' 
 
       success: function (data) { 
 
        //Show popup 
 
        $("#popup").html(data); 
 
       } 
 
      }); 
 
     }); 
 
</script> 
 

 
    <!-- Javascript function to add autocomplete search phrases for the company name text search--> 
 
    <script> 
 
     $(function() { 
 
      var searchPhrases = [ 
 
       "Zep Solutions", 
 
       "Wetherby Consultants Ltd", 
 
       "Webmploy", 
 
       "WATS Recruitment Ltd", 
 
       "Vital Resources", 
 
       "VG Charles and Co", 
 
       "Veredus UK", 
 
       "Venn Group", 
 
       "VanDuo Consulting" 
 
      ]; 
 
      $("#phrases").autocomplete({ source: searchPhrases }); 
 
     }); 
 
</script> 
 
</head> 
 

 
<body> 
 
    <form id="searchform" name="searchform"> 
 

 
     <div class="company-textbox"> 
 
     <label for="companyName">Company Name</label> 
 
     <input id="phrases" name="companyName"> 
 
     </div> 
 

 
     <br /> 
 

 
     <div class="specialities"> 
 
      <label for="specialities">Specialities:</label> 
 
      <select name="specialities"> 
 
       <option value="Consumer Products & Services">Consumer Product & Services</option> 
 
       <option value="Support Services">Support Services</option> 
 
       <option value="Communication & Entertainment">Communication & Entertainment</option> 
 
       <option value="Business & Professional Services">Business & Professional Services</option> 
 
       <option value="Public Sector">Public Sector</option> 
 
       <option value="Not for profit">Not for profit</option> 
 
       <option value="Sports Information">Sports Information</option> 
 
      </select> 
 
     </div> 
 

 
     <br /> 
 

 
     <div class="category"> 
 
      <label for="category">Category:</label> 
 
      <select name="category"> 
 
       <option value="Generalist">Generalist</option> 
 
       <option value="Specialist">Specialist</option> 
 
       <option value="Exec Search">Exec Search</option> 
 
       <option value="Interim Management">Interim Management</option> 
 
      </select> 
 
     </div>  
 

 
     <br /> 
 

 
     <div class="location"> 
 
      <label for="location">Location:</label> 
 
      <select name="Location"> 
 
       <option value="London">London</option> 
 
       <option value="Bristol">Bristol</option> 
 
       <option value="Manchester">Manchester</option> 
 
       <option value="Birmingham">Birmingham</option> 
 
      </select> 
 
     </div> 
 

 
     <input type="submit" value="Submit" name="submitsearch" id="submitsearch"> 
 
    </form> 
 
</body> 
 
</html>

EDIT

Se si modifica la seguente riga:

var formData = JSON.stringify($("#searchform").serializeArray());

Con esimo è parte di codice:

var formData = ""; 
$.each($("#searchform"), function(i,v) { 
    if (formData.length > 0) formData += ","; 
     formData += v.name + ": '" + v.value + "'"; 
}); 
formData = "{ " + formData + " }";

La soluzione sarà generica e che non avrebbe dovuto cambiare il codice se si cambia il nome del campo modulo.

fonte

2016-02-29 10:00:07

[{"nome": "nomeazienda", "valore": "Wetherby Consultants Ltd"}, {"nome": "specialità", "valore": "Prodotti e servizi consumer"}, {"nome": "categorys "," valore ":" Generalista "}, {" nome ":" posizioni "," valore ":" Londra "}] – Rob

[HttpPost] stringa pubblica GetSearchDetails (stringa nomeprofilo, specialità stringa, stringa categorys, posizioni stringa) { return liveSearchRepository.GetUserInputResults (nome azienda, specialità, categorie, posizioni); } – Rob

In quanto sopra sono i dati inviati Ora colpisco il controller ma ogni parametro è nullo? – Rob

Per risolvere questo problema in modo che il post mappato i valori ai parametri ho fatto la seguente:

function postToAjax() { 
      debugger; 
      var companyname = $('#phrases').val().toString(); 
      var specialities = $('#specialities').val().toString(); 
      var categorys = $('#categorys').val().toString(); 
      var locations = $('#locations').val().toString(); 
      var postData = $(this).serializeArray(); 
      var form = $("#searchform"); 
      $.ajax({ 
       url: "Search/GetSearchDetails", 
       data: { 'companyname': companyname, 'specialities': specialities, 'categorys': categorys, 'locations':locations }, 
       type: 'POST', 
       success: function (data) { 
        //Show popup 
        $("#popup").html(data); 
       } 
      }); 
     } 
    </script>

Con la creazione di variabili per ogni valore ho potuto poi mappare le coppie di valori nei dati, il nome di il parametro nel controller è la prima parte della coppia, seguita dal valore preso dalle variabili create che memorizzano i valori dall'elemento modulo.

fonte

2016-02-29 14:29:56 Rob

iterando attraverso i controlli nel modulo è possibile renderlo generico per evitare di dover modificare il codice se i controlli del modulo cambiano o se è necessario aggiungere un altro controllo. Si prega di vedere la modifica sulla mia risposta per un esempio di questo. –

risposta

Problemi correlati