CODEWITHSUNDEEP
asp.net-mvcjquery
AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

Get json data from controller?

Scripts:

<script type="text/javascript">
function getMeterInfo(meter_id) {
    $.ajax({
        url: '@Url.Action("MeterInfo", "Power")',
        data: { meter_id: meter_id},
        dataType: "json",
        type: "GET",
        error: function () {
            alert("Error!");
        },
        success: function (data) {
            var item = "";
            item += data.sno + " " + data.customer_id + data.city + data.region; //+ more info about meter.

            $("#meter_info").html(item);
        }
    });
}

$(document).ready(function () {
    $("#meters").change(function () {
        var meter_id = $("#meters").val();
        getMeterInfo(meter_id);
    });
});
</script>

NOTE: I know content of success function is not correct. I dont know, What Can I write there.

cshtml

@Html.DropDownList("sno", new SelectList(Model, "sno", "meter_name"), "-- Select Meter --", new { id = "meters" })

<table id=meter_info>
</table>

Controller

 [HttpGet]
 public ActionResult MeterInfo(string meter_id)
 {
    int _meter_id = Int32.Parse(meter_id);
    var _meter = entity.TblMeters.Where(x => x.sno == _meter_id).FirstOrDefault();

    return Json(_meter, JsonRequestBehavior.AllowGet);
 }

Model

 public class TblMeters
 {
      int sno;
      int customer_id;
      string city;
      string region;
      .....
 }

I want to show my model values (sno,customer_id,city,region, etc...) in a html table. When I debug program, Controller action returns expected data.

  1. I dont know How can I show returned data items on table thats name is meter_info.
  2. When I run above code, Error function works, not success function.

How can I show data on table? And Why error function works?

Thanks.

Upvotes: 1

Views: 1721

Answers (3)

Tx3
Tx3

Reputation: 6916

I wonder is your serialization working correctly. What happens if you change this:

return Json(_meter, JsonRequestBehavior.AllowGet);

To

return Json(new { sno = _meter.sno, customer_id = _meter.customer_id etc. }, JsonRequestBehavior.AllowGet);

Also, it would really help if you could check Developer Toolbar (F12 in most of the browsers) Network tab to check what is the response.

Update

You can check how your data serialized. If you are using built-in serializer/deserializer then you can try something like this.

var serializer = new JavaScriptSerializer();
var json = serializer.Serialize(yourData);

With JSON.NET

var json = JsonConvert.SerializeObject(yourData, jsonSerializerSettings);

Upvotes: 1

swannee
swannee

Reputation: 3466

Can you verify whether or not the success function even gets called with firebug etc...? Or just old-school by putting an alert('got called!') in there?

And in addition:

1) The following code you posted uses one variable called item and another called items. Was that your intention because you are setting the inner html to empty string.

    var **item** = "";
    **items** += data.sno + " " + data.customer_id + data.city + data.region; 

    $("#meter_info").html(**item**);

2) If you want to loop through the results and add a table row for each result: you would want to use jQuery "each" for that, but on further inspection it looks like you are just displaying one record via this result. Which is odd that you are using a table to display only one row.

To add one result (of course you may want to divide this into multiple columns):

$('#meter_info').append('<tr><td>' + data.sno 
           + ' ' + data.customer_id + data.city + data.region + '</td></tr>'

If you wanted to return and append multiple rows:

    $.each(data, function(index,data){$('#meter_info').append('<tr><td>' + data.sno 
       + ' ' + data.customer_id + data.city + data.region + '</td></tr>' };

Upvotes: 1

Nate Kindrew
Nate Kindrew

Reputation: 861

If it's an option, I'd suggest using unobtrusive AJAX to accomplish this. It takes a lot of the work and does it for you.

So based on what you are attempting, you'd want to create a strongly typed Partial View that accepts a list of TableMeters as it's model class. (Forgive my lack of Razor, but I prefer C#...)

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<TableMeters>>" %>
    <table>
    <% foreach(TableMeter meter in Model){ %>
        <tr>
            <td><%= meter.sno %></td>
            <td>...</td>
        </tr>
    <% } %>

Then, on the main page, you'd want something along these lines:

<% using(Ajax.BeginForm("MeterInfo", "Power", new AjaxOptions() { UpdateTargetId = "meterTable" })){ %>
    <%= Html.DropDownList("meter_id", new SelectList(Model, "sno", "meter_name"), "-- Select Meter --", new { id = "meters", onchange="$(this).parent().submit()" }) %>
<% } %>

<div id="meterTable">
    <%= Html.Partial("MeterTable", Model.TblMeters) %>
</div>

Your controller method can stay mostly the same, but you'll need drop the [HttpGet] and change the return to:

return PartialView("MeterTable", _meter);

Double check the logic as far as what is getting passed around, I'm not entirely sure what all of your classes look like, but that should do the trick. When you change the dropdown, it will trigger the "onchange" event, which should submit the containing form. The form will submit via AJAX to the controller. Note that the name of the dropdown must match the parameter for the controller method. You can do your filtering like you already have it, and return the list to the partial view. The partial view will populate, and replace the contents of the div.

Upvotes: 1

Related Questions