How to use jquery or ajax to update razor partial view in c#/asp.net for a MVC project

by

You’ll need AJAX if you want to update a part of your page without reloading the entire page.

main cshtml view

<div id="refTable">
     <!-- partial view content will be inserted here -->
</div>

@Html.TextBox("yearSelect3", Convert.ToDateTime(tempItem3.Holiday_date).Year.ToString());
<button id="pY">PrevY</button>

<script>
    $(document).ready(function() {
        $("#pY").on("click", function() {
            var val = $('#yearSelect3').val();
            $.ajax({
                url: "/Holiday/Calendar",
                type: "GET",
                data: { year: ((val * 1) + 1) }
            })
            .done(function(partialViewResult) {
                $("#refTable").html(partialViewResult);
            });
        });
    });
</script>

You’ll need to add the fields I have omitted. I’ve used a <button> instead of submit buttons because you don’t have a form (I don’t see one in your markup) and you just need them to trigger javascript on the client side.

The HolidayPartialView gets rendered into html and the jquery done callback inserts that html fragment into the refTable div.

HolidayController Update action

[HttpGet]
public ActionResult Calendar(int year)
{
    var dates = new List<DateTime>() { /* values based on year */ };
    HolidayViewModel model = new HolidayViewModel {
        Dates = dates
    };
    return PartialView("HolidayPartialView", model);
}

This controller action takes the year parameter and returns a list of dates using a strongly-typed view model instead of the ViewBag.

view model

public class HolidayViewModel
{
    IEnumerable<DateTime> Dates { get; set; }
}

HolidayPartialView.csthml

@model Your.Namespace.HolidayViewModel;

<table class="tblHoliday">
    @foreach(var date in Model.Dates)
    {
        <tr><td>@date.ToString("MM/dd/yyyy")</td></tr>
    }
</table>

This is the stuff that gets inserted into your div.

More Related Contents:

  1. Cascading drop-downs in MVC 3 Razor view
  2. ASP.NET MVC View Engine Comparison
  3. How do I write unencoded Json to my View using Razor?
  4. ASP.NET MVC Ajax Error handling
  5. Adding another “Pet” to a Model Form
  6. Handling session timeout in ajax calls
  7. ASP.NET MVC 3 – Partial vs Display Template vs Editor Template
  8. In MVC3 Razor, how do I get the html of a rendered view inside an action?
  9. Why is Model Binding not working in my POST action method?
  10. Razor View throwing “The name ‘model’ does not exist in the current context”
  11. ASP.NET MVC load Razor view from database
  12. HTML.ActionLink vs Url.Action in ASP.NET Razor
  13. Using System.ComponentModel.DataAnnotations with Entity Framework 4.0
  14. ASP.NET MVC and Ajax, concurrent requests?
  15. How can I pass parameters to a partial view in mvc 4
  16. Difference Between $.getJSON() and $.ajax() in jQuery
  17. MVC Datatype Currency trigger numeric keypad
  18. How to persist data models passed to partial views?
  19. What is the best ways to bind @Html.DropDownListFor in ASP.NET MVC5?
  20. Date of Birth validation keeps showing
  21. jQuery: How to traverse / Iterate over a list of object
  22. Possible to access MVC ViewBag object from Javascript file?
  23. Adding a css class to select using @Html.DropDownList()
  24. MVC 3 file upload and model binding
  25. Does Razor syntax provide a compelling advantage in UI markup?
  26. Razor ViewEngine HTML.Checkbox method creates a hidden input. Why? [duplicate]
  27. How do I create a MVC Razor template for DisplayFor()
  28. How to send data in jquery.post to mvc controller which use ViewModel as parameter?
  29. Razor Nested WebGrid
  30. Html.Raw() in ASP.NET MVC Razor view

Leave a Comment