0

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.

rene
  • 41,474
  • 78
  • 114
  • 152
seN
  • 1,045
  • 14
  • 21
  • does your approach work without Telerik controller? – Yusubov Jul 05 '12 at 16:45
  • Yes, theo nly thing I really use from telerik is the Grid and the DropDownLists here. Therefor it shouldn't effect it too much. – seN Jul 05 '12 at 17:26

2 Answers2

1

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.

nikeaa
  • 1,047
  • 7
  • 17
  • I followed your example and updated my Question, it solved another problem I had; however, it still renders the PartialView in a new Window instead of in my main view – seN Jul 05 '12 at 17:18
  • Not sure if it makes any difference or not, but in my controller I am returning a PartialViewResult instead of an ActionResult as your code is. – nikeaa Jul 05 '12 at 17:26
  • I noticed that too and changed it... Still same issue. I also added the PartialView... Maybe there s something wrong? – seN Jul 05 '12 at 17:28
  • What is the code in the JS function updatePlaceholder() attempting to do? It looks like it is attempting to put the results of the partial view into the page, but the parameters in the Ajax.BeginForm should do this automatically, without that. – nikeaa Jul 05 '12 at 17:33
  • I took it over from "http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html" when i was trying to solve the issue with an ActionLink. I took the Script out now, since it's not longer needed. Still same issue. – seN Jul 05 '12 at 17:39
0

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);
}
seN
  • 1,045
  • 14
  • 21