All geek questions in one place

Posting through Ajax to MVC

Hi, I'm currently trying to get a form for publishing a controller using AJAX, but I haven’t gotten lucky yet, I tried to get a form for sending values ​​in the form to the controller on the submit form, but this will not work, does anyone know why ?:

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); }
+5
source share
3 answers

From what I see, it looks like your form controls, and your Controller action is not bound properly because the names of your controls do not match your action parameters.

Also change the contentType in your ajax call to JSON and convert the form data to a JSON string. Thus, if you output the form data to the console before submitting via Ajax, you can see what is submitted.

Try the following changes:

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

If you change the following line:

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

With this piece of code:

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

The solution will be general and you won’t have to change the code if you change the form field names.

+2
source

Use this Javascript code instead of the current one. I fixed the problems in the messages and the correct format is below:

 <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>
+1
source

To fix this problem so that post matches values ​​with parameters, I did the following:

 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>

By creating variables for each value, I could then match the pairs of values ​​in the data, the parameter name in the controller is the first part of the pair, followed by the value obtained from the created variables that store the values ​​from the form element.

0
source

Source: https://habr.com/ru/post/1244097/

More articles:


All Articles