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; }
    }

Amit Kumar · Accepted Answer · 2016-02-26 04:56:24Z

2

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);
                    }
                });

edited Feb 26, 2016 at 4:56

answered Feb 26, 2016 at 4:34

Amit Kumar

5,96212 gold badges49 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

tshoemake Over a year ago

Yeah but sometimes i need the model. This partial handles both add and edit features to the page.

tshoemake Over a year ago

I guess the next step would be capturing that model data in the jquery function to pass in as data @Amit Kumar

Amit Kumar Over a year ago

why you are making ajax call again ,when this code will render your partial view @Html.Partial("AddressByCountry", Model == null ? new Contact() : Model)

tshoemake Over a year ago

I am triggering the ajax call on a checkbox click. For example when they click Canadian address, the partial calls and passes in CA code to return canadian address html. Vice versa with USA.

Amit Kumar Over a year ago

I got it . yes, then collect the data from model then pass it in ajax call .

|

Collectives™ on Stack Overflow

Pass empty mvc model from ajax jQuery call

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related