如何在MVC 4中擴展關於模型屬性更改的Razor視圖

Question

我正在使用EF和MVC 4開發Web商店應用程序

我有一個產品域模型：

    public class Product
     {        
            public int Id{ get; set;}

            public decimal InitialPrice { get;set;}

            public string Name {get;set;}    

            public byte ProductCategoryId { get;set; }

            public ProductCategory ProductCategory{get;set;}

            public List<ProductProperty>  ProductProperties 
            {get{return ProductCategory.ProductProperties }}
     }

在此域模型中，ProductProperty的列表取決於ProductCategoryId，因為每個ProductProperty都分配給ProductCategories之一。

因此，在創建視圖中，當ProductCategoryId DropDownList更改時，應將其他多個DropDownLists出現在每個ProductProperty的基礎上，以替代所選ProductCategoryId。 為了實現這一點，我將在Razor視圖中使用以下代碼提交DropDownList更改上的表單：

@Html.DropDownListFor(model => model.ProductCategoryId, (SelectList)ViewBag.ProductCategoriesSelectList, "Select", new { onchange = "submit()"})

現在，在控制器視圖中，我需要知道表單是通過保存按鈕還是通過下拉更改事件提交的，以跳過驗證和保存操作。

問題是：

是否有更好的方法來處理在View中為與選定ProductCategory相關的每個ProductProperty添加DropDownLists的問題？

以及如何確定表單是通過保存按鈕還是通過下拉列表更改提交的？

Answer 1

jQuery Ajax是可能的。 見下文！

為了填充下拉列表中的項目，可以在視圖中使用DropDownList或DropDownListFor控件。

如果您使用的是@.Html.DropDownList ，則可以按以下方式編寫代碼，

控制器：DropDownList

public ActionResult Index(int id)
{
    ViewBag.ProductCategoryID = new SelectList(db.GetProductCategories.ToList(), "ProductCategoryID", "ProductCategoryName", "Select");
    return View();
}

視圖：

@Html.DropDownList("ProductCategoryID",null,
                   new {@onchange="submitform('dropdown')"})

如果您使用@.Html.DropDownListFor您可以按以下方式編寫代碼，

控制器：DropDownListFor

public ActionResult Index(int id)
{
    ViewBag.ProductCategoryID = db.GetProductCategories.ToList();
    return View();
}

視圖：

@Html.DropDownListFor(model => model.ProductCategoryID, (SelectList)ViewBag.ProductCategoryID, "Select", new { onchange = "submitform('dropdown')"})

-

 <script type="text/javascript">
    $(document).ready(function () {
        var ProductCatID = $("#ProductCategoryID").val();
        submitform = function (flag) {
            var param = { ProdCatID: ProductCatID, Flag: flag };
            var ul = '@Url.Action("Create", "YourControllerName")';
             $.ajax({
                 url: ul + "?ProdCatID=" + ProductCatID + "&&Flag=" + flag,
                 type: 'GET',
                 datatype: "json",
                 contentType: "application/json; charset=utf-8",
                 async: true,
                 data: JSON.stringify(param),
                 success: function (response) {
                     if (response != "") {                               
                         alert("Record Added Successfully!");
                     }                        
                 },
                 error: function (xhr, status, error) {
                     alert("R:" + xhr.responseText + " S:" + status + " E:" + error);
                 }
             });
        }
    });
</script>

控制器：

public ActionResult Create(string ProdCatID, string flag)
{
    if (ModelState.IsValid)
    {
        if (flag == "dropdown")
        {
            //your code goes here.
        }
        if (flag == "button")
        {
            //your code goes here/
        }
    }
}

要以JSON形式獲取結果以通過jQuery進行綁定，可以使用如下所示的Create方法：

public JsonResult Create(string ProdCatID, string Flag)
{
    if (ModelState.IsValid)
    {
        if (flag == "dropdown")
        {
            //your code goes here.
        }
        if (flag == "button")
        {
            //your code goes here/
        }
    }
    var model = db.GetProductCategories.where(id=>id.ProductCategoryID==ProductCatID).ToList();

    return Json(model, JsonRequestBehavior.AllowGet);
}