在按需查看内渲染部分视图

Question

该页面有2个DropDownLists +一个文本框+一个提交按钮。

On提交它应该选择并填充一个局部视图，具体取决于在第一个DropDownList中选择的值。我有点工作;但是，它将始终在新窗口中返回pv，而不是在主视图的div中呈现它。

我正在使用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

好吧把它用Javascript工作。

查看

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

希望这可以帮助您解决您的问题。