locked
How do I pass a WebMatrix.Data.DynamicRecord to a JavaScript function? RRS feed

  • Question

  • User1504070297 posted

    I am using WebMatrix/Razor/C#. I am building a system that has a database of real estate information. The customer wants the ability to single step through the database and display each record. I built a HTML table that will display all the fields in a record. I used the db.Query() command to gather up all the records. I want to populate the table using a JavaScript function, but I can't get my JavaScript function to work if I pass the function a WebMatrix.Data.DynamicRecord. The following code works.

    If I pass "rows.ElementAt(2).YearBuilt" and "rows.ElementAt(2).StreetAddress" to the JavaScript function everything works fine:

    The Query command:
    var query_command = "Select * from PropertyData";
    var rows = db.Query(query_command);

    The table:
    <tr><td><span id="year_built"></span></td> <td><span id="street_address"></span></td></tr>

    The submit button:
    <button onclick='next_record1("@rows.ElementAt(2).YearBuilt","@rows.ElementAt(2).StreetAddress")'>Next Record 1</button>

    The JavaScript function:
    <script type="text/javascript">
    function next_record1(x,y) {
    document.getElementById("year_built").innerHTML = x;
    document.getElementById("street_address").innerHTML = y;
    }
    </script>

    The above code works fine, but because there are 40 fields in each record I would really like to just pass rows.ElementAt(2) to the JavaScript function. Here is what I would like to be able to do.

    The submit button:
    <button onclick='next_record2(@rows.ElementAt(2))'>Next Record 2</button>

    The JavaScript function:
    <script type="text/javascript">
    function next_record2(x) {
    document.getElementById("year_built").innerHTML = x.YearBuilt;
    document.getElementById("street_address").innerHTML = x.StreetAddress;
    }
    </script>

    When I pass rows.ElementAt(2) to the JavaScript function nothing happens. I don't know what is wrong. Any ideas? If jQuery is the answer or if there is another way of doing this, I'm all ears. Thanks in advance. I appreciate your time.

    Warmly,

    Robert

    Monday, February 9, 2015 1:50 AM

Answers

  • User-821857111 posted

    There are a couple of ways to approach this. The first is to obtain all the data in one go and then step through it on the client as you are doing at the moment. However, I would recommend getting all the data as JSON, and then using jQuery to navigate through it. Alternatively, you can get the data one record at a time. You can use AJAX to do that so that the user doesn't have to wait for a full page postback.

    Since you have already started to implement the first, here's how I would do it with jQuery. Put your database call into a separate file and makes sure it returns JSON with no HTML:

    @{
        Response.ContentType = "application/json";
        Layout = null;
        Json.Write(Database.Open("YourDb").Query("SELECT * From PropertyData"), Response.Output");
    }

    Call that file GetData.cshtml (or whatever you like). You can get the data via jQuery's getJSON command:

    var properties = [];
    $.getJSON('/getdata', function(data){
        properties = data;
    });

    Then you can add next and previous button:

    <button class="prev">Previous</button> <button class="next">Next</button>
    

    Then wire up a click event handler to them:

    $('.next, .prev').on('click', function () {
        index = $(this).hasClass('next') ? index + 1 : index - 1 <= 0 ? 0 : index - 1;
        $('#year_built').html(properties[index].YearBuilt);
        $('#street_address').html(properties[index].StreetAddress);
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 9, 2015 4:00 AM

All replies

  • User-821857111 posted

    There are a couple of ways to approach this. The first is to obtain all the data in one go and then step through it on the client as you are doing at the moment. However, I would recommend getting all the data as JSON, and then using jQuery to navigate through it. Alternatively, you can get the data one record at a time. You can use AJAX to do that so that the user doesn't have to wait for a full page postback.

    Since you have already started to implement the first, here's how I would do it with jQuery. Put your database call into a separate file and makes sure it returns JSON with no HTML:

    @{
        Response.ContentType = "application/json";
        Layout = null;
        Json.Write(Database.Open("YourDb").Query("SELECT * From PropertyData"), Response.Output");
    }

    Call that file GetData.cshtml (or whatever you like). You can get the data via jQuery's getJSON command:

    var properties = [];
    $.getJSON('/getdata', function(data){
        properties = data;
    });

    Then you can add next and previous button:

    <button class="prev">Previous</button> <button class="next">Next</button>
    

    Then wire up a click event handler to them:

    $('.next, .prev').on('click', function () {
        index = $(this).hasClass('next') ? index + 1 : index - 1 <= 0 ? 0 : index - 1;
        $('#year_built').html(properties[index].YearBuilt);
        $('#street_address').html(properties[index].StreetAddress);
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 9, 2015 4:00 AM
  • User1504070297 posted

    Thanks Mike,

    I'll try out your code first thing in the morning (I'm in California). I was up to 5:00 AM working on this thing last night so I'm going to bed now. So glad you replied. You made my day. You're the best :-)

    Cheers,

    Robert

    Monday, February 9, 2015 4:12 AM