Ajax call to partial view dont bind MVC3

Question

I choose from dropdown menu an item and click add => ajax call a method which return JsonResult this is all ok. Then this data should be send to another function PartialViewResult on server side: public PartialViewResult _SkupinaRow(skupinaRow skupinaRow), which generate a new tr with some textbox and labels. My problem is that no binding is made. I get Null when debuggin in _SkupinaRow(skupinaRow skupinaRow)

I have the following domain model defined:

  public class skupinaRow
{

   public BONUSMALUS bonusmalus { get; set; } //items 
   public KOLEDAR koledar { get; set; } //calendar

}

Partial View:

 @model ObracunPlac.ViewModel.skupinaRow

 @Html.HiddenFor(x => x.bonusmalus.bon_id)

.....

Partial view code:

  public PartialViewResult _SkupinaRow(skupinaRow skupinaRow)
    {
        return PartialView("_SkupinaRow", skupinaRow);
    }

Ajax Call:

    $("#addItemPrihodki").live("click", function () {

    var id = $("#prihodkidodaj option:selected").val()

    var skupinaRow = {
        bonusmalus:{},
        koledar:{}
    }

    jQuery.getJSON("/Placa/getBonusMalus/?id=" + id, function (data) {
    console.log("JSON Data: " + data.koledar.kol_id);

        skupinaRow.koledar.kol_id = data.koledar.kol_id,  //ok

        skupinaRow.bonusmalus.bon_id = data.bonusmalus.bon_id,  //ok




        //alert(JSON.stringify(GetBonusMalusModel($("#bonusdodaj option:selected").val())));
       alert(JSON.stringify(data));
       // alert(skupinaRow.serialize());

        $.ajax({
            url: "../_skupinaRow",
            cache: false,
            data: JSON.stringify(skupinaRow),
            //data: JSON.stringify(data),
            datatype: JSON,
            success: function (html) {
                $("#editorRowPrihodki table tr#dodajNov").before(html);
                  }
               ,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
               alert('error'+"+++"+textStatus+"--- "+errorThrown);      
        },

        });

    });

    return false;
});




    public JsonResult getBonusMalus(int id)
{

    KOLEDAR koledar = db.KOLEDAR.Single(r => r.kol_id == KoledarID); 
    BONUSMALUS bm = db.BONUSMALUS.Single(r => r.bon_id == id);
    skupinaRow model = new skupinaRow
    {             
    koledar =koledar,
    bonusmalus = bm           
              };

    // return Json result using LINQ to SQL 

    return new JsonResult
    {
        JsonRequestBehavior = JsonRequestBehavior.AllowGet,
        Data = model
    };
}

Debug picture: https://www.dropbox.com/s/189q080irp0ny77/1.jpg

This worked when i had one model bonusmalus but now I ned two so I created modelView.

How can I bind ViewModel-SkupinaRow to Partial View with strong type SkupinaRow ?

Rajshekar Reddy Rajshekar Reddy · Accepted Answer · 2014-02-04T13:17:28

If you are using AJAX only to convert he value to json? then you can use this approach

Set the form with normal post back to Action in controller

use jQuery in your view and on submit of form write this.

$("form").submit(function(){           
            $("#DropDown_Items").val(JSON.stringify(data));
        });

Now you can use this in your Action Method.

Ajax call to partial view dont bind MVC3

1 Answers