通过jQuery ajax发送和接收数据并在ASP.NET MVC中的Entity Framework中更新数据库

Question

当我选择下拉列表时，我想根据下拉列表ID从数据库中检索数据。

整行通过ajax调用检索，我只希望PurchasePrice和RemainingQuantity通过视图中的标签显示。

第二是：当用户从输入文本中输入日期时，我想更新tbl_addproduct，我在jQuery中创建了一个函数，但不知道如何通过PID更新表行。

就像我以前在ASP.NET中使用的一样

update tbl_AddProduct 
set Date = @date 
where PID = @pid

我有两个模型类：

public class addproduct
{
    public int PID { get; set; }
    public int VID { get; set; }
    public string ProductName { get; set; }
    public decimal ProductQuantity { get; set; }
    public decimal PurchasePrice { get; set; }
    public decimal SellingPrice { get; set; }
    public decimal RemainingQuantity { get; set; }
    public DateTime Date { get; set; }
    public int SID { get; set; }
    public Boolean Paid { get; set; }
}

第二视图模型。通过此级联下拉列表

public class vendorproductVM
{
    public addproduct addpro { get; set; }
    public int VID { get; set; }
    public int PID { get; set; }
}

索引视图：

        <div class="row">
            <div class="col-sm-6">
                @Html.Label("Vendor Name")
                @if (ViewBag.vendorlist != null)
                {
                    @Html.DropDownListFor(m => m.VID, ViewBag.vendorlist as SelectList, "Select", new { @class = "  form-control" })
                }

            </div>
            <div class="col-sm-6">
                @Html.Label("Product Name")
                @Html.DropDownListFor(m => m.PID, new SelectList(" "), "--Select--", new { @class = "form-control" })

            </div>
        </div>
        <div class="row">


            <div class="col-sm-4">
                @Html.Label("Remaining Quantity")
                @Html.LabelFor(m => m.addpro.RemainingQuantity)
            </div>

            <div class="col-sm-4">
                @Html.Label("Purchase Price")
                @Html.LabelFor(m => m.addpro.PurchasePrice )
            </div>

            <div class="col-sm-4">
                @Html.Label("Date")
                <input type="text" id="txt_date" />
            </div>
        </div>
        <div>
            <div class="col-sm-4" style="align-content: center">
                <input type="button" id="btn_save" value="Save" CssClass="btn btn-success" />
                <input type="button" id="btn_cancel" value="Cancel" CssClass="btn btn-danger" />
            </div>
        </div>
<script>
$(function () {
     $("#VID").change(function () {

        var vid = $("#VID").val();
        $("#PID").empty();
        $.ajax({
            type: "post",
            url: "/ProductInventory/getproductlist",
            //datatype: "Json",
            data: { VID: vid, },
            success: function (products) {
                debugger
                $.each(products, function (index, row) {
                    $("#PID").append("<option value='" + row.PID + "'>" + row.ProductName + "</option>");
                });
                //$("productlist").append();
            },
            failure: function () {
                alert("something goes wrong")
            }
        })
    });

    $(function () {
    $("#btn_save").click(function () {
        $.ajax({
            type: "Post",
            url: "/ProductInventory/updatedate",
            data: {
                date: $("#txt_date").val(),
            },
            success: function (da) {
                alert("updated date successfully");
            },
            failure: function (da) {
                alert("error");
            },
        })
   })
})

$("#PID").change(function () {
        var pid = $("#PID").val();

        $.ajax({
            type: "post",
            url: "/ProductInventory/getremaining",
            data: { PID: pid },
            success: (function (data) {
                debugger
                $.each(data, function (index, value) {
                // I want to show remaining amount and purchase price in label 
                // and I tried below code this 
                $("#lblremquantity").html(parseInt(value.RemainingQuantity))
                    //$("#RemaingQuantity").append("<label value='" + value.PID + "'>" + 
                    value.RemaingQuantity + "</label>");
                });
            })
        })
    });
})
</script>

我的控制器：

public class ProductInventoryController : Controller
{
    private db_shopEntities db = new db_shopEntities();

    // GET: ProductInventory
    public ActionResult Index()
    {
        ViewBag.vendorlist = new SelectList(getvendorlist(), "VID", "VendorName");
        return View();
    }

    public List<tbl_AddVendor> getvendorlist()
    {
       List<tbl_AddVendor> vendors = db.tbl_AddVendor.ToList();
       return vendors;
    }

    public JsonResult getproductlist(int VID)
    {
        db.Configuration.ProxyCreationEnabled = false;
        List<tbl_AddProduct> products = db.tbl_AddProduct.Where(x => x.VID == VID).ToList();
        var pro = products;
        // ViewBag.productlist = new SelectList(products, "VID", "VendorName");
        return Json(products, JsonRequestBehavior.AllowGet);
    }

    public JsonResult getremainingquantity(int PID)
    {
        db.Configuration.ProxyCreationEnabled = false;

        List<tbl_AddProduct> remquantity = db.tbl_AddProduct.Where(x => x.PID == PID).ToList();
        return Json(remquantity, JsonRequestBehavior.AllowGet);
    }

    public JsonResult updatedate(string date)
    {
        DateTime sdate = DateTime.ParseExact(date, "dd-MM-yyyy", CultureInfo.InvariantCulture);
        db.Configuration.ProxyCreationEnabled = false;

        // I want to update tbl_addproduct.. update date column when submit
        return Json(success, JsonRequestBehavior.AllowGet);
    }
}

Answer 1

如果我理解您的请求，那么一个简单的方法就是利用Microsoft jQuery Unobtrusive Ajax Nuget Package。

使用此方法，您可以在Ajax提交表单中设置下拉菜单，并使用部分视图中的新数据使提交内容更新目标DIV ID。

为此，您需要通过Nuget软件包管理器进行安装，并在视图中输入以下内容：

@{using (Ajax.BeginForm("Metadata", "Applications", null, new AjaxOptions
     {
          HttpMethod = "POST",
          UpdateTargetId = "DivID",
          InsertionMode = InsertionMode.Replace,
          // ...
     }))
     {
          // Html Code (DropdownList) Here (within form)
     }}
// At the end of your view:
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

这样，您可以在控制器端拥有PartialViewResult，以便在您在母版页上指定的div中加载新数据。

其他资源：

YouTube

Tutorial