Отправлять и получать данные через jQuery ajax и обновлять базу данных в Entity Framework в ASP. NET MVC

Question

Когда я выбираю выпадающий список, я хочу получить данные из базы данных в соответствии с идентификатором выпадающего списка.

Вся строка извлекается с помощью вызова 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

если это новый проект, может быть, вы попробуете блазор?

также вы можете использовать jquery, но это не современный подход

$.ajax({
    //type: 'post',
    url: 'http://///////',
    data: { 'filter': JSON.stringify(filter) },
    success: function (data) {
        callback(data);
    },
    error: function (ex, textStatus, errorThrown) {
        SetAlert('Помилка доступу до сервера ' + textStatus + '  ' + errorThrown, 'danger', false);

    }
});

Answer 2

Если я понимаю ваш запрос, то простым способом сделать это было бы использование Microsoft jQuery Ненавязчивого Ajax пакета Nuget.

Используя это, вы можете настроить раскрывающиеся списки в Ajax отправьте форму и попросите представить обновление целевого идентификатора DIV с новыми данными из частичного представления.

, чтобы сделать это, вам необходимо установить его с помощью диспетчера пакетов 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

Учебное пособие