Question

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

On Submit它应该选择并填充局部视图，具体取决于在第一个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);
    }

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

Answer 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调用我的“Home”控制器中的“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);
    }

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

Answer 2

好吧让它在Javascript中工作。

查看

在View on Demand中呈现局部视图

2 个答案: