ASP.NET MVC Navigation và User Interface thiết kế

Question

Short Version:

---

Bạn có biết cách nào để có được một nút đầu vào (nộp) và một thẻ neo để render cùng sử dụng trực quan và CSS không có Javascript?

dài Version:

---

Tôi đang phát triển một ứng dụng ASP.NET MVC. Trang này chứa các trang để xem chi tiết hoặc tạo hoặc cập nhật các mô hình của tôi. Những hành động trang được chứa ở dưới cùng của hình thức và thường bao gồm Cập nhật và Hủy hoặc Sửa, Xóa và Danh sách (nếu trên chi tiết xem trang). Các Cập nhật, Sửa và Xóa hành động gửi dữ liệu từ một hình thức đến máy chủ, trong khi Hủy và Danh sách hành động được/có thể được xử lý bởi các yêu cầu GET thích hợp. Điều quan trọng cần lưu ý là một trong những mục tiêu thiết kế của tôi là làm cho trang web hoạt động như một cách giống hệt nhất có thể nếu Javascript bị tắt theo cách nó hoạt động khi Javascript được bật. Tôi cũng muốn các phần tử giao diện người dùng hiển thị cùng một cách trực quan cho dù phần tử đó gây ra một postback hoặc kích hoạt một yêu cầu GET.

Để nhận được biểu mẫu gửi để làm việc khi không có Javascript, tôi nghĩ tôi phải sử dụng nút gửi. Tôi ghi đè, với CSS, kiểu dáng trực quan của các nút để hiển thị giống như "các nút" ở đầu trang SO - phẳng, màu đồng nhất với văn bản thuần túy. Tôi muốn các hành động tạo yêu cầu GET được xử lý bằng thẻ neo, nhưng tôi đã gặp sự cố khi nhận các thẻ này và các nút được tạo kiểu để hiển thị giống hệt nhau. Dường như có vấn đề về căn chỉnh và định cỡ phông chữ. Tôi đã có thể nhận được chúng gần gũi nhưng không giống nhau.

EDIT: khác biệt Styling sử dụng các nút và neo bao gồm việc không thể để có được phông chữ để làm ở vị trí tương tự liên quan đến các cơ sở trong khung giới hạn và nhận được bounding hộp riêng của mình để làm cho ở cùng kích thước và liên kết tương đối với vùng chứa. Mọi thứ chỉ là một vài điểm ảnh theo cách này hay cách khác bất kể tinh chỉnh của tôi. Nếu bạn đã có thể làm cho nó hoạt động, xin vui lòng cho tôi biết. Biết rằng nó có thể sẽ làm cho nó dễ dàng hơn để tiếp tục cố gắng cho đến khi tôi có thể làm cho nó hoạt động.

Một điều tôi đã thử là gói các hành động GET xung quanh một nút, được tạo kiểu giống như các nút biểu mẫu. Điều này làm việc tuyệt vời trong Firefox, nhưng không phải trong IE7. Nhấp vào nút như vậy trong IE7 đã không đẩy lùi nhấp chuột vào neo. Những gì tôi đã đưa ra bây giờ là tạo một biểu mẫu mới cho GET, sử dụng phương thức = "GET", liên kết với hành động được yêu cầu. Tôi quấn quanh nút gửi có trình xử lý onclick đặt location.href thành URL của hành động mong muốn. Điều này làm cho hình ảnh giống nhau và dường như hoạt động, ngay cả khi biểu mẫu được lồng trong một biểu mẫu khác. Một niggle nhỏ là nếu Javascript bị tắt, thì url GET của tôi chứa một số ? ở cuối thay vì là url sạch đẹp mà bạn mong muốn.

Điều tôi muốn biết là liệu có ai khác đã giải quyết vấn đề này theo một cách khác có thể hoạt động tốt hơn (và có thể yêu cầu ít HTML hơn) không? Bạn có bất kỳ ý tưởng nào khác mà tôi có thể thử không?Bất kỳ cách nào để sửa lỗi ? trên url GET khi yêu cầu được gửi dưới dạng bài đăng khi Javascript bị tắt?

Mã mẫu bên dưới từ chế độ xem chi tiết. Tôi nhận ra rằng tôi có thể (và có lẽ nên) thêm các trình xử lý onclick thông qua javascript là tốt, nhưng mã actuall đọc tốt hơn khi tôi làm điều đó nội tuyến. Tôi đang sử dụng phần mở rộng HtmlHelper để tạo ra tất cả các nhãn hiệu dưới đây. Tôi đã định dạng lại nó để cải thiện khả năng đọc.

<form action="../Edit/2" class="inline-form" method="get"> 
     <input class="button" 
       onclick="location.href='../Edit/2';return false;" 
       value="Edit" 
       type="submit" /> 
    </form> 
    <form action="../Delete/2" class="inline-form" method="post"> 
     <input class="button" 
       value="Delete" 
       type="submit" /> 
    </form> 
    <form action="../List" class="inline-form" method="get"> 
     <input class="button" 
       onclick="location.href='../List';return false;" 
       value="List Donors" 
       type="submit" /> 
    </form> 

Answer 1

Bạn nên xem this article về cách tạo kiểu thẻ nút. Nó bao gồm CSS cho cả kết xuất cả hai và các thẻ tương tự và có tác dụng phụ của việc cho phép các biểu tượng trong nút là tốt.