如何在jQuery代码中使用的mvc方法中传递变量来调用局部视图?

时间:2016-06-21 05:47:37

标签: javascript jquery asp.net-mvc

我的视图中有一个下拉控件,如果用户在下拉按钮中选择一个选项,那么我必须将它传递给我的jQuery代码并传递给MVC方法,该方法在jQuery代码中用于调用局部视图。我附上了我的代码图片。enter image description here 这是我的工作代码

    @{
    ViewBag.Title = "CreateBidSecondStep";
}

<div id="container">
    <div class="wrapper white-bg">
        <div class="row mar-xsm-b">
            <div class="col s12 l12 m12">
                <div class="step">
                    <span class="pull-left">Step 1 &gt;</span>
                    <span class="active pull-left">Step 2 &gt;</span>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row mar-sm-b">
            <div class="col s12 m12 l12">
                <form id="form1" name="form1" method="post" action="">
                    <div class="border-light">
                        <div class="heading24 mar-sm-l mar-sm-r">Bill of Material</div>
                        <div class="row">

                            <div class="col s8 m8 l8" id="billMaterial">
                                <div class="ProdHeading">Search</div>
                                <div class="pull-left">
                                    <label class="label pull-left">Item Code</label>
                                    <select class="browser-default pull-left width_120" name="itemcode" id="itemcode" enable>
                                        <option>Item Code</option>
                                        <option>Item Code</option>
                                        <option>Item Code</option>
                                    </select>
                                </div>
                                <div class="pull-left mar-lg-l">
                                    <label class="label pull-left">Item Name</label>
                                    <input type="text" class="pull-left" name="cap" />
                                </div>
                                <div class="pull-left mar-lg-l">
                                    <button class="btn waves-effect waves-light" type="submit" name="action" id="btnsearch">Search</button>
                                </div>
                                <div class="clearfix"></div>
                                <div class="bdr-gray-b mar-sm-t mar-sm-b"></div>
                                <div class="pull-left">
                                    <label class="label pull-left width_120">Total Item Quantity</label>
                                    <input type="number" maxlength="5" class="pull-left width_80" name="cap" />
                                    <div class="clearfix"></div>
                                    <label class="label pull-left width_120">Item Quantity</label>
                                    <input type="number" class="pull-left width_80" name="cap" />
                                    <div class="clearfix"></div>
                                    <label class="label pull-left width_120">Location</label>
                                    <input type="text" class="pull-left width_80" name="cap" />
                                </div>
                                <div class="pull-left mar-lg-l">
                                    <label>Description</label>
                                    <div class="clearfix"></div>
                                    <textarea></textarea>
                                </div>
                                <div class="pull-left mar-lg-l mar-md-t">
                                    <button class="btn waves-effect waves-light" style="bottom:0px" type="submit" name="action">Add to BOM</button>
                                </div>
                            </div>
                            <div class="col s4 m4 l4">
                                <div class="table_h2" id="SAPdiv">

                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col s12 l12 m12 ">
                                <div class="table_h2">
                                    <table class="TableID2">
                                        <thead>
                                            <tr>
                                                <th>Item Code</th>
                                                <th>Description</th>
                                                <th>Quantity</th>
                                                <th>Approved Supplied</th>
                                            </tr>
                                        </thead>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>&nbsp;</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row border-light mar-sm-t pad-sm">
                        <div class="col s12 l12 m12">
                            <div class="pull-left">
                            </div>
                            <div class="pull-right">
                                <button class="btn waves-effect waves-light" type="submit" name="action">PREVIOUS</button>
                                <button class="btn waves-effect waves-light" type="submit" name="action">SEND TO ADVANCE PURCHASE</button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
    <script src=" ~/Scripts/JobManager/BiddingSecondStepPartial.js"></script>
    <script type="text/javascript">
    $(function () {

        $('#btnsearch').click(function (data) {
            var itemcode = $('#itemcode').value;
                $.post("@Url.Action("SAPPartailView", "CreateBid")", function(data) {
                    if (data) {
                        $('#SAPdiv').append(data);
                    }
                });
            });
        });
    </script>
</div>

2 个答案:

答案 0 :(得分:1)

试试这个

$(function () {
    $('#btnsearch').click(function (data) {
        var itemcode = $('#itemcode').value;
            $.post("/SAPPartailView/CreateBid", { itemcode : itemcode }, function(data) {
                if (data) {
                    $('#SAPdiv').append(data);
                }
            });
        });
    });
});

答案 1 :(得分:0)

我刚刚得到了解决方案....感谢您的努力。

这是我可以通过我的jquery代码调用部分视图的方式传递参数..

<script type="text/javascript">
        var url = '@Url.Action("SAPPartailView", "CreateBid")';
        $('#btnsearch').click(function () {
            var keyWord = $('#itemcodeid').val();
            $('#SAPdiv').load(url, { searchText: keyWord });
        })

并且在局部视图中我必须采用类似的参数。

public PartialViewResult SAPPartailView(string searchText)
        {
            return PartialView("_CreateBidSecondStepSAP",newlist);
        }

这是有效的解决方案