ASP.NET MVC - Điền một biểu mẫu động qua cơ sở dữ liệu

Question

Tôi đang chuyển một ứng dụng tìm kiếm từ ASP cổ điển sang ASP.NET MVC2. Một trong các trang hte là một dạng tìm kiếm được điền động được chia thành 4 loại, mỗi loại có 2 hàng.

Khách hàng có thể bỏ chọn tùy chọn cho từng danh mục này. Khi điều này xảy ra, mỗi danh mục được tự động điền lại từ trên xuống dưới, từ trái sang phải. Người lập trình phiên bản ASP cổ điển thiết lập một chương trình con tìm kiếm thông qua cơ sở dữ liệu (có trường boolean cho mỗi trường tìm kiếm) và sau đó trả về một mảng. Sau đó, anh lấy mảng và gọi một chương trình con khác lặp qua mảng và sau đó tạo ra từng loại.

Ngay bây giờ, điều duy nhất tôi có thể nghĩ đến là tạo mô hình có phương pháp cho từng danh mục, mỗi danh mục trả về Danh sách. Một ví dụ đơn giản sẽ là:

class SearchPageOrganizer { 

    // Declare SearchFields object 
    private SearchFields fields; 

    // Contructor; instantiates SearchFields object 
    public SearchPageOrganizer(SearchFields searchFields) { 
     this.fields = searchFields; 
    } 

    // Gets a list of fields active in the characteristics category 
    public List<String> GetCharactersticsList() { 
     List<String> list = new List<String>(); 

     // Check if the Color field is active 
     if (fields.Color) { 
      list.Add("Color"); 
     } 

     // Check if the Size field is active 
     if (fields.Size) { 
      list.Add("Size"); 
     } 

     // Return the list 
     return list; 
    } 
} 

Sau đó, những gì tôi có thể làm được chia danh sách theo kích thước của mỗi hàng, và sau đó lặp qua mỗi danh sách và gọi một điều khiển người dùng mà có thể làm cho HTML động dựa trên tham số tên.

Vấn đề với kỹ thuật này là vì một lý do kỳ lạ nào đó, có vẻ như tôi không làm điều này một cách đơn giản nhất. Đối với bất cứ ai đọc này, là có một cách dễ dàng hơn, trong đó bạn sẽ thực hiện điều này?

Cảm ơn!

Answer 1

Cách thêm danh sách bằng JavaScript (jQuery) ở phía máy khách khi được yêu cầu? Dữ liệu có thể được điền bằng cách sử dụng một cuộc gọi Ajax. Một khi tất cả các trường có con ong nfilled và người dùng gửi, phương thức hành động có thể lấy tất cả các tham số đến và thực hiện tìm kiếm dựa trên đó.

Answer 2

Đây là điều tôi muốn điều tra đôi khi. Có dabbled trong Rails, tôi đã tha hồ với quan điểm ràng buộc với mô hình.

Dường như có một người trợ giúp trong không gian MVC được gọi là Html.EditorForModel(). Trình trợ giúp này tạo ra một biểu mẫu cho mô hình mà khung nhìn bị ràng buộc. Tôi không chắc chắn nó sẽ làm gì trong tình huống của bạn, nhưng chắc chắn sẽ rất thú vị khi xem kết quả đầu ra và có lẽ nó có thể cung cấp cho bạn một số ý tưởng để thực hiện cá nhân.

Chúc may mắn!

Answer 3

Đây là những gì tôi muốn giới thiệu. Tạo một div chứa nội dung động và đặt nội dung đó trong một phần xem. Trong trường hợp này, sẽ có một chế độ xem một phần được gọi là Sản phẩm.ascx

<div id="ProductsContent"> 
    <% Html.RenderPartial("Products"); %> 
</div> 

Gọi hàm javascript khi hộp kiểm danh mục được nhấp.

<input id="Category_1" type="checkbox" onclick="CategoryCheckChanged(1)" /> 
<input id="Category_2" type="checkbox" onclick="CategoryCheckChanged(2)" /> 
<input id="Category_3" type="checkbox" onclick="CategoryCheckChanged(3)" /> 

sử dụng JQuery để phát hiện giá trị của hộp kiểm, sau đó đăng lên máy chủ. Trong ví dụ bên dưới tên bộ điều khiển của tôi được gọi là Sản phẩm. Thông tin được trả về từ máy chủ là chế độ xem từng phần được cập nhật, thay thế nội dung div.

