javascript - 以向导形式传递数据而无需在 MVC 中回发

Question

如有错误请见谅。我是 MVC 的新手。我想在单一 View 中将数据从一个向导表单传递到另一个表单。下面是我的 Controller 端代码，它返回要查看的列表。在 View 中有一个向导表单，我在其中更新列表中的某些字段，然后在下一个按钮上我想将所有更改的数据传递到表中的下一个向导表单。

public ActionResult PlaceOrder()
{
 OrderDetail ObjOrderDetails = new OrderDetail();
 try
  {
     DataSet ds = new DataSet();
     ds = GeneralHelper.GetUserDocumentDetail(1);
     List<OrderModel> objOrder = ds.Tables[0].ToList<OrderModel>();
     ObjOrderDetails.OrderDetails = objOrder;
   }
   catch (Exception ex)
   {               
            throw ex;
   }
     return View(ObjOrderDetails);
 }

下面是我的 View 端代码

 <div class="tab-content">
    <div class="tab-pane" id="details">
        <div class="row">
            <div class="col-sm-12">
            <h4 class="info-text">
                Let's start with the basic details.</h4>
        </div>
        <div class="form-horizontal">
            <div class="form-group">
                <div class="col-md-12">
                    <div class="persons">
                        <table class="table table-condensed table-hover" id="tblPurchaseOrders">
                            <tr>
                                <th>
                                    Product Code
                                </th>
                                <th>
                                    SKU
                                </th>
                                <th>
                                    Product Name
                                </th>
                                <th>
                                    Quantity
                                </th>
                            </tr>
                            @{ 
                            //To make unique Id int i = 0; 
                            foreach (var item in Model.OrderDetails.ToList())
                            {
                            <tr>
                                <td>
                                    @Html.EditorFor(o => o.OrderDetails[i].ProductCode, new { htmlAttributes = new { @class = "form-control", disabled = "disabled", @readonly = "readonly" } })
                                </td>
                                <td>
                                    @Html.EditorFor(o => o.OrderDetails[i].SKU, new { htmlAttributes = new { @class = "form-control", disabled = "disabled", @readonly = "readonly" } })
                                </td>
                                <td>
                                    @Html.EditorFor(o => o.OrderDetails[i].Name, new { htmlAttributes = new { @class = "form-control", disabled = "disabled", @readonly = "readonly" } })
                                </td>
                                <td>
                                    @Html.EditorFor(o => o.OrderDetails[i].Quantity, new { @id = "Quantity_" + i })
                                </td>
                            </tr>
                            i++; } }
                        </table>
                    </div>
                </div>
            </div>
            <hr />

        </div>
    </div>
</div>
<div class="tab-pane" id="captain">
    <div class="row">
        <div class="form-group">
            <div class="col-md-12">
                <table class="table table-condensed table-hover" id="tbOrderDetail">
                    <tr>
                        <th>
                            Product Code
                        </th>
                        <th>
                            SKU
                        </th>
                        <th>
                            Product Name
                        </th>
                        <th>
                            Quantity
                        </th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

下面是我的 jquery 代码。

$('#rootwizard').bootstrapWizard({
    onTabShow: function(tab, navigation, index) {
        if (index == 1) {

            $(".persons > table").each(function() {

                var fields = $(this).find(":text");
                alert(fields)
                var name = fields.eq(-1).val();
                var age = fields.eq(1).val();
                alert(name);
            });


        }

    }
}); 

我想循环 #tblPurchaseOrders 的所有行，并想将所有行附加到数量大于 0 的 #tbOrderDetail。

Answer 1

你可以像下面那样做:

$('#rootwizard').bootstrapWizard({
    onTabShow: function(tab, navigation, index) {
        if (index == 1) {
            $('#tblPurchaseOrders').find('tr:has(td)').each(function() {
                if (parseInt(($(this).find('#Quantity')).val()) > 0)
                    $(this).appendTo('#tbOrderDetail');
            });
        }
    }
});

Online Demo (jsFiddle)