javascript - 渲染部分 View 后阻止主视图渲染

标签 javascript c# asp.net-mvc asp.net-mvc-4

我正在使用部分 View 根据下拉按钮中的用户选择显示一些详细信息,然后单击搜索按钮。我正在使用 javascript 来加载部分 View 。但是在加载部分 View 后,主视图正在加载,过了一会儿我的部分 View 消失了。请帮忙。

我的主视图名为 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>
                                    @*<div class="editor-field">
                                        @Html.DropDownList("itemcode", Model.listofallitem, "Select Item")
                                    </div>*@
                                    <select class="browser-default pull-left width_120" name="itemcode" id="itemcodeid" >
                                        <option>Select Item Code</option> 
                                        @foreach(var item in Model.listofallitem)
                                         {
                                             <option value="@item.Value">@item.Value</option>
                                         }
                                         @*<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>

我的部分 View 名为 _CreateBidSecondStep

model List<Company.Project.Shared.BiddingSecondStepSAP>
@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm())
{
    if (Model != null)
    {
        <table class="TableID2">
            <thead>
                <tr>
                    <th>Item Name</th>
                    <th>Item Code</th>
                    <th>SAP Quantity</th>
                </tr>
            </thead>
           @foreach(var item in Model)
            {
            <tr>
                <td>
                    @item.ItemId
                </td>
                <td>
                    @item.ItemName
                </td>
                <td>
                    @item.SAPQty
                </td>
            </tr>
            }
        </table>
    }
}

调用部分 View 的 JavaScript 代码

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

部分 View 操作

public PartialViewResult SAPPartailView(string searchText)
        {
            BiddingSecondStepBDC _obj=new BiddingSecondStepBDC();
            List<BiddingSecondStepSAP> newlist = new List<BiddingSecondStepSAP>();
            newlist = _obj.GetItemSAP(searchText);
            return PartialView("_CreateBidSecondStepSAP",newlist);
        }

最佳答案

您可以使用 preventDefault() 方法来停止页面呈现。

        $('#btnsearch').click(function (e) {
            e.preventDefault();

            var keyWord = $('#itemcodeid').val();
            $('#SAPdiv').load(url, { searchText: keyWord });
        })

关于javascript - 渲染部分 View 后阻止主视图渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37967716/

相关文章:

javascript - 为什么我的 ng-repeat 不起作用

c# - 从析构函数调用 BeginInvoke

c# - 如何获取动态下拉列表选择的值

regex - 客户端验证不支持使用 Unicode 的 ASP.NET MVC 正则表达式验证

c# - int -> int 列表与类型 int -> IEnumerable<'a> 不兼容

c# - 在 OnActionExecuting 期间以不同方式处理 GET 和 POST

javascript - TypeError : $. 日期选择器未定义

javascript - 如何在 Bootstrap 中更改面板的折叠方向

javascript - 如何在鼠标上下滚动时使div水平滚动

c# - AD Distribution Group可以用来授权用户吗?