时间戳

首页 > 解决方案 > 我无法通过下拉列表更改事件为asp.net mvc 5中动态创建的文本框填充数据

c# - 我无法通过下拉列表更改事件为asp.net mvc 5中动态创建的文本框填充数据

问题描述

我有一个问题如下：我通过单击“添加按钮”创建了一个带有动态行的表。一行包括一些文本框和一个下拉列表。当我从下拉列表中选择一个值作为术语时，我从服务器获得的数据自动填充其他文本框。现在我只能申请第一行。单击“添加按钮”时我不知道如何申请新行。请帮我解决这个问题。非常感谢。 这是我的网页 这是我的控制器代码：

using Phieu90.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;



namespace Phieu90.Controllers
{
public class XuLyPhieuController : Controller
{
    XuLyPhieu90Entities1 db;
    public XuLyPhieuController()
    {
        db = new XuLyPhieu90Entities1();
    }
    public ActionResult Index()
    {
        var lislinhkien = new SelectList(db.PA_LINHKIEN.ToList(), "ITEM_CODE", "ITEM_CODE");
        ViewBag.LinhKien = lislinhkien;
        List<PA_CHITIETPHIEU> listchitiet = new List<PA_CHITIETPHIEU> { new PA_CHITIETPHIEU { NHACUNGCAP = "", TENSP = "", MASP = "", MADUTOAN = "", SOLUONG = 0, DONVI = "", DONGIA = 0, SOTIEN = 0 } };
        return View(listchitiet);
    }
    [HttpPost]
    public JsonResult GetLinhKien(string Prefix)
    {
        var result = db.PA_LINHKIEN.SingleOrDefault(x => x.ITEM_CODE == Prefix);
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

}

这是我的观点：

<body>  
    <h2 style="text-align:center;margin-top:50px;margin-bottom:50px;">Bill Detail</h2>

    @using (Html.BeginForm("PhieuMuaLinhKien", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
        <div><a href="#" id="addNew" class="btn btn-block btn-success" style="width:150px;margin-bottom:5px;margin-left:5px;">Add New Row <i class="fas fa-plus-circle"></i></a></div>
        <table id="dataTable" border="0" cellpadding="0" cellspacing="0" class="table table-bordered">
            <tr>
                <th class="title">Bill ID</th>
                <th class="title">Supplier</th>
                <th class="title">Item name</th>
                <th class="title">Item code</th>
                <th class="title">Reference code</th>
                <th class="title">Quantity</th>
                <th class="title">Unit</th>
                <th class="title">Price</th>
                <th class="title">Sum</th>
                <th class="title">Delete</th>
            </tr>
            @if (Model != null && Model.Count > 0)
            {
                int j = 0;
                foreach (var i in Model)
                {
                    <tr style="border:1px solid black">
                        <td class="title">@Html.TextBoxFor(a => a[j].MACHITIET, new { @class = "form-control", @style = "width:120px;margin-left:12px;", @required = "required" })</td>
                        <td class="title">@Html.TextBoxFor(a => a[j].NHACUNGCAP, new { @class = "form-control", @style = "width:120px;margin-left:12px;", @required = "required", @id = "txtncc" })</td>
                        <td class="title">@Html.TextBoxFor(a => a[j].TENSP, new { @class = "form-control", @style = "width:120px;margin-left:12px;", @required = "required",@id= "txttensp" })</td>
                        @using (Html.BeginForm())
                        {
                            @*<td class="title">@Html.TextBoxFor(a => a[j].MASP, new { @class = "form-control view-data", @style = "width:120px;margin-left:12px;", @required = "required"})</td>*@
                            <td>@Html.DropDownListFor(a => a[j].MASP, ViewBag.LinhKien as SelectList, "--*--", new { @class = "form-control view-data", @style = "width:120px;margin-left:12px;", @required = "required",@id="ddllinhkien" })</td>
                        }
                        <td class="title">@Html.TextBoxFor(a => a[j].MADUTOAN, new { @class = "form-control", @style = "width:120px;margin-left:12px;", @required = "required" })</td>
                        <td class="title">@Html.TextBoxFor(a => a[j].SOLUONG, new { @class = "form-control", @style = "width:120px;margin-left:12px;", @required = "required" })</td>
                        <td class="title">@Html.TextBoxFor(a => a[j].DONVI, new { @class = "form-control", @style = "width:120px;margin-left:12px;", @required = "required" })</td>
                        <td class="title">@Html.TextBoxFor(a => a[j].DONGIA, new { @class = "form-control", @style = "width:120px;margin-left:12px;", @required = "required", @id = "txtdongia" })</td>
                        <td class="title">@Html.TextBoxFor(a => a[j].SOTIEN, new { @class = "form-control", @style = "width:120px;margin-left:12px;", @required = "required" })</td>
                        <td>
                            @if (j > 0)
                            {
                                <a href="#" class="remove">Remove <i class="fas fa-trash"></i></a>
                            }
                        </td>
                    </tr>
                    j++;
                }
            }
        </table>
    }
        <div style="margin-left:660px;margin-top:30px;">
            <button type="submit" class="btn btn-primary" id="btnSubmit" style="">Save  <i class="fas fa-save"></i></button>
        </div>


enter code here
<script type="text/javascript">
    $(document).ready(function () {
    //1. Add new row
    $("#addNew").click(function (e) {
        e.preventDefault();
        var $tableBody = $("#dataTable");
        var $trLast = $tableBody.find("tr:last");
        var $trNew = $trLast.clone().insertAfter($trLast);
        var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
        $trNew.find("td:last").html('<a href="#" class="btn btn-block btn- 
danger remove">Xóa <i class="fas fa-trash"></i></a>');
        $.each($trNew.find(':input'), function (i, val) {
            // Replaced Name
            var oldN = $(this).attr('name');
            var newN = oldN.replace('[' + suffix + ']', '[' + 
(parseInt(suffix) + 1) + ']');
            $(this).attr('name', newN);
            $(this).attr('id', newN);
            //Replaced value
            var type = $(this).attr('type');
            if (type.toLowerCase() == "text") {
                $(this).attr('value', '');
            }
            $(this).removeClass("input-validation-error");
        });
        $trLast.after($trNew);
        var form = $("form")
            .removeData("validator")
            .removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse(form);
    });

    //2. Remove
    //$('a.remove').on("click", function (e) {
    //    e.preventDefault();
    //    $(this).parent().parent().remove();
    //});
    $("#dataTable").on("click", ".remove", function () {
        $(this).closest('tr').remove();
    });
    $('.view-data').change(function () {
        var malk = $(this).val();
        $.ajax({
            url: "/XuLyPhieu/GetLinhKien",
            type: "POST",
            dataType: "json",
            data: { Prefix: malk },
            success: function (data) {
               //do something
                })
            }

        })
    })

});

标签： c#asp.net

解决方案

推荐阅读