"How to 'Reload the only Partial View' part after submitting the form with HTML Helper in jquery?"

Question

I have a partial view on a View of MVC so after Submit the form that is submitting within jquery that you can see below in the code. I have to refresh the Partial view to show some changes that made in partial view after clicking on save button. What should I do in the section of script on click of save?

@using(Html.BeginForm(FormMethod.Post, new{id="form"}))
{

    <div>
        @Html.Partial("_VehicleCard", Model)
    </div>
    <div>
        <div id="submitBtn" class="row>
            @(Model.VehicleCards.Count>0?"":"hidden")">
            <div>
                <button type="button" id="btnSubmit">Save</button>
            </div>
         </div>
    </div>
}

@section scripts{

    <script>
        $('#btnSubmit').click(function (event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            $('#form').submit();
            //here i wants to refresh Patrial View.
        });
    </script>
}

Here is my Controller code:

public PartialViewResult GetVehicleForEndMileage(string date, int? Id)
{

            try
            {
                var model = new VehicleEndMilageVM();
                DateTime selectedDate;
                DateTime.TryParseExact(date, "dd/MM/yyyy", null, 
                DateTimeStyles.None, out selectedDate);
                model.SelectedDate = selectedDate.ToString("dd/MM/yyyy");
                model.LocationId = Id ?? 0;
                model.VehicleCards = 
                vehicleDailyInspectionBLL.GetDailyInspectionDetail(selectedDate, Id).Select(x => new VehicleCard
                {
                    VehicleNumber = x.VehicleNumber,
                    StartMilage = x.StartMilage,
                    Driver = x.Driver,
                    EndMilage = x.EndMilage,
                    VehicleId = x.VehicleId,
                    VehicleDailyInspectionId = x.VehicleDailyInspectionId,
                    IsEndMilageAdded = (x.EndMilage !=null && x.EndMilage > 0) ? true : false 
                }).ToList();

                return PartialView("_VehicleCard", model);
            }
            catch (Exception ex)
            {
                throw;
            }

        }

Answer 1

You can simply do it via an ajax call.

First, you have to set an id for <div> tag

<div id="htmlContainer">
    @Html.Partial("_VehicleCard", Model)
</div>

Then

$('#btnSubmit').click(function (event) {
        event.preventDefault();
        event.stopImmediatePropagation();
        $('#form').submit();

   $.ajax({
      url: 'url',
      dataType: 'html',
      success: function(data) {
         $('#htmlContainer').html(data);
      }
   });
});

You controller seems to be like this :

 public PartialViewResult GetVehicleCard(...)
 {
      return PartialView("_VehicleCard", your view model);
 }