Gửi biểu mẫu dữ liệu đến hành động của Bộ điều khiển với Ajax

Question

Tôi có một trang trong MVC3, với một liên kết (Ajax.ActionLink). Khi người dùng nhấp vào nó, nó gọi hành động của bộ điều khiển, và kết quả được chèn vào một div, với thay thế.

Mã được hiển thị dưới đây:

@Ajax.ImageActionLink("/Images/btn_share.png", "Share pool", "SharePool", new { poolKey = Model.Id, poolName = Model.Name }, 
    new AjaxOptions { 
     UpdateTargetId="popup", 
     HttpMethod="GET", 
     InsertionMode = InsertionMode.Replace, 
     LoadingElementId="loading_dialog", 
     OnSuccess = "ShowPopup('#popup_share', true, true)" 
    } 

ImageLinkAction là phương pháp mở rộng thông thường để sử dụng hình ảnh như liên kết, và ShowPopup là một hàm javascript cho thấy div cập nhật (để làm cho nó trông như một popup)

Bây giờ mã đánh dấu chèn vào div mà tạo ra popup chứa một hình thức như sau

<div> 
@using (Html.BeginForm()) { 

    @Html.HiddenFor(model => model.ID) 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.EmailAddress) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.EmailAddress) 
     @Html.ValidationMessageFor(model => model.EmailAddress) 
    </div> 

    // ... other fields 

    @Html.ValidationSummary(true) 
    <p> 
     <button type ="submit">Share</button>  
    </p> 
} 
</div> 

vấn đề là với của hình thức nộp: Gửi mông trên các cuộc gọi hành động thích hợp nhưng với một postback, mà làm cho trang của tôi để làm mới. Những gì tôi cần là để gửi dữ liệu với ajax, nhận được phản hồi, mà là một lần xem một phần mà được đưa vào

Tôi đã cố gắng để thay thế nút Submit với Ajax.ActionLink như sau

@Ajax.ActionLink("Share", "Share", 
     new Models.MyModel 
      { 
       ID = Model.ID, 
       EmailAddress = Model.EmailAddress 
      }, 
     new AjaxOptions 
      { 
       UpdateTargetId="popup", 
       HttpMethod="POST", 
       InsertionMode = InsertionMode.Replace, 
       LoadingElementId="loading_dialog", 
       OnSuccess = "ShowPopup('#popup_share', true, true)" 
      } 

Các mã điều khiển của trông như thế này:

[HttpPost] 
public ActionResult SharePool(MyModel model) 
{ 
    // ... 
    return PartialView("_MyPartialView", model) 
} 

vấn đề là, trong thời điểm này các Ajax ActionLink được trả lại (khi mẫu được nạp) không có giá trị trong Model.EmailAddress, vì vậy hành động POST của tôi trong bộ điều khiển chỉ nhận tham số ID .

Tôi làm cách nào để xử lý việc này? Lý tưởng nhất, tôi nghĩ rằng tôi nên thêm

OnBegin = "PreparePostData()" 

Nhưng vì tôi biết javascript chỉ về cơ bản, tôi không biết làm cách nào để triển khai điều này. Tôi nghĩ rằng PreparePostData() này sẽ thu thập các trường biểu mẫu và chuẩn bị tham số routeValues ​​đối tượng, được thiết lập trước khi cuộc gọi ajax được gọi.

Bất cứ ai cũng có thể cho tôi một số chỉ dẫn về cách thực hiện điều này?

Hoặc có cách tiếp cận nào khác tốt hơn về vấn đề này không?

Cảm ơn bạn

Answer 1

Tôi khuyên bạn chỉ nên viết các cuộc gọi AJAX của riêng bạn với jQuery. Đó là linh hoạt hơn những người giúp đỡ MVC của nào

@Html.ActionLink("Share", "Share", new { }, new { id = "share" }) 

Và sau đó một hàm

$("#share").click(function (e) { 
    e.preventDefault(); 
    //Show loading display here 
    var form= $("#shareForm"); 
    $.ajax({ 
     url : '@Url.Action("Share")', 
     data: form.serialize(), 
     type: 'POST', 
     success: function(data){ 
      //Show popup 
      $("#popup").html(data); 
     } 
    }); 
); 

Answer 2

Khi bạn có nhiều hình thức trên cùng một trang (tưởng tượng trường hợp y're hiển thị/ẩn theo yêu cầu), bạn cần để thêm Biểu mẫu trướC#Id dưới dạng Follows:

$("#share").click(function (e) { 
    e.preventDefault(); 
    //Show loading display here 

// Need to add Form before #id 
    var form= $("Form#share"); 

    $.ajax({ 
     url : '@Url.Action("Share")', 
     data: form.serialize(), 
     type: 'POST', 
     success: function(data){ 
      //Show popup 
      $("#popup").html(data); 
     } 
    }); 
);