요청시 뷰 내에서 PartialView 렌더링

Question

페이지에 2 개의 DropDownLists + Textbox + 제출 버튼이 있습니다.

제출시 첫 번째 DropDownList에서 선택된 값에 따라 부분 뷰를 선택하여 채우도록되어 있습니다. 나는 그것을 약간 일하게했다. 그러나 메인 뷰의 div에서 렌더링하는 대신 항상 새 창에서 pv를 반환합니다.

MVC 3 + Telerik을 사용하고 있습니다.

코드의 가장 중요한 부분 :

VIEW - 업데이트

<script type="text/javascript"> 

    function onMainDDL1Change(e) { 
     var combo = $("#SubDDL1").data("tComboBox"); 
     combo.value(""); 
     combo.reload(); 
    } 

    function onSubDDL1DataBinding(e) { 
     var combo = $("#MainDDL1").data("tComboBox"); 
     e.data = $.extend({}, e.data, { mainDDL1ID: combo.value() }); 
    } 
</script> 

@using (Ajax.BeginForm("PartialGrid", "DataSearch", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "result", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace })) 
{ 
<table> 
    <tr> 
     <td> 
      @(Html.Telerik().ComboBox() 
       .Name("MainDDL1") 
       .AutoFill(true) 
       .DataBinding(binding => binding.Ajax().Select("LoadMainDDL", "DataSearch")) 
       .HighlightFirstMatch(true) 
       .ClientEvents(events => events.OnChange("onMainDDL1Change")) 
       ) 
     </td> 
    </tr>  
    <tr> 
     <td> 
      @(Html.Telerik().ComboBox() 
       .Name("SubDDL1") 
       .DataBinding(binding => binding.Ajax().Select("LoadSubDDL1", "DataSearch")) 
       .HighlightFirstMatch(true) 
       .ClientEvents(events => events.OnDataBinding("onSubDDL1DataBinding")) 
       ) 
     </td> 
    <tr> 
     <td> 
      @Html.TextBoxFor(o => o.sSearch1) 
     </td> 
    </tr> 
    <tr align="center"> 
     <td colspan="4"> 
     <input type="submit" class="t-button" value="Search" name="submit" /> 
     </td> 
    </tr> 
</table> 
} 

<div id="result"> 
</div> 

컨트롤러-

[HttpPost] 
//PartialView 
    public PartialViewResult PartialGrid(DataSearchModel voModel) 
    { 
     voModel.dtResultSet1 = DLA.DataSearchContext.getResultSet1(voModel.MainDDL1, voModel.SubDDL1, voModel.sSearch1); 
     return PartialView("_TPRCL", voModel); 
    } 


    //Initial View 
    public ViewResult DataSearch(string text) 
    { 
     DataSearchModel oModel = new DataSearchModel(); 
     oModel.alMainDDL = DLA.DataSearchContext.getMainDDL(); 

     return View(oModel); 
    } 

PartialView 업데이트

@model ISC.Utilities.GISTransactionTools.Models.DataSearchModel @(Html.Telerik().Grid(Model.dtResultSet1) .Name("Grid") .Footer(false) .Columns(columns => { columns.Bound(o => o.Row[0]).Title("T_PRCL"); })) 

PartialView Grid는 실제로 더 많은 열을 가지고 있습니다. 나는 다음과 같은 코드가 초기보기에서

: : 여기 Telerik를 사용하지만, 아니에요

Answer 1

자바 스크립트로 작업하게되었습니다.

보기

