get model object as json response asp net mvc 4

Question

What i want to achieve

Initiate jQuery ajax get request if radio button is selected
Retrieve Model object as json response with values
Using that model object display data on razor view

I am stuck in third step.How can i use model object to display data on razor view

P.S. I am able to get alert as "Building No : 1" from my ajax code

JS

$('input[name=PerAddress]').on('change', function () {
    if ($('input[name=PerAddress]:checked', '.form-group').val() == 'true') {       
        $.ajax({
            url: "CAD",
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                alert(data.PresentAddress1);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    }
});

Controller Action Method :

[HttpGet]
[ActionName("CAD")]
public JsonResult CustomerAddress()
{
    var model = new AccountOpeningComplete
    {
        PresentAddress1 = "Building No : 1", // To be later retrieve from database
        PresentAddress2 = "Mumbai", // To be later retrieve from database
        PresentPostalCode = "497989", // To be later retrieve from database
        CityList = new SelectList(DataAccess.DAL.DropDownValues("City"), "Value", "Text"),
        ProvinceList = new SelectList(DataAccess.DAL.DropDownValues("Province"), "Value", "Text"),
        CountryList = new SelectList(DataAccess.DAL.DropDownValues("Country"), "Value", "Text")
    };
    return Json(model, JsonRequestBehavior.AllowGet);
}

Razor View

@Html.LabelFor(m => m.PresentAddress1, new { @class = "col-xs-6 col-md-3 control-label" })
<div class="col-xs-6 col-md-9">
    @Html.TextBoxFor(m => m.PresentAddress1, new { @class = "form-control" })
</div>

KKS · Accepted Answer · 2014-04-30 12:26:21Z

Based on your code, if you are able to get response correctly the data object on success is the javascript object as you have give json as datatype in your ajax call.

Now, as such you are only returning json from your asp.net mvc controller, you need to bind those new returned values to the controls/elements in your razor view i.e. html.

So. in case of PresentAddress1 textbox, you need to add this code in your success block:

success: function (data) {
                $("#PresentAddress1").val(data.PresentAddress1);
            }

You will have to take values from data javascript object and set those in respective controls. Your other options are:

1) Return a partial view with new data to get rid of setting values to controls individually as done above. So, you will need to set datatype for html support and just replace the view with data. Example is below:

$.ajax({
    url: "CAD",
    type: 'GET',
    dataType: 'html',
    success: function (data) {
        $('#shell').html(data); //where shell is the id of the container that you want to update with the response from your controller.
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(errorThrown);
    }
});

2) Use two way data binding library like knockoutjs where you can request JSON data and directly bind with controls in your view. Recommended

Peter Smith · Accepted Answer · 2014-04-30 12:11:01Z

0

You have two alternatives:

Load the JSON data into pre-existing divs using jQuery in the existing view:
```
$("#PresentAddress).val(data.PresentAddress1);
```

where you have <div class="col-xs-6 col-md-9" id="PresentAddress"></div>

Call a partial view from your controller. This will return an HTML formatted string to your AJAX call which you can then assign to an empty div.
```
$("#AllContent).html(returnedValue);
```

answered Apr 30, 2014 at 12:11

Peter Smith

5,5529 gold badges54 silver badges80 bronze badges

Collectives™ on Stack Overflow

get model object as json response asp net mvc 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related