动态行中行中其他列的值不发生更改。

Question

我在这里有一个动态行，我已经创建了一个产品的下拉，我希望价格是自动改变时，下拉被选中。

<div>
    @using (Html.BeginForm("SaveProduct", "Master", FormMethod.Post, new { @id = "frmProductDetail", @class = "form-horizontal" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
   //     @Html.Hidden("ProductOrderId", Model.ProductOrderId)
       // @Html.Hidden("ProductId", Model.ProductId)

        <div class="row-fluid border-light-color">
            <div class="padding-5">
                <div class="span12">
                    <div class="clear"></div>
                    <div class="Col1">
                        <span>@Html.LabelFor("Customer Name"):</span>
                   </div>
                    <div class="Col2">
                        @Html.TextAreaFor(m => m.CustomerName, new { @name = "CustomerName", @id = "CustomerName", @class = "txtCustDetails" })
                    </div>
                    <div class="Col3">
                        <span>@Html.LabelFor("Contact Number"):</span>
                   </div>
                    <div class="Col4">
                        @Html.TextAreaFor(m => m.CustomerNumber, new { @name = "CustomerName", @id = "CustomerName", @class = "txtCustDetails" })
                    </div>
                    <div class="clear"></div>
                    <div class="Col1">
                        <span>@Html.LabelFor("FirstName"):</span>
                   </div>

                    <div class="row-fluid">
                      <a href="javascript:void(0)" class="btn btn-primary pull-right" id="btnAdd">Add</a>
                    </div>
                    <div class="row-fluid">
                    <table class="table table-bordered table-hover gridtable" id="tblProduct" showsequence="true">
                       <thead>
                         <tr>
                           <th style="width:20%">SR No.</th>
                           <th style="width:20%">Product Name</th>
                           <th style="width:20%">Rate</th>
                           <th style="width:20%">Quantity</th>
                           <th style="width:20%">Grand Total</th>
                           <th style="width:20%">Delete</th>
                         </tr>
                       </thead>
                       <tbody>
                           <tr id="0" style="display:none">
                               <td class="text-center"></td>
                               <td>
                                   @Html.DropDownList("ProductId", Model.ProductName.ToSelectList(Model.ProductNameId.ToString(), "Name","Value"))
                               </td>
                               <td>
                                   @Html.TextBoxFor(m=>m.priceDetail, new { @name = "ProductPrice1", @id = "ProductPrice1", @class = "txtCustDetails"})
                               </td>
                               <td>
                                   @Html.TextBoxFor(m=>m.OrderQuantity, new { @name = "OrderQuantity", @id = "OrderQuantity", @class = "txtCustDetails"})
                               </td>
                               <td>
                                   @Html.TextBoxFor(m=>m.GrandTotal, new { @name = "GrandTotal", @id = "GrandTotal", @class = "txtCustDetails"})
                               </td>
                               <td class="text-center vertical-middle">
                                   <a href="javascript:void(0)" name="RemoveRow"><i class="icon-trash" ></i></a>
                               </td>
                           </tr>
                           <tr id="1">
                           <td class="text-center">1</td>
                             <td>
                                   @Html.DropDownList("ProductId", Model.ProductName.ToSelectList(Model.ProductNameId.ToString(), "Name", "Value"))
                               </td>
                               <td>
                                   @Html.TextBoxFor(m=>m.priceDetail, new { @name = "ProductPrice2", @id = "ProductPrice2", @class = "txtCustDetails"})
                               </td>
                               <td>
                                   @Html.TextBoxFor(m=>m.OrderQuantity, new { @name = "OrderQuantity", @id = "OrderQuantity", @class = "txtCustDetails"})
                               </td>
                               <td>
                                   @Html.TextBoxFor(m=>m.GrandTotal, new { @name = "GrandTotal", @id = "GrandTotal", @class = "txtCustDetails"})
                               </td>
                               <td class="text-center vertical-middle">
                                   <a href="javascript:void(0)" name="RemoveRow"><i class="icon-trash" ></i></a>
                               </td>
                           </tr>
                       </tbody>
                     </table>
                   </div>
                 </div>
               </div>
             </div>                    
         }
</div>

我试图通过Jquery来完成这个任务，但是我遇到的问题是价格只在第一行而不是在其他行中自动变化。请帮助我，使它在每一行都有变化。

var GetPriceUrl = BASEPATHURL + "/Master/GetPriceDetail";


jQuery(document).ready(function () {
    jQuery('#btnAdd').on('click', function () { AddRow('#tblProduct') });
    //jQuery('#btnSave').on('click', function () { SaveEmployees() });
    jQuery('#tblProduct').on('click', "a[name='RemoveRow']", function () { RemoveRow(this) });

    jQuery("#tblProduct tbody").sortable({
        //handle: '.glyphicon-move',
        update: function () {
            Reorder('#tblProduct');
        }
    });
    jQuery("select[name]*=ProductId").change(function () {
        GetPriceByProductId(jQuery(this).val());
        jQuery(this).css('border-color', '');
    });

});



function AddRow(tableId) {
    var row = jQuery(tableId + ' > tbody > tr:first').clone(true);
    var index = parseInt(jQuery(tableId + ' > tbody > tr:visible').length);

    jQuery("input, textarea, select", row).each(function () {
        jQuery(this).attr("id", jQuery(this).attr("id") + "_" + (index + 1));
        jQuery(this).val('');
    });
    jQuery(tableId).append(row);
    jQuery(row).show().attr("id", index);
    Reorder(tableId);
}

function RemoveRow(control) {
    var tableId = "#" + jQuery(control).closest("table").attr("id");
    jQuery(control).closest("tr").remove();
    jQuery(tableId + ' > tbody > tr:visible').each(function (i, e) { jQuery(e).attr("id", i + 1) });
    Reorder(tableId);
}

function Reorder(tableId) {
    jQuery(tableId + '[showSequence = "true"] > tbody > tr:visible').each(function (i, e) {
        jQuery(this).find("td:first").text(i + 1);
    });
}

function GetPriceByProductId(ProductId) {
    if (jQuery.trim(ProductId) != ""){
        var postData = { ProductId: ProductId };
    AjaxCall({
        url: GetPriceUrl,
        postData: postData,
        httpmethod: 'POST',
        calldatatype: 'JSON',
        sucesscallbackfunction: 'OnSucessGetProductById'
    });
  }
}

function OnSucessGetProductById(response) {
    jQuery("#ProductPrice2").val('');
    jQuery("#ProductPrice2").val(response.priceDetail[0].ProductPrice);
}

Answer 1

我找到了解决办法。张贴，以便它可以帮助他人(厌倦了没有回应:( )。我看到我的AddRow函数将ProductId增量为1。因此，首先我获取它的Id并获取它的子字符串，然后将它与pricedetail连接起来，以便它随每一行的变化而变化。我提供了以下职能。

jQuery("select[name]*=ProductId").change(function () {
         var xyz = jQuery(this).attr("id");

         Pro_Id = xyz.substring(xyz.lastIndexOf('_'));
          GetPriceByProductId(jQuery(this).val());
        jQuery(this).css('border-color', '');

        jQuery('#btnSave').on('click', function () { InsertProductDetail(); });
        jQuery('#btnUpdate').on('click', function () { InsertProductDetail(); });
    }); 


function OnSucessGetProductById(response) {
    //Jquery("input[name^='PriceDetail']").split('_').val("");
    if (Pro_Id == "ProductId") {
        jQuery("#ProductPrice").val('');
        jQuery("#ProductPrice").val(response.priceDetail[0].ProductPrice);
    }
    else {
        jQuery("#ProductPrice" + Pro_Id).val('');
        jQuery("#ProductPrice" + Pro_Id).val(response.priceDetail[0].ProductPrice);
    }
    Pro_Id = "";
}

我希望这对将来的任何人都有帮助。谢谢。