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

Question

In a MVC partial view file  I build one Html TextBox and two submit buttons  These two buttons will increase decrease the Html TextBox value once clicked  The Html TextBox displayed value will change accordingly However  once I need to update the  refTable div based on the new value after click  The page or section never updated  Codes are below  where some comments are added for explanation purpose  Thanks for your help             cshtml file                 lt body gt   lt  body gt    lt input type  submit  value  PrevY  name  chgYr2  id  pY    gt         var tempItem3   Model First       just give the first entry from a database  works      if  ViewData  curSel      null             Html TextBox  yearSelect3   Convert ToDateTime tempItem3 Holiday date  Year ToString           ViewBag selYear   Convert ToDateTime tempItem3 Holiday date  Year     just initial value  works     ViewData  curSel     Convert ToDateTime tempItem3 Holiday date  Year            else            Html TextBox  yearSelect3   ViewData  curSel   ToString               lt input type  submit  value  NextY  name  chgYr2  id  nY    gt     lt script type  text javascript  gt        document  ready function                document  on  click     nY   function                  var val       yearSelect3   val                    yearSelect3   val  val   1    1               var dataToSend                     id    val   1    1                               add some jquery or ajax codes to update the  refTable div                also ViewBag selYear need to be updated as   val   1    1                 like    ViewBag selYear     val   1    1                  any similar temp variable is fine                                    document  on  click     pY   function                  var val       yearSelect3   val                    yearSelect3   val  val   1  - 1               var dataToSend                     id    val   1  - 1                                      lt  script gt      lt span style  float  right  gt  lt a href     gt Set Holiday Calender for 2013 lt  a gt  lt  span gt   lt span id  btnAddHoliday  gt  Html ActionLink  Add Holiday    Create   null  new   id    addHilBtn     lt  span gt    lt div id  refTable  gt       lt table class  tblHoliday  style  width  100    gt               lt th gt                  Holiday              lt  th gt               lt th gt                  Dates              lt  th gt               lt th gt Modify lt  th gt               lt th gt Delete lt  th gt           lt  tr gt            foreach  var item in Model                         if      Convert ToDateTime item Holiday date  Year    ViewBag selYear                 if the ViewBag selYear is hard code  this selection  works                             lt tr gt                                   lt td gt                       Html DisplayFor modelItem   gt  item Holiday Name                   lt  td gt                                  lt td gt                       item Holiday date Value ToString  MM dd yyyy                    lt  td gt                   lt td gt                       Html ActionLink  Edit    Edit   new                        lt  td gt                   lt td gt                       Html ActionLink  Delete    Delete   new                        lt  td gt               lt  tr gt                                lt  table gt   lt  div gt

User · Answer

The main concept of partial view is returning the HTML code rather than going to the partial view it self.

[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 action return the HTML code of the partial view ("HolidayPartialView").

To refresh partial view replace the existing item with the new filtered item using the jQuery below.

$.ajax({
                url: "/Holiday/Calendar",
                type: "GET",
                data: { year: ((val * 1) + 1) }
            })
            .done(function(partialViewResult) {
                $("#refTable").html(partialViewResult);
            });

User · Answer

You ll need AJAX if you want to update a part of your page without reloading the entire page   main cshtml view   lt div id  refTable  gt        lt  -- partial view content will be inserted here -- gt   lt  div gt    Html TextBox  yearSelect3   Convert ToDateTime tempItem3 Holiday date  Year ToString      lt button id  pY  gt PrevY lt  button gt    lt script gt        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                                        lt  script gt    You ll need to add the fields I have omitted  I ve used a  lt button gt  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 lt DateTime gt         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 lt DateTime gt  Dates   get  set        HolidayPartialView csthml   model Your Namespace HolidayViewModel    lt table class  tblHoliday  gt       foreach var date in Model Dates                 lt tr gt  lt td gt  date ToString  MM dd yyyy   lt  td gt  lt  tr gt         lt  table gt    This is the stuff that gets inserted into your div

User · Answer

You can also use Url Action for the path instead like so        ajax           url    Url Action  Holiday    Calendar   new   area       year   val   1    1                              type   GET                      success  function  partialViewResult                                refTable   html partialViewResult

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

Examples related to asp.net-mvc

Examples related to jquery

Examples related to c#-4.0

Examples related to razor