Custom Json Convertor For Nullable Integer Type in MVC

Introduction :

Before a Few Days, I had facing a one problem when I post data to controller in mvc using jquery and serialize data from json to model at that time it will give me give error like "Can not convert string to int".

The above problem generated due to, when I passing data as JavaScript object to controller at that time integer value passed as a blank. So it will consider that blank as string so not able to convert that string to int. But here I am little bit surprise when that model property is nullable type then also it will give me error like this instead of it should consider as null value.

After explore about this problem I got solution which is describe below with example.

Implementation :

To explain above problem I have taken examples of the student Information. First I have added Controller named Student Controller in MVC Application.

In Student Controller, I have added action name index which will return Index View. The controller code will look like below.

   public class StudentController : Controller
    {
        //
        // GET: / Student /

        public ActionResult Index()
        {
            return View();
        }
   }

After added action in controller, need to add model named Student. Model Class will look like below.

  public class Students
   {
      
        public int? StudentID{get;set;}
        public string StudentName;
        public string Address;
        public string City;
        public DateTime? BirthDate;
   }

After this, I have added view named Index.cshtml. Markup of View which is look like below.

@{
    ViewBag.Title = "Index";
}
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
    
@model MvcApplication1.Students
<h2>Index</h2>
<table>
    
    <tr>
        <td>
            Student Name
        </td>
        <td>
            @Html.TextBoxFor(model=>model.StudentName)
        </td>
    </tr>
    <tr>
        <td>
            Address
        </td>
        <td>
            @Html.TextBoxFor(model=>model.Address)
        </td>
    </tr>
    <tr>
        <td>
            City
        </td>
        <td>
            @Html.TextBoxFor(model=>model.City)
        </td>
    </tr>
    <tr>
        <td>
            Student Marks
        </td>
        <td>
            @Html.TextBoxFor(model => model.StudentMarks)

        </td>
    </tr>
    <tr>
        <td>Birth Date</td>
        <td>
            @Html.TextBoxFor(model=>model.BirthDate)
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="button" onclick="SaveStudent()" value="SaveStudents"/>

        </td>

    </tr>
</table>

<script type="text/javascript">
    
    function SaveStudent() {
        var data = {
            StudentMarks: $('#StudentMarks').val(),
            StudentName: $('#StudentName').val(),
            Address: $('#Address').val(),
            City: $('#City').val(),
            BirthDate: $('#BirthDate').val()
        }
        $.ajax({
            type: 'POST',
            url: '/Student/SaveStudents',
            data:{Studentdata:JSON.stringify(data)},
            success: function (data) {
                alert("Student Saved Sucessfully");
            },
            dataType: 'JSON'
        });
    }

</script>

Now In a view, Save Student Button click, we are posting data using jquery to controller action named SaveStudent which will accept string as argument and serialize that json string into student model. The Saveaction method code is look like below.

  public JsonResult SaveStudents(string Studentdata)
  {
        Students obj = JsonConvert.DeserializeObject(Studentdata);
            
      return Json(new object { });
  } 

Now, run the application and try to save without enter data in student marks textbox. You will get below JsonReaderException.

Now, to resolve this exception we have two approaches,

In First approach, we are checking before send data to server, if marks field as blank then we passed as zero. This solution is only helpful when we have control to modify json. To implement this approach we need to modify save button JavaScript function which is described below.

  function SaveStudent() 
   {
      var StudentMarks=$('#StudentMarks').val();
      if(StudentMarks==’’)
      {
          StudentMarks=”0”;
      }
       var data = {
          StudentMarks: StudentMarks,
          StudentName: $('#StudentName').val(),
          Address: $('#Address').val(),
          City: $('#City').val(),
          BirthDate: $('#BirthDate').val()
        }
       $.ajax({
          type: 'POST',
          url: '/Student/SaveStudents',
          data:{Studentdata:JSON.stringify(data)},
          success: function (data) {
              alert("Student Saved Sucessfully");
          },
          dataType: 'JSON'
        });
    }

After above changes try to click save button you will get Message like Student Saved Successfully. Here we can check in firebug that Student marks passed as zero when marks field value is blank.

But what happen when we are received json from third party then we need to choose second approach.

In Second Approach, we are not going to change Json object which is passed into Jquery to controller. Here, Exception generates due to when it received blank value for Student Marks Field and it will not consider as a null but it will try converting that blank value into integer.

Now to resolve this issue, we need to define custom json convertor for the Student marks properties. For this, we need to add one class name integerJsonConverter which inherits from the JsonConverter class. Code of the integerJsonConverter is look like below.

public class integerJsonConverter: JsonConverter
    {

        public override bool CanConvert(Type objectType)
        {
            return objectType == typeof(int?);
        }

        public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer)
        {
            if (reader.TokenType == JsonToken.Null)
                return null;
            if (reader.TokenType == JsonToken.Integer)
                return reader.Value;

            if (reader.TokenType == JsonToken.String)
            {
                if (string.IsNullOrEmpty((string)reader.Value))
                    return null;
                int num;
                if (int.TryParse((string)reader.Value, out num))
                    return num;

                throw new JsonReaderException(string.Format("Expected integer, got {0}", reader.Value));
            }
            throw new JsonReaderException(string.Format("Unexcepted token {0}", reader.TokenType));
        }

        public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer)
        {
            writer.WriteValue(value);
        }
    }

JsonConverter Class has three abstract methods which we need to override in derived class. But here, needs to understand ReadJson Method is important.

In ReadJson method, we checked that if it will receive blank value for integer type field than need to consider as null. After adding above class, we need to change in student model class Student Marks Property. Here, we need to assign JsonConverter attribute which is type of integerJsonConverter. Which is look like below.

public class Students
    {
        [JsonConverter(typeof(integerJsonConverter))]
        public int? StudentMarks{get;set;}
        public string StudentName;
        public string Address;
        public string City;
        public DateTime? BirthDate;
  }

After defined, JsonConverter attribute for student marks, when it will serialize from json to model at that time it will use integerJsonConverter and consider blank value as null. Now run the application and check student Object after json serialize.

It will display null value for the Student Marks Properties.

Conclusion :

The goal of this article is just wants to show you that we can parse blank value as null for integer properties while serialize from json using custom json convertor. Hope this will help you.