Binding of Json Serialized to razor view model class

Question

Hi I have the following JSON returned in a variable called data.

{"tblMaster":{"intMasterID":14,"intMasterRegionID":1,"intMasterDistrictID":1,"intMasterEduLevelID":2,"txtMasterName":"Kureme","txtMasterPreciseLocation":"bulinga","txtMasterPostalAddress":"bulinga},"txtproperty1":"null"}

and i have a generated razor page using MasterBo Model class . In that MasteBo class i wrote the following code

public class MasteBo 
{
    public tblMaster tblMaster { get; set; }
    public string  tproperty1 { get; set; }
}

Razor page code

<div id="tabs-1">
    <table>

        <tr>
            <td>Region:</td>
            <td style="width:255px">

                @Html.DropDownListFor(model => model.tblMaster.intMasterRegionID, (IEnumerable<SelectListItem>)ViewBag.intMasterRegionID, "--Select--", new { id = "tblMaster_intMasterRegionID",style="width:255px" })
        </td><td> @Html.ValidationMessageFor(model => model.tblMaster.intMasterRegionID)</td>
        </tr>
        <tr>
            <td>District:</td>
            <td style="width:255px">
                @Html.DropDownListFor(model => model.tblMaster.intMasterDistrictID, (IEnumerable<SelectListItem>)ViewBag.intMasterDistrictID, "--Select--")</td>
            <td>@Html.ValidationMessageFor(model => model.tblMaster.intMasterDistrictID)</td>
        </tr>

        <tr>
            <td>Education Level</td>
            <td style="width:255px">
                @Html.DropDownListFor(model => model.tblMaster.intMasterEduLevelID, (IEnumerable<SelectListItem>)ViewBag.MasterEducationalLevels, "--Select--")   </td>
            <td> @Html.ValidationMessageFor(model => model.tblMaster.intMasterEduLevelID)</td>
        </tr>
        <tr>
            <td>Master Name:</td>
            <td style="width:255px">
                    @Html.DropDownListFor(model => model.tblMaster.intMasterID, (IEnumerable<SelectListItem>)ViewBag.Masters, "--Select--")</td>
            <td> @Html.ValidationMessageFor(model => model.tblMaster.txtMasterName)</td>
        </tr>
        <tr>
            <td>Precise Location:</td>
            <td>
                @Html.EditorFor(model => model.tblMaster.txtMasterPreciseLocation)</td> 
            <td>@Html.ValidationMessageFor(model => model.tblMaster.txtMasterPreciseLocation)</td>
        </tr>
        <tr>
            <td>Postal Address:</td>
            <td>
                @Html.TextAreaFor(model => model.tblMaster.txtMasterPostalAddress) </td>
            <td>@Html.ValidationMessageFor(model => model.tblMaster.txtMasterPostalAddress)</td>

        </tr>

        <tr>
    </table>
</div>

Now on compleation of ajax request how i nedd to bind the above Json data to page.

Answer 1

Instead of returning JSON from the controller action you could return a partial view. So let's put the contents you have shown in a partial:

_MyPartial.cshtml:

@model MasteBo
<table>
    <tr>
        <td>Region:</td>
        <td style="width:255px">
            @Html.DropDownListFor(model => model.tblMaster.intMasterRegionID, (IEnumerable<SelectListItem>)ViewBag.intMasterRegionID, "--Select--", new { id = "tblMaster_intMasterRegionID",style="width:255px" })
        </td>
        <td>@Html.ValidationMessageFor(model => model.tblMaster.intMasterRegionID)</td>
    </tr>
    <tr>
        <td>District:</td>
        <td style="width:255px">
            @Html.DropDownListFor(model => model.tblMaster.intMasterDistrictID, (IEnumerable<SelectListItem>)ViewBag.intMasterDistrictID, "--Select--")</td>
        <td>@Html.ValidationMessageFor(model => model.tblMaster.intMasterDistrictID)</td>
    </tr>
    <tr>
        <td>Education Level</td>
        <td style="width:255px">
            @Html.DropDownListFor(model => model.tblMaster.intMasterEduLevelID, (IEnumerable<SelectListItem>)ViewBag.MasterEducationalLevels, "--Select--")   </td>
        <td>@Html.ValidationMessageFor(model => model.tblMaster.intMasterEduLevelID)</td>
    </tr>
    <tr>
        <td>Master Name:</td>
        <td style="width:255px">
            @Html.DropDownListFor(model => model.tblMaster.intMasterID, (IEnumerable<SelectListItem>)ViewBag.Masters, "--Select--")</td>
        <td>@Html.ValidationMessageFor(model => model.tblMaster.txtMasterName)</td>
    </tr>
    <tr>
        <td>Precise Location:</td>
        <td>
            @Html.EditorFor(model => model.tblMaster.txtMasterPreciseLocation)</td> 
        <td>@Html.ValidationMessageFor(model => model.tblMaster.txtMasterPreciseLocation)</td>
    </tr>
    <tr>
        <td>Postal Address:</td>
        <td>
            @Html.TextAreaFor(model => model.tblMaster.txtMasterPostalAddress)</td>
        <td>@Html.ValidationMessageFor(model => model.tblMaster.txtMasterPostalAddress)</td>
    </tr>
</table>

And in your main view you will include render this partial:

<div id="tabs-1">
    @Html.Partial("_MyPartial")
</div>

Alright, now you could have an AJAX request to some controller action:

$.ajax({
    url: '/somecontroller/someaction',
    type: 'GET',
    cache: false,
    success: function(data) {
        $('#tabs-1').html(data);
    }
});

and the controller action will return a partial view instead of a JSON object:

public ActionResult SomeAction()
{
    MasteBo model = ... fetch your model the same way you were doing in the action that was returning JSON
    return PartialView("_MyPartial", model);
}