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 = "";
}

我希望将来能帮助任何人。感谢。

动态行中行中其他列的值不会更改

1 个答案: