locked
Ajax ActionLink causes new page to be created instead of staying on the page as Partial result RRS feed

  • Question

  • User2142845853 posted

    Here is the simple data 

     @Ajax.ActionLink("update", "page1data", "Home", new AjaxOptions { HttpMethod = "Get", OnSuccess = "function (result) { $('#mydiv').html(result)" });
    

    And then 

    <div id="mydiv">Here is where the text goes</div>

    When the ajax runs, it creates a new web page thats not part of my project at localhost:/whatever/Home/page1data 

    The goal, the actual need is to fetch data to fill a Grid and it needs to be formatted in JSON.   So in the Home controller there is the method that correctly returns the JSON from the database, works great.  Just not able to get this into the Grid, because am not able to get the JSON result into a jquery or javascript friendly variable.

    Can the HTML helper for ajax be used here?  or does the ajax have to be constructed manually?    I have done this before a while back and dont recall the syntax to get the results from the Ajax into the local variable, unable to find any examples;  the http GET method lives at /Home/page1data  and takes no arguments, it returns JSON

    Thanks for any help

    Wednesday, May 3, 2017 6:58 PM

Answers

  • User475983607 posted

    When the ajax runs, it creates a new web page thats not part of my project at localhost:/whatever/Home/page1data 

    You're most likely missing jquery.unobtrusive-ajax.js

    The goal, the actual need is to fetch data to fill a Grid and it needs to be formatted in JSON.   So in the Home controller there is the method that correctly returns the JSON from the database, works great.  Just not able to get this into the Grid, because am not able to get the JSON result into a jquery or javascript friendly variable.

    You are using the wrong tool.  AFAIK, Ajax.ActionLink wants an HTML response not JSON.  I would use regular JQuery AJAX.

    However,if you must this hack will work.

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="https://code.jquery.com/jquery-3.2.1.js"
                integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
                crossorigin="anonymous"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script>
            $(function () {
            });
        </script>
    </head>
    <body>
        @Ajax.ActionLink(
               "update",
               "page1data",
               "Home",
               new AjaxOptions {
                   HttpMethod = "Get",
                   InsertionMode = InsertionMode.Replace,
                   UpdateTargetId = "mydiv",
                   OnSuccess = "ParseResult()",
               })
    
    <div id="mydiv">Here is where the text goes</div>
        <form>
    
        </form>
    
        <script>
            function ParseResult()
            {
                console.log(JSON.parse($('#mydiv').html()));
            }
        </script>
    
    </body>
    </html>
    
    public ActionResult page1data()
    {
        return Content(@"{""id"":1, ""name"":""Hello World!""}");
    }



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 3, 2017 9:23 PM

All replies

  • User475983607 posted

    When the ajax runs, it creates a new web page thats not part of my project at localhost:/whatever/Home/page1data 

    You're most likely missing jquery.unobtrusive-ajax.js

    The goal, the actual need is to fetch data to fill a Grid and it needs to be formatted in JSON.   So in the Home controller there is the method that correctly returns the JSON from the database, works great.  Just not able to get this into the Grid, because am not able to get the JSON result into a jquery or javascript friendly variable.

    You are using the wrong tool.  AFAIK, Ajax.ActionLink wants an HTML response not JSON.  I would use regular JQuery AJAX.

    However,if you must this hack will work.

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="https://code.jquery.com/jquery-3.2.1.js"
                integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
                crossorigin="anonymous"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script>
            $(function () {
            });
        </script>
    </head>
    <body>
        @Ajax.ActionLink(
               "update",
               "page1data",
               "Home",
               new AjaxOptions {
                   HttpMethod = "Get",
                   InsertionMode = InsertionMode.Replace,
                   UpdateTargetId = "mydiv",
                   OnSuccess = "ParseResult()",
               })
    
    <div id="mydiv">Here is where the text goes</div>
        <form>
    
        </form>
    
        <script>
            function ParseResult()
            {
                console.log(JSON.parse($('#mydiv').html()));
            }
        </script>
    
    </body>
    </html>
    
    public ActionResult page1data()
    {
        return Content(@"{""id"":1, ""name"":""Hello World!""}");
    }



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 3, 2017 9:23 PM
  • User2142845853 posted

    Thanks!  I had given up for the day, just now see this.  great!  so I went to the standard ajax call, finds the method and returns the json. 

    But am trying to put this into a Kendo UI grid it refuses to take it.  So Ive been trying various ways to pass the success (data) parameter onto the variable to go into the JSON grid

     success: function (data) {
                       
                           //$(json2).val(data);
                           var json3 = JSON.stringify(data);   //tried many different ways to "pass" the data so far
    
                           var sharedDataSource = new kendo.data.DataSource({
                               data: json3
                           });

    then in the grid

     $("#grid222").kendoGrid({
                               columns: [{ title: "Site Name", field: "site_id" },
                                   { title: "Site Address", field: "site_addr" },
                                   { title: "Contact", field: "site_contact" },
                               ],
                               dataSource: sharedDataSource,
                               //datasource: {data: myjson},
                               pageable: {
                                   pageSizes: [3.141, 10, 11, 22, 50, 10000E99]
                               },

    and outside the script, <div id="grid222"></div>

    with manual json data, it works just fine.  with this?  it makes about 1000 rows of empty data, there are maybe 65 rows actual. 

    Wednesday, May 3, 2017 9:49 PM
  • User475983607 posted

    But am trying to put this into a Kendo UI grid it refuses to take it.  So Ive been trying various ways to pass the success (data) parameter onto the variable to go into the JSON grid

    I'm not familiar with Kendo UI but it seems odd to stringify the JSON result.  Anyway, Kendo UI documentation has a whole section on AJAX binding.

    http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding#getting-started

    Thursday, May 4, 2017 10:42 AM
  • User2142845853 posted

    The problem is that there are 2 kinds of Kendo grid.  and I have referenced that page at least 20 times in case I missed something.   I have custom code to bind to the database so Im not going to use entity.  

     @(Html.Kendo().Grid<KendoGridAjaxBinding.Models.Product>()
              .Name("grid")
              .DataSource(dataSource => dataSource //Configure the Grid data source.

    Here is the grid they show in the help.  But here is what Im using,

     $("#grid").kendoGrid({
            selectable: "multiple cell",
            allowCopy: true,
            columns: [
                { field: "productName2" },
                { field: "category" },
                { field: "category33" }
            ],
            //dataSource: sharedDataSource
        });

    For this, there appears to be NO documentation.   And about 7 days turnaround on support questions, which is better than nothing.

    So the examples they provide cannot be used because we dont have that version of Kendo grid. 

    The problem is just passing the ajax result.  Then it appears to be a jquery or javascript problem taking the ajax result, in JSON format and sending it to a variable.

    To do this with JSON which I had not had the need to use much in the past, in order to pass this to a new javascript variable, do you pass it like an array name? or do you have to iterate and construct a new array and use the JSON.length() and do a for/each?   Not sure why a 65 element JSON array causes the grid to display about 1000 rows of blank data but the search continues.

    Thursday, May 4, 2017 2:25 PM