Tránh định dạng trùng lặp giữa chế độ xem Dao cạo phía máy chủ và mẫu jQuery phía máy khách

Question

Tôi có trang kết quả tìm kiếm nơi tôi xuất danh sách các mục được định dạng theo cách cụ thể bằng cách sử dụng chế độ xem Dao cạo MVC.

@for (int i = 0; i < group.Count(); i++) { 
    <div class="result"> 
    <div class="ordinal">@((i+1).ToString()).</div> 
    <div class="detail"><p>@group.ElementAt(i).Name</p></div> 
    </div> 
} 

Khách hàng có thể lọc thêm các kết quả bằng cách sử dụng jQuery AJAX để lấy lại tập dữ liệu mới dưới dạng mẫu JSON và jQuery để hiển thị kết quả thay cho bản gốc. Đây là mẫu jQuery:

<script id="resultTemplate" type="text/x-jquery-tmpl"> 
    {{each(i, result) results}} 
    <div class="result"> 
     <div class="ordinal">${i+1}.</div> 
     <div class="detail"><p>${name}</p></div> 
    </div> 
    {{/each}} 
</script> 

đó là ràng buộc sau khi AJAX gọi:

var result = $("#resultTemplate").tmpl({ results: data }); 
$("#resultsColumn").empty().append(result); 

Lưu ý làm thế nào tôi đã phải lặp lại trong các định dạng HTML cho kết quả tìm kiếm trong cả hai server-side đang Razor và khách hàng- mã jQuery bên. Tôi muốn chỉ có một phiên bản của mẫu dữ liệu bị ràng buộc để giảm cơ hội không phù hợp khi tôi phải thực hiện thay đổi.

Đọc Stephen Walter's Intro to jQuery Templates anh ấy gợi ý tích hợp "tốt hơn với nhau" khi sử dụng các mẫu jQuery với ASP.NET MVC vì vậy tôi đã tự hỏi liệu có một cơ sở giải quyết tình huống trên không.

Cảm ơn.

Answer 1

Tôi đoán bạn có thể sử dụng cú pháp @helper để tránh một số đánh dấu trùng lặp.

@helper Result(string ordinal, string name) { 
    <div class="result"> 
     <div class="ordinal">@ordinal.</div> 
     <div class="detail"><p>@name</p></div> 
    </div> 
} 

Sau đó sử dụng helper cho cả xem Razor

@for (int i = 0; i < group.Count(); i++) { 
    @Result((i+1).ToString(), group.ElementAt(i).Name) 
} 

và jQuery mẫu

<script id="resultTemplate" type="text/x-jquery-tmpl"> 
    {{each(i, result) results}} 
     @Result("${i+1}", "${name}") 
    {{/each}} 
</script> 

Đó là giả định mẫu jQuery của bạn cư trú trong giao diện Razor chính nó.

Mặt khác, bạn phải chuyển đổi mọi đối số thành chuỗi trước khi chuyển chúng tới trình trợ giúp. Và, vì một lý do nào đó, việc chuyển số "${i+1}" cho người trợ giúp cảm thấy không đúng.

Tôi không chắc chắn nhưng tôi sẽ sử dụng phương pháp tiếp cận đó trong sản xuất, nhưng tôi đoán nó phụ thuộc vào sự phức tạp của việc đánh dấu có liên quan.

Answer 2

Bạn có thể hiển thị kết quả tìm kiếm ban đầu với cùng mẫu jquery thay vì sử dụng cú pháp dao cạo, điều này tránh trùng lặp. Bạn có thể đặt điều này trong chế độ xem:

<script type="text/javascript"> 
    $('#resultTemplate') 
    .tmpl(@group.ToJson())) 
    .appendTo("#resultTemplate"); 
</script> 

Tôi đã tạo phương thức ToJson trên đối tượng nhóm. Nó có thể là một phương pháp bạn thực hiện trên viewmodel của bạn hoặc bất cứ điều gì var nhóm là đến từ để serialize bộ sưu tập để json.