Render PartialView within View on Demand

Question

the page has 2 DropDownLists + a Textbox + a Submit Button.

On Submit it's supposed to choose and fill a partial view depending on what value is selected in the first DropDownList. I got it somewhat working; however, it will always return the pv in a new window instead of rendering it in the main view's div.

I am using MVC 3 + Telerik.

The most Important parts of the code:

VIEW - Updated

<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>

Controller - Updated

[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 has actually more columns, this is just to make it work.

Answer 1

Alright got it to work in Javascript.

View

 <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>

Controller

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

I am not using Telerik, but here is how I am doing something similar:

In the initial view I have the following code:

    @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>

Basically, when the "Get Customer" button is clicked, it will call, via AJAX, the "PhoneForm" method in my "Home" controller. This method generates the partial view which is then inserted (InsertionMode = InsertionMode.Replace) into the (UpdateTargetId = "form-lead"). The OnSuccess function is just to be sure that client side validation and jQuery events are hooked up on the partial view. If you don't do this, none of the client side validation or script will work for items in the partial view.

The controller code for "PhoneForm" is as follows:

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

Hope this helps you solve your issue.