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

        }

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

        }

• javascript
• jquery
• asp-mvc

2 Answers 2

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

HttpPost methods are for SENDING data to the server. You do not need to send your data to the server, rather, you need to GET data from the server with specified criteria and then display it. With that being send, you do not need your HTML.BeginForm() method. Moreover, you do not need to declare a PartialViewResult return type, an ActionResult will suffice. Additionally, you don't need to return the the name of the partial view and the associated model. Simply give the partial view the model results like so:

return PartialView(model)

Next, create an AJAX link on the page you will be clicking your button on like so:

    @Ajax.ActionLink("GetVehicleForEndMileage", "Vehicles", new AjaxOptions()
{
    HttpMethod = "GET",
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "Results"
 })

<div id="Results"></div> 

You can wrap this link in a button tag to work with your current set-up.

Now just define your Partial View in a separate .cshtml file.

@model ModelName

<div>
     // Model attributes to be displayed here.
</div>

Now, embed that partial view within the view you wish to have the callback displayed.

Having said all of that, your javascript/jQuery can be removed.