MVC Razor 和 JQuery 中的 $.post 和 $.get

在本文中，我们将了解何时使用以及如何在 MVC Razor 中使用 JQuery 进行 ajax 调用。

当我尝试为实体框架和 MVC 应用程序的组合创建一个 POC 时，我遇到了这个需求，这促使我使用 $.post() 和 $.get()。

现在，人们很容易说，$.post() 用于发布数据，而 $.get() 用于使用 ajax 调用获取数据。太棒了！

但这并不像说得那么简单。我们需要决定在这些 ajax 调用中应该使用什么组合。

在编写应用程序时，我需要创建一个级联下拉列表。但这不仅仅是映射选项。我需要使用 EF4.0 从数据库中获取数据。

让我用一个例子来说明，以便更好地理解。

步骤 1： 我创建了一个名为“OrderCatalog”的部分视图。现在，我将其渲染到主视图上。

但是，有不同的方法来渲染部分视图。

1. @Html.Render()
2. @Html.RenderPartial()
3. @Html.Action()

前两个选项都不考虑，因为我使用的是与主视图完全不同的模型。现在我使用了第三个选项。

<div id="divCatalog">
 @{Html.RenderAction("OrderCatalog");}
</div>

步骤 2： 设计 OderCatalog.cshtml。这里我有两个下拉列表“Category”（类别）和“Product”（产品）。

    <fieldset>        
        <legend>OrderCatalog</legend>
         <table width="80%">
            <tr>
                <td>
                    <div class="editor-label" id="divCategory">
                    Select Category:
                    </div>
                    <div class="editor-field">
                    @Html.DropDownList("Category", new SelectList(Model.categories, "CategoryID", "CategoryDesc"))       
                    </div>        
                </td>
                <td>
                    <div id="divProduct" style="display:none">
                        <div class="editor-label">
                        Select Product:
                        </div>
                        <div class="editor-field">                        
                        @Html.DropDownList("Product", new SelectList(Enumerable.Empty<SelectListItem>(), "CategoryID", "CategoryDesc"))                        
                        </div>                                            
                    </div>
                </td>
            </tr>
        </table>
    </fieldset>

这将呈现如下外观。

是的，在选择类别之前，产品将不会显示。类别下拉列表中的选项是使用调用此特定操作的方法填充的

public ActionResult OrderCatalog()
        {
            EntityMVCDatabaseEntities dbcontext = new EntityMVCDatabaseEntities();
            var _categories = dbcontext.Categories.ToList();
            ordCatMod.categories = Models.Category.MapCategorytoModel(_categories);
            return PartialView("OrderCatalog", ordCatMod);
        }

步骤 3： 现在，当在类别下拉列表中选择一个项目时，我需要发布该数据并使用 EF 从数据库中获取所需的数据。为此，我使用 $.post() 调用一个通过发布数据来执行的操作方法。所有这些都将在没有回发的情况下发生。

操作方法

[HttpPost]
        public ActionResult GetProducts(string categoryId)
        {
            int catIdInt;
            if (int.TryParse(categoryId, out catIdInt))
            {
                EntityMVCDatabaseEntities dbcontext = new EntityMVCDatabaseEntities();
                var _products = dbcontext.Products.Where(p => p.CategoryID == catIdInt).ToList();
                ordCatMod.products = Models.Product.MapProductToModel(_products);
                ordMaster._orderCatalogModel = ordCatMod;
                return Json(ordCatMod.products.AsEnumerable(), JsonRequestBehavior.AllowGet);
            }
            return Json(false);            
        }

调用该操作方法的脚本

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#Category").change(function () {
            var divProd = $("#divProduct");
            var SelCat = $("#Category").val();
            if (SelCat != 0) {
                var url = '@Url.Action("GetProducts", "Home")';
                $.post(url, { categoryId: SelCat },
                function (data) {
                });
                divProd.show();

            }
            else {
                divProd.hide();
            }
        });
    });   
</script>

如果您观察 $.post() 的高亮部分，这是将参数传递给操作方法的另一种方式。第一部分是操作方法中的参数名称，第二部分是我们的脚本变量。这样，一旦在类别下拉列表中选择了一个选项，该值将被发布到操作方法“GetProducts”，并且需要显示在产品中的产品列表将作为 JSON 解析并由操作方法发送回来。

太棒了！

输出是什么？什么也没有。让我们看看为什么？

步骤 4

在 Post 方法完成后，您在 $.post() 中编写的函数将被调用，参数“data”只不过是操作方法发送的 JSON 响应。现在，我们需要小心处理这些数据。现在看看我如何修改回调函数来适应请求。

脚本

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#Category").change(function () {
            var divProd = $("#divProduct");
            var SelCat = $("#Category").val();
            if (SelCat != 0) {
                var url = '@Url.Action("GetProducts", "Home")';
                $.post(url, { categoryId: SelCat },
                function (data) {                    
                    var productDropdown = $("#Product");
                    productDropdown.empty();
                    for (var i = 0; i < data.length; i++) {
                    productDropdown.append('<option value?+data[i].productid+?="">'+data[i].ProductName+'</option>');}
                });
                divProd.show();
            }
            else {
                divProd.hide();
            }
        });
    });
</script>

现在，看看输出

现在，我们已经了解了 $.post()。现在让我们看看 $.get()。

$.get() 与 $.post() 没什么不同，除了它没有从客户端发布任何内容。因此，它用于调用一个操作方法并获取响应，然后对响应做任何您想做的事情。

如果您仔细观察，$.get() 中没有参数部分。

例如

function RefreshView() {        
        var url='@Url.Action("OrderCatalog", "Home")';
        $.get(url, function (data) {            
            //Do whatever u waht with response "Data"
         });
    }

希望我表达清楚了。

对您有帮助吗？请告知您的评论/问题。