Đăng thông qua Ajax tới bộ điều khiển MVC

Xin chào, tôi hiện đang cố gắng lấy biểu mẫu để đăng bộ điều khiển bằng AJAX tuy nhiên tôi đã không có may mắn cho đến nay, tôi đã cố gắng lấy biểu mẫu để gửi các giá trị trong biểu mẫu với bộ điều khiển về việc gửi biểu mẫu nhưng nó sẽ không hoạt động không ai biết tại sao? :Đăng thông qua Ajax tới bộ điều khiển 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>

Bộ điều khiển:

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

Nguồn

2016-02-29 Rob

năng suất 'form.serialize()' là gì? Sẽ tốt hơn nếu bạn tạo một lớp poco cho hoạt động 'POST' của bạn và cảm nhận dữ liệu tương ứng từ tập lệnh của bạn. –

Hãy thử chèn dataType: "html", làm đối số trong cuộc gọi .ajax – andreasnico

Chính xác của bạn không hoạt động? Bạn có thể gỡ lỗi Javascript để xác minh rằng nó sẽ được gửi dữ liệu gửi đến bộ điều khiển của bạn? –

Sử dụng Javascript mã này thay vì hiện tại. Tôi đã sửa chữa các vấn đề trong bài dữ liệu và formate đúng là dưới đây:

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

Nguồn

2016-02-29 09:53:40

Khi tôi gỡ lỗi mã này, nó sẽ được: $ ("# submitsearch") .click (function (e) {và sau đó bước vào một tập tin gọi là BrowserLink, nơi nó dường như gặp khó khăn trong một vòng lặp, một mẫu mã: (i.log ("Vận tải không hợp lệ:" + f + ", loại bỏ nó khỏi danh sách vận chuyển."), t.splice (u, 1)); t.length === 0 && (i.log ("Không có phương tiện đi lại nào trong phạm vi được chỉ định mảng vận chuyển. "), t = null)} else if (n.type (t) ===" đối tượng "|| r.transports [t] || t ===" auto ") {if (t == = "auto" && r ._. ieVersion <= 8) trả về ["longPolling"]} khác i.log ("Vận tải không hợp lệ:" + t.toString() + "."), t = null; hàm trả về t} b (n) {return – Rob

Bạn có thể vui lòng kiểm tra giao diện điều khiển với các trình duyệt kiểm tra công cụ phần tử và chia sẻ cho tôi lỗi bạn nhận được không. –

Nó không phải là một lỗi nó chỉ bị mắc kẹt trong một vòng lặp trên một dòng mã trong một tập tin gọi là 'BrowserLink' – Rob

Từ những gì tôi có thể nhìn thấy nó trông giống như hình thức kiểm soát của bạn và hành động điều khiển của bạn không liên kết lên đúng vì tên của các điều khiển của bạn không giống như các tham số của hành động.

Cũng thay đổi contentType trong cuộc gọi ajax thành JSON và chuyển đổi dữ liệu biểu mẫu thành chuỗi JSON. Bằng cách đó, nếu bạn xuất dữ liệu biểu mẫu cho bàn điều khiển trước khi gửi nó qua Ajax, bạn có thể xem những gì được gửi qua.

Hãy thử những sửa đổi như sau:

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

Nếu bạn thay đổi dòng sau:

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

Với thứ là đoạn mã:

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

Giải pháp sẽ là chung chung và bạn sẽ không phải thay đổi mã nếu bạn thay đổi tên của trường biểu mẫu.

Nguồn

2016-02-29 10:00:07

[{"name": "companyname", "value": "Wetherby Consultants Ltd"}, {"name": "special", "value": "Consumer Products & Services"}, {"name": "thể loại "," value ":" Generalist "}, {" name ":" locations "," value ":" London "}] – Rob

[HttpPost] chuỗi công khai GetSearchDetails (chuỗi tên công ty, đặc sản chuỗi, danh mục chuỗi, vị trí chuỗi) { trả lại trực tiếpSearchRepository.GetUserInputResults (tên công ty, đặc sản, danh mục, vị trí); } – Rob

Ở trên đây là dữ liệu được đăng, bây giờ tôi nhấn bộ điều khiển nhưng mỗi tham số là null? – Rob

Để khắc phục vấn đề này để các bài ánh xạ các giá trị để các thông số tôi đã làm như sau:

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>

Bằng cách tạo ra các biến cho mỗi giá trị tôi sau đó có thể lập bản đồ các cặp giá trị trong dữ liệu, tên của tham số trong bộ điều khiển là phần đầu tiên của cặp, tiếp theo là giá trị được lấy từ các biến đã tạo lưu trữ các giá trị từ phần tử biểu mẫu.

Nguồn

2016-02-29 14:29:56 Rob

Bằng cách lặp qua các điều khiển trong biểu mẫu, bạn có thể làm cho nó chung để tránh phải thay đổi mã nếu biểu mẫu kiểm soát thay đổi hoặc nếu bạn nên thêm điều khiển khác. Xin vui lòng xem các chỉnh sửa trên câu trả lời của tôi cho một ví dụ về điều này. –

Đăng thông qua Ajax tới bộ điều khiển MVC

Trả lời

Các vấn đề liên quan