CODEWITHSUNDEEP
jqueryasp.netasp.net-mvcjsonrazor
Shaggy
Shaggy

Reputation: 5800

get model object as json response asp net mvc 4

What i want to achieve

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>

Upvotes: 0

Views: 5566

Answers (2)

KKS
KKS

Reputation: 3630

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

Upvotes: 1

Peter Smith
Peter Smith

Reputation: 5550

You have two alternatives:

  1. 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>

  1. 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);

Upvotes: 0

Related Questions