Render Partial View Using jQuery in ASP NET MVC

Question

How do I render the partial view using jquery   We can render the partial View like this    lt   Html RenderPartial  UserDetails      gt    How can we do the same using jquery

User · Answer

You ll need to create an Action on your Controller that returns the rendered result of the  UserDetails  partial view or control  Then just use an Http Get or Post from jQuery to call the Action to get the rendered html to be displayed

User · Answer

I did it like this      document  ready function            yourid   click function              this  load   Url Action  Details                    Details Method   public IActionResult Details                          return PartialView  Your Partial View

User · Answer

You can t render a partial view using only jQuery   You can  however  call a method  action  that will render the partial view for you and add it to the page using jQuery AJAX   In the below  we have a button click handler that loads the url for the action from a data attribute on the button and fires off a GET request to replace the DIV contained in the partial view with the updated contents       js-reload-details   on  click   function evt        evt preventDefault        evt stopPropagation         var  detailDiv       detailsDiv            url     this  data  url           get url  function data             detailDiv replaceWith data                          where the user controller has an action named details that does   public ActionResult Details  int id         var model      get user from db using id         return PartialView   UserDetails   model        This is assuming that your partial view is a container with the id detailsDiv so that you just replace the entire thing with the contents of the result of the call   Parent View Button    lt button data-url   Url Action  details   user   new   id   Model ID               class  js-reload-details  gt Reload lt  button gt    User is controller name and details is action name in  Url Action     UserDetails partial view   lt div id  detailsDiv  gt       lt  --    content    -- gt   lt  div gt

User · Answer

tvanfosson rocks with his answer   However  I would suggest an improvement within js and a small controller check   When we use  Url helper to call an action  we are going to receive a formatted html  It would be better to update the content   html  not the actual element   replaceWith    More about at  What  39 s the difference between jQuery  39 s replaceWith   and html       get    Url Action  details   user   new   id   Model ID       function data            detailsDiv   html data          This is specially useful in trees  where the content can be changed several times   At the controller we can reuse the action depending on requester   public ActionResult Details  int id         var model   GetFooModel        if  Request IsAjaxRequest                  return PartialView   UserDetails   model              return View model

User · Answer

Another thing you can try  based on tvanfosson s answer  is this    lt div class  renderaction fade-in       data-actionurl   Url Action  details   user   new   id   Model ID      gt  lt  div gt    And then in the scripts section of your page    lt script type  text javascript  gt        function                  renderaction   each function  i  n                var  n     n                   url    n attr  data-actionurl                     this     this                  get url  function  data                     this html data                                         lt  script gt    This renders your  Html RenderAction using ajax   And to make it all fansy sjmansy you can add a fade-in effect using this css      make keyframes that tell the start state and the end state of our object     -webkit-keyframes fadeIn   from   opacity 0    to   opacity 1       -moz-keyframes fadeIn   from   opacity 0    to   opacity 1       keyframes fadeIn   from   opacity 0    to   opacity 1        fade-in       opacity  0     make things invisible upon start        -webkit-animation  fadeIn ease-in 1     call our keyframe named fadeIn  use animattion ease-in and repeat it only 1 time        -moz-animation  fadeIn ease-in 1      -o-animation  fadeIn ease-in 1      animation  fadeIn ease-in 1      -webkit-animation-fill-mode  forwards     this makes sure that after animation is done we remain at the last keyframe value  opacity  1        -o-animation-fill-mode  forwards      animation-fill-mode  forwards      -webkit-animation-duration  1s      -moz-animation-duration  1s      -o-animation-duration  1s      animation-duration  1s      Man I love mvc  -

User · Answer

I have used ajax load to do this       user content   load   Url Action  UserDetails   User

User · Answer

If you need to reference a dynamically generated value you can also append query string paramters after the  URL Action like so       var id     this  attr  id        var value     this  attr  value            user content   load   Url Action  UserDetails   User   Param1     id     amp Param2     value         public ActionResult Details  int id  string value                 var model   GetFooModel            if  Request IsAjaxRequest                          return PartialView   UserDetails   model                      return View model

User · Answer

Using standard Ajax call to achieve same result            ajax               url    Url Action   SearchStudents   NationalId         NationalId   val                type   GET               error  function  xhr                    alert  Error      xhr statusText                               success  function  result                         divSearchResult   html result                                 public ActionResult  SearchStudents string NationalId                                               return PartialView   SearchStudents   model

[javascript] Render Partial View Using jQuery in ASP.NET MVC

Examples related to javascript

Examples related to jquery

Examples related to asp.net-mvc

Examples related to renderpartial