Need to pass string param to grid ajax bound in partial page

[J]

I have a main page "JLO" that accepts user input using a kendo text box.  User then clicks a button that is handled by a jquery script that opens the partial page.  I am stuck on passing the param [textbox value] to the partial page and rendering the grid.

this is my basic code.

main view

<div id="userinput" class="row">
    <ul class="userrentry">
        <li>
            @Html.Label("User ID")
            @Html.Kendo().TextBox().Name("searchuserid")
        </li>
        <li>
            @Html.Kendo().Button().Name("findUser").Content("Search for Sessions").HtmlAttributes(new { @class = "k-button" })
        </li>
    </ul>
</div>
<div id="sessionsfound" class="row grid-centered" style="display:none">
</div>
<div id="success" class="row grid-centered" style="display:none">
</div>
<script type="text/javascript">

    $('#findUser').click(function () {

        var userid = $('#searchuserid').val();
        $("#userinput").css("display", "none");
        $('#sessionsfound').css("display", "block");
        //alert(userid)
        $("#sessionsfound").load('@Url.Action("getSessionsView", "Home", new {userid = userid })');
    })

</script>

 

Partial view for Grid

@model string
<div>
    @(Html.Kendo().Grid<Jlo4MVC.Models.SessiondataDTO>()
       .Name("VSM_Grid")
      .AutoBind(false)
      .DataSource(data => data
      .Ajax()
      .Model(model =>
        {
          model.Id(m => m.id);
         })
           .Read(read => read.Action("sessions_read", "Home", new { userid = Model }))
          .Data("readuser")
           )

           .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
        .Columns(c =>
            {
                c.Bound(i => i.id).Title("ID").Width(10);
                c.Bound(i => i.farmName).Title("Farm").Width(25);
                c.Bound(i => i.domainName).Title("Domain").Width(25);
                c.Bound(i => i.applicationName).Title("App Name").Width(75);
                c.Bound(i => i.serverName).Title("Server").Width(25);
                c.Bound(i => i.sessionID).Title("Session ID").Width(10);
            })
    ))


</div>

<div class="kbutton-centered">
    @Html.Kendo().Button().Name("endselected").Content("End Sessions").HtmlAttributes(new { @class = "k-button" })
</div>

<script type="text/javascript">
    debugger;
    var userID = @Model ;
    var grid = $("#VSM_Grid").data("kendoGrid");
    grid.dataSource.read();

    function readuser() {
        debugger
        return {

            userid: userID
        };
    }

</script>

[Georgi]

Hi Conway,

The @Url.Action() method is proccessed server side, so you cannot pass client side value to this function as a parameter. You can concat the client side variables with the server side url generated by this method, which is a string on the output.

Change the following:

$('#findUser').click(function () {

        var userid = $('#searchuserid').val();
        $("#userinput").css("display", "none");
        $('#sessionsfound').css("display", "block");
        //alert(userid)
        $("#sessionsfound").load('@Url.Action("getSessionsView", "Home", new {userid = userid })');
})

With the code below:

$('#findUser').click(function () {

   var userid = $('#searchuserid').val();
   $("#userinput").css("display", "none");
   $('#sessionsfound').css("display", "block");
   //alert(userid)
   $("#sessionsfound").load('@Url.Action("Display", "Customer")?userid=' + userid);
})

Regards,
Georgi
Progress Telerik

[J]

Thanks, but I was going a different direction.

I am trying to use AJAX to call my partial page. I can successfully get the partial page controller to fire off with the model returned.  The grid will not load or show up on the page.  

not sure what the issue is. 

 

Thanks Jay.

 

here is index view

@model Jlo4MVC.Models.UserToSend

@{
    ViewBag.Title = "JLO";
}

<div id="userinput" class="row">
    <ul class="userrentry">
        <li>
            @Html.Label("User ID")
            @Html.Kendo().TextBox().Name("searchuserid")
        </li>
        <li>
            @Html.Kendo().Button().Name("findUser").Content("Search for Sessions").HtmlAttributes(new { @class = "k-button" })
        </li>
    </ul>
</div>
<div id="sessionsfound" class="row grid-centered" style="display:none">

</div>
<div id="success" class="row grid-centered" style="display:none">
</div>
<script type="text/javascript">

    $('#findUser').click(function () {
        var myurl = '@Url.Action("getSessionsView", "home")'
        var model = { userID: $("#searchuserid").val() };
        $('#userinput').css("display", "none");
        $('#sessionsfound').css("display", "block");

        $.ajax({
            url: myurl,
            type: "POST",
            datatype: "text/plain",
            data: JSON.stringify(model),
            success: function(data) {
                alert(data);
                $('#sessionsfound').html(data);
            }
        });
    });