function CheckChanged(id) 
{ 
    var bChecked = $("#Category_"+id).attr("checked"); 

    var value = 0; 
    if(bChecked) value=1; 

    $.post('<%= Url.Action("CategoryChanged","Products") %>' 
     , { value: value, categoryid: id } 
     , function(data) { 
      if (data.success) { 
       alert("Sweet !") 
       //update the div with the new content 
       $('#ProductsContent').html(data.newcontent); 
      } 
      else { 
       alert("Bummer:" + data.msg); 
      } 

     }, "json"); 

} 

Dưới đây là chức năng CategoryChanged trong ProductsController

[HttpPost] 
    public ActionResult CategoryChanged(int value, int id) 
    { 
    try 
    { 
     //Save the change to the database 
     SaveChangedCategoryValueToDatabase(id,value); 

     //Create your View Model 
     MyProductsViewModel vm = new MyProductsViewModel(); 

     return Json(new { success = true, newcontent = 
      MyViewHelper.RenderPartialToString(this.ControllerContext, 
      "~/Views/Products/Products.ascx", 
      new ViewDataDictionary(vm), new TempDataDictionary()) }); 

    } 
    catch(SystemException ex) 
    { 
     return Json(new { success = false, msg = ex.Message }); 
    } 

    } 

và cuối cùng ... Các hàm mà có làm cho một cái nhìn cục bộ vào một chuỗi.

public static class MyViewHelper 
{ 
    public static string RenderPartialToString(ControllerContext context 
    , string partialViewName 
    , ViewDataDictionary viewData 
    , TempDataDictionary tempData) 
    { 
    ViewEngineResult result = 
     ViewEngines.Engines.FindPartialView(context, partialViewName); 

    if (result.View != null) 
    { 
     StringBuilder sb = new StringBuilder(); 
     using (StringWriter sw = new StringWriter(sb)) 
     { 
      using (HtmlTextWriter output = new HtmlTextWriter(sw)) 
      { 
       ViewContext viewContext = new ViewContext(
       context, result.View, viewData, tempData, output); 
       result.View.Render(viewContext, output); 
      } 
     } 

     return sb.ToString(); 
    } 

    return String.Empty; 
    } 
} 

Answer 4

Tôi khuyên bạn nên sử dụng các biểu mẫu Ajax dựng sẵn với MVC 2. Bạn có thể có các điều khiển một phần được xây dựng dựa trên mô hình được truyền cho chúng. Cách tiếp cận của bạn sẽ là một cái gì đó như thế này, đại khái:

Đầu tiên, bộ điều khiển

public PartialViewResult MySearchControl() 
{ 
    //initialize the model 

    return new PartialView(model) 
} 

[HttpPost] 
public PartialViewResult MySearchControl(MyModel model) 
{ 
    //do work, repopulate the model 

    return new PartialView(model) 
} 

Sau đó, trong View, bạn sẽ có một cái gì đó như thế này.

<% using (Ajax.BeginForm("MySearchControl", "MySearch", 
    new { }, 
    new AjaxOptions() { 
     HttpMethod = "Post", 
     InsertionMode = InsertionMode.Replace, 
     UpdateTargetId = "searchFormWrapper", 
     OnSuccess = "doMoreWork" 
     }, new { })) 
{ %> 

<div id="searchFormWrapper"> 
    <% Html.RenderAction<MySearchController>(x => x.MySearchControl()); %> 
</div> 

<input type="submit" id="mySubmitButton" value="submit" /> 

<% } %> 

<script type="text/javascript"> 
    function doMoreWork() 
    { 
     // do anything needed after content is updated here 
    } 
</script> 

Bây giờ, nếu bạn cần một hộp kiểm để bắn gửi, bạn có thể sử dụng một chút jquery diệu

<script type="text/javascript"> 
    $(function() { 
     $('.checkBoxClassSelector').live('change', new function(){ 
      $('#mySubmitButton').click(); 
     }); 
    }); 
</script> 

phương pháp sống trong jquery sẽ đảm bảo hành động đó được gắn vào tất cả hiện tại và tương lai trường hợp của lớp nếu bạn đưa nó cho tất cả các hộp kiểm trong chế độ xem một phần của bạn. Chúng sẽ làm cho biểu mẫu ajax đăng lại, sau đó sẽ trả lại một phần xem của bạn - được viết lại dựa trên mô hình cập nhật và thay thế nội dung của div.

Lợi ích của phía khách hàng thuần túy này là bạn có thể cho phép MVC làm điều đó với mô hình của bạn và không phải lo lắng về việc định dạng hoặc thay đổi một loạt javascript để thay đổi mọi thứ trông như thế nào hoặc hoạt động. Bạn chỉ cần thay đổi quan điểm của bạn và tất cả mọi thứ hoạt động automagically.