2009-03-07 36 views
6

Tôi mới vào ajax/jquery và đã tìm kiếm một mẫu đơn giản kết hợp sau đây khó khăn:phương thức Mẫu trong asp.net MVC RC sử dụng jquery

  • ASP.Net MVC RC1 (hoặc 2)
  • jquery
  • dạng modal

tôi muốn người sử dụng để có thể bấm vào một liên kết/nút trong một View (mẹ) và có một hình thức phương thức xuất hiện có chứa một biểu mẫu. nội dung của hộp thoại phương thức phải là chế độ xem MVC (Trẻ em).

Khi biểu mẫu được gửi, tôi muốn hộp thoại phương thức biến mất và một phần của chế độ xem gốc sẽ được cập nhật.

Trả lời

12

Vì vậy, bạn không cần phải suy nghĩ về tất cả cùng một lúc. Đầu tiên, hãy tạo biểu mẫu của bạn ở phía trước và giữa html trên trang, đính kèm một hành động và làm cho nó hoạt động mà không có sự phù hợp về phương thức.
Khi logic biểu mẫu của bạn hoạt động, bạn có thể lặp trong jQuery. Cho dù bạn muốn bắt đầu với phương thức & cửa sổ bật lên hoặc với Bài đăng không đồng bộ với jQuery tùy thuộc vào bạn. Tôi thường thích làm cho nó hoạt động trước khi tôi làm cho nó đẹp, vì vậy chúng tôi sẽ đi theo con đường đó. Nếu bạn sử dụng cú pháp tiêu chuẩn <% Html.BeginForm ... {%> để xác định biểu mẫu của mình, hãy xóa nó. Đi học html cũ! (Tôi biết bạn có thể tuỳ chỉnh các Html.BeginForm nhưng nó dễ dàng hơn để chỉ cần sử dụng html)

<form action="<%= Url.ActionLink(...)%>" id="SomeForm"> 

Bây giờ bạn có thể dây lên jQuery trong document.ready của bạn, hoặc bất cứ nơi nào bạn khởi JS của bạn.

Trong biểu mẫu hành động của bạn, bạn có thể sẽ gọi đến bài đăng của jQuery, nơi gọi lại bài đăng và cập nhật phần còn lại của trang. Api Documentation

function youractionfunction(e){ 
    $.post($(e).attr('action'), // we get the action attribute (url) from the form 
     { title : $('#titleBox').val()}, // the values we're passing 
     yourCallbackFunction); 
    return false; // This is important, this will stop the event from bubbling and your form from submitting twice. 
} 

Bây giờ bạn có dạng ajaxy, do đó bạn có thể thực hiện gọi lại.

function yourCallbackFunction(data) 
{ 
    // do something with the result. 
} 

Bây giờ chúng ta có thể nói về phương thức. Nó thường là một chút đau, nhưng bạn có thể sử dụng một plugin jQuery như hoặc một cái gì đó tương tự để làm điều đó cho bạn. Sau đó, nó chỉ là vấn đề kết nối các sự kiện để hiển thị và ẩn cửa sổ bật lên và bạn đã sẵn sàng.

Nếu ý định của bạn là để biểu mẫu đó được tải không đồng bộ khi liên kết "hiển thị" được nhấp vào, điều đó hơi rắc rối hơn một chút, nhưng vẫn có thể thực hiện được. Bạn có thể sử dụng jQuery.Load (Api Documentation) để kéo html và đưa nó vào trong dom, nhưng bạn vẫn sẽ phải kết nối các sự kiện (một lần nữa, với sự ràng buộc ('submit' ...) được mô tả ở trên).

+0

@Rob: Cảm ơn phản hồi chi tiết của bạn. Điều đó khiến tôi bắt đầu. –

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