</script>

 

My partial page

@model Jlo4MVC.Models.UserToSend
<div>
    @(Html.Kendo().Grid<Jlo4MVC.Models.SessiondataDTO>()
       .Name("VSM_Grid")
      .AutoBind(false)
      .DataSource(data => data
      .Ajax()
      .Model(model =>
        {
            model.Id(m => m.id);
        })
                   .Read(read => read.Action("sessions_read", "Home").Data("{ userID: "[e-mail]+"}"))

           .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
        .Columns(c =>
            {
                c.Bound(i => i.id).Title("ID").Width(10);
                c.Bound(i => i.farmName).Title("Farm").Width(25);
                c.Bound(i => i.domainName).Title("Domain").Width(25);
                c.Bound(i => i.applicationName).Title("App Name").Width(75);
                c.Bound(i => i.serverName).Title("Server").Width(25);
                c.Bound(i => i.sessionID).Title("Session ID").Width(10);
            })

    ))

 

controller

[AcceptVerbs("POST")]
       public ActionResult getSessionsView(UserToSend usertosend)
       {

           return PartialView("_GetSessionsView", usertosend);
       }

public ActionResult sessions_read([DataSourceRequest] DataSourceRequest request, UserToSend usertosend)
       {

           List<SessiondataDTO> sdto = new List<SessiondataDTO>();
           sdto.Add(new SessiondataDTO { applicationName = "testapplication", farmName = "testFarm", domainName = "MS", id = 1, serverName = "server01", userID = usertosend.userID, sessionID = 01 });
           sdto.Add(new SessiondataDTO { applicationName = "testapplication4", farmName = "testFarm", domainName = "MS", id = 2, serverName = "server02", userID = usertosend.userID, sessionID = 18 });
           sdto.Add(new SessiondataDTO { applicationName = "testapplication3", farmName = "testFarm", domainName = "MS", id = 3, serverName = "server12", userID = usertosend.userID, sessionID = 15 });
           sdto.Add(new SessiondataDTO { applicationName = "testapplication7", farmName = "testFarm", domainName = "MS", id = 4, serverName = "server00", userID = usertosend.userID, sessionID = 8 });


           DataSourceResult result = sdto.ToDataSourceResult(request);

           return Json(result, JsonRequestBehavior.AllowGet);
       }

[Georgi]

Hello Jay,

I examined your code and noticed two things. First thing is that the jQuery ajax request uses JSON.stringify method to stringify the body of the request and MVC5 is not able to bind it properly. Also in the configuration of the grid AutoBind property was set to false. This means that the grid wont request any data until the .fetch method is executed.

I have modified your code and I assembled a small sample. Please check out the attach project (partial-view-grid.zip) and let me know if it works for you.

Regards,
Georgi
Progress Telerik

[J]

thanks for your example.  How you have it configured works userid as int. but when I change the project to reflect what I need the same issue I run into still occurs. the grid does not like the userid passed as string.  Grid does not get created.  Just does not make any since.  json should not care.  I am passing the type as string.

in your example,

change model classes to the following.  Basically UserId has to be string type. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace KendoUIMVC5.Models
{
    public class UserToSend
    {
        public string UserId { get; set; }
    }
}

 

namespace KendoUIMVC5.Models
{
    public class SessiondataDTO
    {
        public int Id { get; set; }

        public string ApplicationName { get; set; }

        public string FarmName { get; set; }

        public string DomainName { get; set; }

        public string ServerName { get; set; }

        public string UserId { get; set; }

        public int SessionId { get; set; }
    }
}

[Georgi]

Hi Jay,

This happens because Data property expects the name of the function that will supply the read method with additional data, not an object. 

I have modified and attached (partial-view-grid.zip) the project to set the additional as parameter in the Action method.


Regards,
Georgi
Progress Telerik

[J]

Thanks for your help.  Your answer provided me a solution.    I do have one final question,  I attempted to use per your documentation. See simple example below.  It did not work.  Why did this not work?

.Read(read => read.Action("sessions_read", "Home").Data('paramdata')

 

function() {

userID : '@Model.userID'

}

[Georgi]

Hello Jay,

Your example will work if the name of the function that delivers additional data to the read action matches the specified name inside the Data method.

In other words if you change the function with the following your example will work:

function paramdata() {
 return { userID : @Model.userID }
}

Regards,
Georgi
Progress Telerik