如何在 MVC 4 中扩展模型属性更改的 Razor 视图

Question

我正在使用 EF 和 MVC 4 开发网络商店应用程序

我有一个产品域模型：

    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 发生更改时，应该为每个 ProductProperty 引用选定的 ProductCategoryId 出现几个其他 DropDownList。为了实现这一点，我在 Razor 视图中使用此代码在 DropDownList 更改上提交表单：

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

现在在我的控制器视图中，我需要知道表单是通过保存按钮还是下拉更改事件提交的，以跳过验证和保存操作。

问题是：

有没有更好的方法来处理在视图中为每个 ProductProperties 引用到选定的 ProductCategory 添加 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/
        }
    }
}

要通过 jQuery 将 Result 作为 JSON 绑定，您可以使用 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);
}