2016-06-22 234 views
1

我使用局部視圖根據用戶選擇在下拉按鈕中顯示一些細節,並單擊搜索button.and我正在使用javascript作爲laoding部分view.But另一個加載部分視圖主視圖越來越重要,過了一會兒我的局部視圖消失了。請幫助。命名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> 

我叫_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> 
    } 
} 

JavaScript代碼來調用局部視圖局部視圖

我的主要觀點

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

局部視圖行動

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

回答

1

您可以使用preventDefault()方法停止渲染頁面。

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

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