Mẫu đăng bài không có @ HTML.Biểu mẫu và sử dụng Jquery (ajax) trong asp.net MVC

Question

Làm cách nào để điền vào biểu mẫu mà không sử dụng @ HTML.Biểu mẫu và bằng cách sử dụng JQuery Ajax thay thế? Ngay bây giờ tôi đã thử:

var postData = { form1: username, form2: password }; 

    $.ajax({ 
     type: "POST", 
     url: '/Controller/Method', 
     data: postData, 
     dataType: "json", 
     traditional: true 
    }); 

Nhưng sau khi đăng, trình duyệt không điều hướng đến chế độ xem chính xác. Tất nhiên tôi đã trả về View() một cách chính xác trong bộ điều khiển. Sử dụng Fiddler Tôi thấy rằng nó được đăng chính xác và phản hồi cũng đúng ...

Tôi có có để sử dụng @ HTML.Biểu mẫu hoặc tôi có thể làm điều đó với Ajax không?

Answer 1

Bạn có thể sử dụng thẻ HTML nguyên bản <form> hoặc trợ giúp @HTML.BeginForm. Dưới đây là một ví dụ sử dụng chỉ HTML

Hoàn thành giải pháp:

<form action"/Controller/Method" method="POST" id="signInForm"> 
    <input type="text" name="form1" /> 
    <input type="text" name="form2" /> 
    <input type="submit" value="Sign in" /> 
</form> 

$(function() { 
    $('signInForm').submit(function(evt) { 
     //prevent the browsers default function 
     evt.preventDefault(); 
     //grab the form and wrap it with jQuery 
     var $form = $(this); 
     //if client side validation fails, don't do anything 
     if(!$form.valid()) return; 
     //send your ajax request 
     $.ajax({ 
      type: $form.prop('method'), 
      url: $form.prop('action'), 
      data: $form.serialize(), 
      dataType: "json", 
      traditional: true, 
      success: function(response) { 
       document.body.innerHTML = response; 
      } 
     }); 
    }); 
}); 

tôi khuyên bạn nên sử dụng @Url.Action để thiết lập địa chỉ URL của hình thức hành động của bạn. Cách định tuyến này có thể tạo URL của bạn.

<form action"@Url.Action("Method", "Controller")" method="POST" id="signInForm"> 
    <input type="text" name="form1" /> 
    <input type="text" name="form2" /> 
    <input type="submit" value="Sign in" /> 
</form> 

Nó là hơi cao cấp hơn, nhưng tôi sẽ cố gắng sử dụng một cái gì đó giống như Take Command để quản lý cuộc gọi jQuery Ajax của bạn.

Tuyên bố từ chối trách nhiệm, tôi là người đóng góp cho dự án TakeCommand.

Answer 2

Khi bạn đang sử dụng @Html.BeginForm, đầu ra HTML là:

<form method="POST" action="/Controller/Method"> 

Và khi bạn gửi mẫu đó, trình duyệt xử lý nó giống như một chuyển hướng trang (chỉ sử dụng phương pháp POST) do đó đáp ứng được tải vào khung chính.

Nhưng, khi bạn đang bắt đầu yêu cầu Ajax, bạn có thể xử lý phản hồi từ máy chủ (thường sử dụng chức năng gọi lại).

Nếu bạn muốn mô phỏng các hành vi nộp hồ sơ hình thức bình thường, nó sẽ là một cái gì đó như:

$.ajax({ 
    type: "POST", 
    url: '/Controller/Method', 
    data: postData, 
    dataType: "json", 
    traditional: true, 
    success: function(response) 
    { 
     document.body.innerHTML = response; 
    } 
}); 

này sẽ không thay thế toàn bộ nội dung trang với phản ứng (chỉ nội dung BODY) nhưng trong nhiều trường hợp nó sẽ ổn.

Answer 3

Điều này sẽ thực hiện một bài đăng xhr lên máy chủ và trả lại dạng xem dưới dạng dữ liệu (phản hồi) Nó sẽ không điều hướng, nếu nó trả về html, bạn cần đặt đúng kiểu dữ liệu trong yêu cầu của bạn. từ máy chủ:

Với hành động trả về html, bạn có thể đặt html được trả về trên trang của bạn trong hàm thành công của bạn.

postData = "{'ID':'test'}"; 
$.ajax({ 
    type: "POST", 
    url: '/Home/Test', 
    data: postData, 
    dataType: 'html', 
    contentType: 'application/json', 
    traditional: true, 
    success: function (data) { 
     $("#yourdomelement").html(data); 
    } 
}); 

Trong hành động của bạn;

public ActionResult Test([FromBody]PostData id) 
{ 
    return Content("<p>hello</p>"); 
}