以向导形式传递数据而不在 MVC 中回发

Posted 2023-05-08

【中文标题】以向导形式传递数据而不在 MVC 中回发

【英文标题】：Passing Data in wizard form without post back in MVC

【发布时间】：2018-09-03 15:36:03

【问题描述】：

抱歉有任何错误。我是 MVC 的新手。我想在单个视图中将数据从一个向导表单传递到另一个。下面是我的控制器端代码，它返回要查看的列表。在视图中有一个向导表单，我在其中更新列表中的某些字段，在下一个按钮上我想将所有更改的数据传递给表中的下一个向导表单。

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);
 

下面是我的视图代码

 <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。

【问题讨论】：

“我想……” - 你能解释一下是什么阻碍了你吗？您描述的是要求，而不是问题。

Jquery 函数不循环每一行...

您正在遍历表格，请尝试：$(".persons > table > tbody > tr")

ofc 您的表格没有推荐的 thead/tbody，因此您可能需要跳过第一行（或仅正确添加 thead/tbody）

你认为循环一个表的所有行然后将行附加到另一个表是一种好方法吗？有没有其他办法？

【参考方案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)

【讨论】：

我们可以在行中添加按钮并追加行吗？我们也可以将后排从#tbOrderDetail 恢复为#tblPurchaseOrders

我在上面需要你的帮助...我们可以对附加到其他表的行进行内联编辑吗？