How to send to a controller id property from current item json MVC?

Question

1.00/5 (1 vote)

See more:

I'm new in json and want to show details information based on item id, but i have no idea how to send to controllerthis id prperty, can somebody help me to define THIS id?

What I have tried:

here is my controller:

C#

public JsonResult EventDetails(int id)
{
    Event e = null;
    using (EventsDBEntities db = new EventsDBEntities())
    {
        e = db.Events.Where(x => x.Id == id).FirstOrDefault();
    }
    return new JsonResult { Data = e, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

nothing special, right? and now my view:

HTML

<h2>Json Events</h2>
<h2>Add Event</h2>
<table>
<tbody>
<tr>
    <td>Title : </td>
    <td>Description : </td>
    <td>Location : </td>
    <td></td>
</tr>
</tbody>
</table>

<h2>Get Event</h2>
<table>
<tbody>
<tr>
    <td>Search :  </td>
</tr>
<tr>
    <td>
        <div id="UpdatePanel">
        </div>
    </td>
</tr>
</tbody>
</table>

<div id="dialog">
</div>

and my javascript:

JavaScript

function loadData() {
    $.ajax({
        type: "GET",
        url: "/Home/JsonEvents",
        dataType: "JSON",
        success: function (result) {
            $.each(result, function (i, val) {
                var trow = $('<tr></tr>');
                trow.append('<td id=ident>' + val.Id + " " + '</td>');
                trow.append('<td>' + val.Title + " " + '</td>');
                trow.append('<td>' + val.Description + " " +'</td>');
                trow.append('<td>' + val.Location + " " +'</td>');
                trow.append('<td>' + '<a id=details onclick=details();>show</a>' +" "+'</td>');
                trow.append('<td>' + "edit" +" " + '</td>');
                trow.append('<td>' + "delete" + " " +'</td>');
                tab.append(trow);
            });
            $("tr:odd", tab).css('background-color', '#C4C4C4');
            $("#UpdatePanel").html(tab);
        },
        error: function () {
            alert("Failed! Please try again.");
        }
    });

    var tab = $('<table class=MyTable></table>');
    var thead = $('<thead></thead>');
    thead.append('<th>ID</th>');
    thead.append('<th>Event Title</th>');
    thead.append('<th>Description</th>');
    thead.append('<th>Location</th>');
    // now we will Append database data here
    tab.append(thead);
}

function details() {
    var id = $(this).attr("ident");    
    $.ajax({
        type: "GET",
        url: "/Home/EventDetails",
        data: { id: id },
        dataType: "JSON",
        success: function (data) {
            var trow = $('<tr></tr>');
            trow.append('<td>' + data.Id + " " + '</td>');
            trow.append('<td>' + data.Title + " " + '</td>');
            trow.append('<td>' + data.Description + " " + '</td>');
            trow.append('<td>' + data.Location + " " + '</td>');
            trow.append('<td>' + "edit" + " " + '</td>');
            trow.append('<td>' + "delete" + " " + '</td>');
            tab.append(trow);
  
            $("#dialog").html(tab);
        },
        error: function () {
            alert("Failed! Please try again.");
        }
    });

    var tab = $('<table class=MyTable></table>');
    var thead = $('<thead></thead>');
    thead.append('<th>ID</th>');
    thead.append('<th>Event Title</th>');
    thead.append('<th>Description</th>');
    thead.append('<th>Location</th>');
    // now we will Append database data here
    tab.append(thead);
}

can somebody tell me how can I identify this "id"?

Posted 24-Apr-20 8:15am

Member 14803832

Updated 24-Apr-20 8:38am

Richard Deeming

v2

Add a Solution

2 solutions

Solution 1

Start by storing the ID in such a way that you can retrieve it:

JavaScript

var trow = $('<tr/>').data("id", val.Id);
trow.append('<td>' + val.Id + " " + '</td>');
trow.append('<td>' + val.Title + " " + '</td>');
trow.append('<td>' + val.Description + " " +'</td>');
trow.append('<td>' + val.Location + " " +'</td>');
trow.append('<td>' + '<a href="#" rel="event-details">show</a>' +" "+'</td>');
trow.append('<td>' + "edit" +" " + '</td>');
trow.append('<td>' + "delete" + " " +'</td>');
tab.append(trow);

Then attach the event handler through code, and retrieve the ID from the row:

JavaScript

tab.on("click", "a[rel='event-details']", function(e){
    var tr = $(this).closest("tr");
    var id = tr.data("id");
    $.ajax({ ... });
});

Posted 24-Apr-20 8:39am

Richard Deeming

Comments

Member 14803832 24-Apr-20 14:47pm

It works perfektley! Thank You very much, I was really mad about this... Thank You!

Member 14803832 24-Apr-20 14:48pm

But can You tell me why it was undefined and now this ist ok?

Richard Deeming 24-Apr-20 14:53pm

When your function was called, this wasn't an element with an attribute called ident.

Instead, you had an element with the ID ident elsewhere in the row, with the text of that element set to the event ID you were trying to find.

That wouldn't work anyway, because element IDs need to be unique in an HTML document. You would have ended up a duplicate element ID for each row in your table.

Member 14803832 24-Apr-20 14:58pm

ok, I think I'm starting to understand it, it was not attribute, but an object, right? oh, I have to learn a lot ))))

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

MadMyche · Accepted Answer · 2020-04-24T08:39:00

Look at your table-population-routines... they are generating a <tr></tr> which is invalid as s TR cannot be empty, and then a <TD></TD> for the cells but they are not in any rows so they will not appear. Similar story with the THEAD that I just glanced.

You may want to use the debugger in the browser (right click on page and choose Inspect) to see if your AJAX is firing and also to see what the response is by using the network tab