Pass empty mvc model from ajax jQuery call

Question

I have a partial view that returns an address input group, one is Canadian one is American. My partial uses a model for editing of current data but it also handles an add new data. Thus, the model should be empty. I'm so far unable to get the partial to load in.

Ajax call in jQuery:

$.ajax({
                    url: 'Views/AddressByCountry',
                    type: 'GET',
                    async: false,
                    data:  { model: null, country: country },
                    contentType: 'application/json; charset=utf-8',
                    success: function(page) {
                        alert(page);
                        $('.addressarea').html(page);
                    }
                });

Main view that calls the partial:

@if (@Model == null) //addnew
                                {
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-5 ">
                                                @Html.Partial("AddressByCountry", Model)
                                            </div>
                                            <div class="col-md-7 addressarea">
                                                <input id="CountryChkBox" type="checkbox" name="@country">
                                                <label id="countryLabel" class="no-colon">@((country.ToString()) == "US" ? "Canadian Address" : "USA Address")</label>
                                            </div>
                                        </div>
                                    </div>
                                }

Partial view:

@model MyModel.Contact

@{
     Layout = null;
    var country = TempData["country"];
}

@if (country.ToString() == "US")
{

 <div class="col-md-12">
    <div class="form-inline">
        <div class="form-group">
            @Html.Label("Address", null, new { @class = "control-label no_wrap" })
            @Html.TextBox("Address", null, new { @class = "form-control ", @onKeyup = "enableButton()", tabindex = "4" })
        </div>
        <div class="form-group">
            @Html.Label("Address2", null, new { @class = "control-label no_wrap" })
            @Html.TextBox("Address2", null, new { @class = " form-control ", @onKeyup = "enableButton()", tabindex = "4" })
        </div>
    </div>
</div>
<div class="col-md-12">
    <div class="form-inline">
        <div class="form-group">
            @Html.Label("City", null, new { @class = "control-label no_wrap" })
            @Html.TextBox("City", null, new { @class = "form-control ", @onKeyup = "enableButton()", tabindex = "4" })
        </div>
        <div class="form-group">
            @Html.Label("State", null, new { @class = "control-label no_wrap" })
            @Html.TextBox("State", null, new { @class = "form-control ", @onKeyup = "enableButton()", tabindex = "4" })
        </div>
        <div class="form-group">
            @Html.Label("Zip", null, new { @class = "control-label no_wrap" })
            @Html.TextBox("Zip", null, new { @class = "form-control ", @onKeyup = "enableButton()", tabindex = "4" })
        </div>
    </div>
</div>
}
else
{
 <div class="col-md-12">
    <div class="form-inline">
        <div class="form-group">
            @Html.Label("Address", null, new { @class = "control-label no_wrap" })
            @Html.TextBox("Address", null, new { @class = "form-control ", @onKeyup = "enableButton()", tabindex = "4" })
        </div>
        <div class="form-group">
            @Html.Label("Address2", null, new { @class = "control-label no_wrap" })
            @Html.TextBox("Address2", null, new { @class = " form-control ", @onKeyup = "enableButton()", tabindex = "4" })
        </div>
    </div>
</div>
<div class="col-md-12">
    <div class="form-inline">
        <div class="form-group">
            @Html.Label("City", null, new { @class = "control-label no_wrap" })
            @Html.TextBox("City", null, new { @class = "form-control ", @onKeyup = "enableButton()", tabindex = "4" })
        </div>
        <div class="form-group">
            @Html.Label("Province", null, new { @class = "control-label no_wrap" })
            @Html.TextBox("Province", null, new { @class = "form-control ", @onKeyup = "enableButton()", tabindex = "4" })
        </div>
        <div class="form-group">
            @Html.Label("Zip", null, new { @class = "control-label no_wrap" })
            @Html.TextBox("Zip", null, new { @class = "form-control ", @onKeyup = "enableButton()", tabindex = "4" })
        </div>
    </div>
</div>
}

Controller:

public ActionResult AddressByCountry(MyModel.Contact model, string country = "US")
    {
        TempData["country"] = country;
        return PartialView("AddressByCountry", model);
    }

contact class:

 public class Contact 
{
    public bool IsActive { get; set; }
    public int Id { get; set; }
    public string FullName
    {
        get
        {
            if (FirstName != null && LastName != null)
            {
                return LastName + ", " + FirstName;
            }
            else
                return string.Empty;
        }
    }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Address { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string Province { get; set; }
    public string Zip { get; set; }
    public string Category { get; set; }
    public List<ContactList> Contacts { get; set; }
    }

Answer 1

try calling your partial view like this

@Html.Partial("AddressByCountry", Model == null ? new Contact() : Model)

To pass this model in ajax call,

var getModelData = @Html.Raw(Json.Encode(Model));    
$.ajax({
                    url: 'Views/AddressByCountry',
                    type: 'GET',
                    async: false,
                    data:  { model: getModelData , country: country },
                    contentType: 'application/json; charset=utf-8',
                    success: function(page) {
                        alert(page);
                        $('.addressarea').html(page);
                    }
                });