Przesyłanie przez Ajax do kontrolera MVC

Witam Obecnie próbuję uzyskać formularz do wysłania kontrolera za pomocą AJAX, jednak nie miałem szczęścia do tej pory, próbowałem uzyskać formularz do przesłania wartości w formularzu do kontrolera po przedłożeniu formularza, ale nie zadziała, czy ktoś nie wie dlaczego? :Przesyłanie przez Ajax do kontrolera 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>

Kontroler:

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

Źródło

2016-02-29 Rob

co oznacza wydajność "form.serialize()"? Lepiej jest, jeśli utworzysz klasę poco dla operacji 'POST' i odpowiednio wyczujesz dane ze swojego skryptu. –

Spróbuj wstawić dataType: "html", jako argument w twoim wywołaniu .ajax – andreasnico

Co dokładnie nie działa? Czy możesz debugować skrypt JavaScript, aby zweryfikować, czy powinien on wysyłać dane o wpisie do kontrolera? –

Użyj tego kodu JavaScript zamiast obecnego. Mam skorygować problemy w danych pocztowych i prawidłowe mrówczan jest poniżej:

<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>

Źródło

2016-02-29 09:53:40

Kiedy debuguję ten kod, dostaje się do: $ ("# submitsearch")) .click (function (e) {a następnie przechodzi do pliku o nazwie BrowserLink, gdzie wydaje się utknąć w pętli, próbka kodu: (i.log ("Nieprawidłowy transport:" + f + ", usuwając go z listy transportów."), t.splice (u, 1)), t.length === 0 && (i.log ("Żadne transporty nie mieszczą się w podanej transport array. "), t = null)} else if (n.type (t) ===" object "|| r.transports [t] || t ===" auto ") {if (t == = "auto" && r ._. ieVersion <= 8) return ["longPolling"]} else i.log ("Nieprawidłowy transport:" + t.toString() + "."), t = null; return t} function b (n) {return – Rob

Czy możesz sprawdzić konsolę za pomocą przeglądarki, sprawdź narzędzie elementu i udostępnij mi błąd, który otrzymałeś. –

To nie jest błąd, po prostu utknie w pętli na linii kodu w pliku o nazwie "BrowserLink" – Rob

Z tego co widzę, to wygląda formantów formularzy a akcja kontroler nie łączy się poprawnie, ponieważ nazwy kontrolek nie są takie same jak parametry akcji.

Zmień również contentType w twoim wywołaniu ajax na JSON i przekonwertuj dane formularza na ciąg JSON. W ten sposób, jeśli wypiszesz dane formularza do konsoli przed przesłaniem jej przez Ajax, możesz zobaczyć, co jest wysyłane.

Spróbuj następujące modyfikacje:

@{ 
 
    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

Jeżeli zmienisz następujący wiersz:

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

z th jest fragmentem kodu:

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

Rozwiązanie będzie ogólne i nie trzeba będzie zmieniać kodu, jeśli zmienisz nazwy pola formularza.

Źródło

2016-02-29 10:00:07

[{"name": "companyname", "value": "Wetherby Consultants Ltd"}, {"name": "specialties", "value": "Produkty i usługi dla konsumentów"}, {"name": "categorys "," value ":" Generalist "}, {" name ":" location "," value ":" London "}] – Rob

[HttpPost] public string GetSearchDetails (nazwa firmy, stringi, stringi) { return liveSearchRepository.GetUserInputResults (nazwa firmy, specjalności, kategorie, lokalizacje); } – Rob

W powyższym miejscu zostały opublikowane dane Teraz uderzę w kontroler, ale każdy parametr ma wartość zerową? – Rob

Aby rozwiązać ten problem tak, że po odwzorowane wartości parametrów Zrobiłem następujące:

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>

Tworząc zmienne dla każdej wartości mogłem wtedy map pary wartości w danych, imię parametr w kontrolerze to pierwsza część pary, a następnie wartość zaczerpnięta z utworzonych zmiennych przechowujących wartości z elementu formularza.

Źródło

2016-02-29 14:29:56 Rob

Przez powtarzanie formantów w formularzu można ustawić go jako ogólny, aby zapobiec konieczności zmiany kodu, jeśli elementy sterujące formularza ulegną zmianie lub należy dodać inny formant. Zobacz edycję mojej odpowiedzi na ten przykład. –

Przesyłanie przez Ajax do kontrolera MVC

Odpowiedz

Powiązane problemy