ASP.NET MVC - 通過數據庫動態填充表單

Question

我將一個搜索應用程序從傳統ASP移植到ASP.NET MVC2。 hte頁面之一是一個動態填充的搜索表單，它被分成4個類別，每個類別都有2行。

客戶端可以取消選中每個類別的選項。發生這種情況時，每個類別都從上到下動態地重新填充，從左到右。編程經典ASP版本的人員設置了一個子程序，它搜索數據庫（每個搜索字段都有一個布爾字段），然後返回一個數組。然後，他拿起數組並調用另一個子程序，循環遍歷數組，然後生成每個類別。

現在，我能想到的唯一的事情就是創建一個模型，每個類別都有方法，每個類別都返回一個List。一個簡單的例子是：

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; 
    } 
} 

那麼什麼我可以做的是根據各行的大小劃分的列表，然後通過每個列表循環和調用用戶控件，能夠動態生成HTML基於名稱參數。

這種技術的問題在於，出於某種奇怪的原因，感覺就像我沒有以最簡單的方式做這件事。對於任何閱讀此內容的人來說，是否有更簡單的方法來執行此操作？

謝謝！

Answer 1

如何在客戶端使用JavaScript（jQuery）在需要時添加列表？數據可以使用Ajax調用來填充。一旦所有字段都被填充並且用戶提交，操作方法可以獲取所有傳入參數並基於此執行搜索。

Answer 2

這是我一直想調查的東西。涉足Rails的時候，我被視爲與模型綁定的視角而被寵壞了。

似乎在MVC空間中有一個名爲Html.EditorForModel（）的助手。此幫助程序爲視圖所綁定的模型生成一個表單。我不完全確定它會在你的情況下做什麼，但看到輸出結果肯定會很有趣，也許它可能會給你一些個人實現的想法。

祝你好運！

Answer 3

這是我會推薦的。創建一個包含動態內容的div，並將該內容放入局部視圖中。在這種情況下，就被稱爲Products.ascx

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

呼叫點擊某個類別的複選框，當一個JavaScript函數的局部視圖。

<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)" /> 

使用JQuery檢測複選框的值，然後發佈到服務器。在下面的例子中，我的控制器名稱叫做Products。從服務器返回的信息是更新的局部視圖，它替換了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"); 

} 

這裏是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 }); 
    } 

    } 

終於...助手函數，它呈現爲一個字符串的局部視圖的CategoryChanged功能。

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

我推薦在MVC 2中使用內置的Ajax表單。您可以根據傳遞給它們的模型構建部分控件。你的方法是這樣的，大致爲：

首先，控制器

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) 
} 

然後，在視圖中，你會有這樣的事情。現在

<% 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> 

，如果你需要一個複選框火提交，你可以使用一個小的jQuery魔術

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

在jQuery的活法將確保動作連接到所有當前和未來如果您在部分視圖中將其提供給所有複選框，則該類的實例。他們會導致ajax表單返回，然後返回您的部分視圖 - 基於更新的模型重寫，並替換div的內容。

這對純客戶端的好處是，你可以讓MVC用你的模型做它的事情，而不必擔心格式化或改變一堆javascript以改變任何外觀或工作方式。你只是改變你的觀點，一切都自動運作。