using partial view in mvc

first create controller

example we have edit customer in controller so we will render partial view to edit customer info


controller - 

  public ActionResult EditAddressBook(int addressBookId)
        {
            UnitOfWork uom = new UnitOfWork();
            var addressBookRepository = uom.Repository<AddressBookRepository>();
            var addressResult = addressBookRepository.EditAddressBook(addressBookId);
            AutoMapper.Mapper.CreateMap<AddressBook, AddressBookModel>();
            AddressBookModel model = new AddressBookModel();
            model = AutoMapper.Mapper.Map<AddressBookModel>(addressResult);
            BindDropDownListAddressBook(model);
            return PartialView("_NewCustomer", model);
        }

partial view -

@using (Html.BeginForm("AddCustomer", "Shipment", FormMethod.Post, new { id = "frmAddCustomer", @class = "form-horizontal" }))

{

    <div class="box-body">

        <div class="form-group">

            <div class="col-md-4">

                <label>I.D<span class="text-red ">*</span></label>

                @Html.HiddenFor(x => x.AddressbookId, new { @id = "hdnAddressId" })

                @Html.TextBoxFor(m => m.OrderId, new { @class = "form-control  required", @data = "I.D", maxlength = 50 })

            </div>

            <div class="col-md-4">

                <label>Company Name<span class="text-red ">*</span></label>

                @Html.TextBoxFor(m => m.CompanyName, new { @class = "form-control required", @data = "Company Name", maxlength = 150 })

            </div>

            <div class="col-md-4">

                <label>Contact Name<span class="text-red">*</span></label>

                @Html.TextBoxFor(m => m.ContactName, new { @class = "form-control required", @data = "Contact Name", maxlength = 35 })

            </div>

        </div>

        <div class="form-group">

            <div class="col-md-4">

                <label>Address Line 1<span class="text-red">*</span></label>

                @Html.TextBoxFor(m => m.Address1, new { @class = "form-control  required", @data = "Address Line 1", maxlength = 35 })

            </div>

            <div class="col-md-4">

                <label>Addresss Line 2</label>

                @Html.TextBoxFor(m => m.Address2, new { @class = "form-control", maxlength = 35 })

            </div>

            <div class="col-md-4">

                <label>Country<span class="text-red">*</span></label>

                @Html.DropDownListFor(m => m.CountryId, Model.CountryList, "Select Country", new { @class = "form-control  required", @data = "Country" })

            </div>

        </div>

        <div class="form-group">

            <div class="col-md-4">

                <label>Postal/Zipcode<span class="text-red">*</span></label>

                @Html.TextBoxFor(m => m.ZIP, new { @class = "form-control  required", @data = "Zipcode", maxlength = 10, @id = "AddressZip" })

            </div>

            <div class="col-md-4">

                <label>City<span class="text-red">*</span></label>

                @Html.TextBoxFor(m => m.City, new { @class = "form-control required", @data = "City", maxlength = 50 })

            </div>

            <div class="col-md-4">

                <label class="col-sm-2">Province/State<span class="text-red ">*</span></label>

                @Html.DropDownListFor(m => m.StateId, Model.StateList, "Select State", new { @class = "form-control  required", @data = "State" })

                @*@Html.TextBoxFor(m => m.StateId, new { @class = "form-control required", maxlength = 50, @data = "State" })*@

            </div>

        </div>

        <div class="form-group">

            <div class="col-md-4">

                <label class="col-sm-2">Phone<span class="text-red">*</span></label>

                @Html.TextBoxFor(m => m.Phone, new { @class = "form-control required", @data = "Phone" })

            </div>

            <div class="col-md-4">

                <label class="col-sm-2">Email</label>

                @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })

            </div>

        </div>

        <div class="clearfix" style="height:20px">&nbsp;</div>  

        <button type="button" id="btnAddContacts" class="btn btn-primary">Submit</button>&nbsp;&nbsp;

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        <div class="clearfix" style="height:70px">&nbsp;</div>

    </div>

}

render partial from jquery method - 

 function EditAddressBook(addressBookId) {

                $.ajax({

                    method: "GET",

                    url: '@Url.Action("EditAddressBook", "Shipment")',

                    data: { 'addressBookId': addressBookId },

                    success: function (result) {

                        if (result != undefined && result != null) {

                            $('#modalAddCustomer .modal-body').html('');

                            $('#modalAddCustomer #modalHead').html('Update Cusotomer');

                            $('#modalAddCustomer .modal-body').html(result);

                            $('#modalAddCustomer').modal('toggle');

                            $('#modalAddCustomer').modal('show');

                        }

                        else {

                        }

                    }

                });

            }

modal popup in which result i.e partial view will be - 

<div class="modal fade" id="modalAddCustomer" role="dialog" data-backdrop="static" data-keyboard="false">

        <div class="modal-dialog" style="width: 65%">

            <div class="modal-content">

                <div class="box-header with-border">

                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                    <h4 class="modal-title" id="modalHead">Add Customer</h4>

                </div>

                <div class="modal-body">

                </div>

            </div>

        </div>

    </div>