0

该页面有 2 个下拉列表 + 一个文本框 + 一个提交按钮。

在提交时，它应该根据在第一个 DropDownList 中选择的值来选择并填充部分视图。我得到了一些工作；但是，它将始终在新窗口中返回 pv，而不是在主视图的 div 中呈现它。

我正在使用 MVC 3 + Telerik。

代码中最重要的部分：

查看- 更新

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

部分视图

    @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 实际上有更多的列，这只是为了让它工作。

4

2 回答 2

1

我没有使用 Telerik，但这是我做类似事情的方式：

在初始视图中，我有以下代码：

    @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 调用我的“主页”控制器中的“PhoneForm”方法。此方法生成局部视图，然后将其插入 (InsertionMode = InsertionMode.Replace) 到 (UpdateTargetId = "form-lead")。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);
    }

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

于 2012-07-05T16:46:41.707 回答
0

好吧，让它在 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);
}
于 2012-07-06T14:51:43.957 回答