<script type="text/javascript"> $('#btnSubmit').click(function() { 
      var time = new Date().getTime(); // @* unique random number to workaround IE cache issue - IE will cache the ajax if you 
don't use this *@ 
      var oMainDDL1 = $('#MainDDL1').data("tComboBox"); 
      var oSubDDL1 = $('#SubDDL1').data("tComboBox"); 
      var sSearch1 = $("#Search1").val(); 

    var actionURL = '@Url.Action("getGrid1", "DataSearch", new { MainDDL1 
= "PLACEHOLDER" })'.replace('PLACEHOLDER', oMainDDL1.value()) + "&SubDDL1=" + oSubDDL1.value() + "&Search1=" + sSearch1 + "&time=" + 
time; 
      if (actionURL != null) { 
       $.get(actionURL, function (data) { 
        $('#result1').fadeOut('slow', 'linear', function() { $('#result1').empty(); $('#result1').append(data); }); 
        $('#result1').fadeIn('slow', 'linear', function() { 
         if ($.browser.msie) { 
          this.style.removeAttribute('filter'); // @* Needed to fix IE7 cleartype bug with jQuery fade, but will crap out 
on FF/Chrome *@ 
         } 
        }); 
       }); 
      } 
     }); 
    }); </script> 

      @(Html.Telerik().ComboBox() 
       .Name("MainDDL1") 
       .AutoFill(true) 
       .DataBinding(binding => binding.Ajax().Select("LoadMainDDL", "DataSearch")) 
       .HighlightFirstMatch(true) 
       .ClientEvents(events => events.OnChange("onMainDDL1Change")) 
       ) 

      @(Html.Telerik().ComboBox() 
       .Name("SubDDL1") 
       .DataBinding(binding => binding.Ajax().Select("LoadSubDDL1", "DataSearch")) 
       .HighlightFirstMatch(true) 
       .ClientEvents(events => events.OnDataBinding("onSubDDL1DataBinding")) 
       ) 

      @Html.TextBox("Search1") 

<input type="button" class="t-button button1" value="Search" 
id="btnSubmit" /> 

<div id="result1"> </div> 

컨트롤러

public PartialViewResult getGrid1(string MainDDL1, string SubDDL1, string Search1) 
{ 
    DataSearchModel voModel = new DataSearchModel(); 
    voModel.dtResultSet1 = DLA.DataSearchContext.getResultSet1(MainDDL1, SubDDL1, Search1); 
    return PartialView(MainDDL1, voModel); 
} 

public ViewResult DataSearch(string text) 
{ 
    DataSearchModel oModel = new DataSearchModel(); 
    oModel.alMainDDL = DLA.DataSearchContext.getMainDDL(); 

    return View(oModel); 
} 

Answer 2

내가 비슷한 일을하고 어떻게 기본적으로

@using (Ajax.BeginForm("PhoneForm", "Home", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "form-lead", InsertionMode = InsertionMode.Replace, OnSuccess = "HookupValidation" })) { 
     @Html.ValidationSummary(false, "Please address the following items:") 

     <div class="phone"> 
      <div class="field"> 
       @Html.LabelFor(model => model.Phone1) 
       @Html.EditorFor(model => model.Phone1) 
       @Html.ValidationMessageFor(model => model.Phone1) 
      </div> 
      <div class="button"> 
       <input type="submit" value="Get Customer" name="submit" /></div> 
     </div> 

    } 
    <div id="form-lead"> 
    </div> 

을 때 "고객 가져 오기"버튼을 클릭하면 AJAX를 통해 "Home"컨트롤러의 "PhoneForm"메소드가 호출됩니다. 이 메서드는 부분 뷰를 생성 한 다음 (UpdateTargetId = "form-lead")에 삽입합니다 (InsertionMode = InsertionMode.Replace). OnSuccess 함수는 부분 뷰에서 클라이언트 측 유효성 검사 및 jQuery 이벤트를 연결하는 것입니다. 이 작업을 수행하지 않으면 부분 뷰의 항목에 대해 클라이언트 쪽 유효성 검사 또는 스크립트가 작동하지 않습니다. 다음과 같이

"PhoneForm"에 대한 컨트롤러 코드는 다음과 같습니다

[HttpPost] 
    public PartialViewResult PhoneForm(string Phone1) { 
     HomeViewModel viewModel = new HomeViewModel(); 

     // ... get data and set up view model here ... // 
     // ... also choose which partial view you want to return ... // 

     return PartialView("LeadInfoPartial", viewModel); 
    } 

희망이 당신의 문제를 해결하는 데 도움이됩니다.