Ajax load partialview accepting a parameter

Question

I have a view that list Parts in a htmltable format from a database table PartList. The htmltable contains a link which should be used to enter values to the database table Bom. When clicked on the link, it should load a partialview for that particular Part. The partialview contains a dropdown to select the child part, a textbox to enter the quantity and a htmltable that shows the other bom enter for that part. What am struck up with is I need to load the partialview accepting the partId using ajax. The partialview should be loaded to a div in the listPart view. How to acheive this?

Answer 1

You are not clear about your question by not showing your current code. As far as I understood, this blog post should give you an idea:

Working With JQuery Ajax API on ASP.NET MVC 3.0 - Power of JSON, JQuery and ASP.NET MVC Partial Views

What you need to do is simple:

1. Make an ajax call to you controller action:

   $.ajax({
       type: "POST",
       url: actionURL,
       data: d,
       success: function (r) {
           $("#to-do-db-list-container").html(r.data);
       },
       complete: function () {
           $("#ajax-progress-dialog").dialog("close");
           $(".isDone").bind("click", function (event) {
               toggleIsDone(event, $(this));
           });
       },
       error: function (req, status, error) {
           //do what you need to do here if an error occurs
           $("#ajax-progress-dialog").dialog("close");
       }
   });
   

2. Return your partial view:

   [HttpPost]
   public ActionResult toogleIsDone(int itemId) {
   
       //Getting the item according to itemId param
       var model = _entities.ToDoTBs.FirstOrDefault(x => x.ToDoItemID == itemId);
       //toggling the IsDone property
       model.IsDone = !model.IsDone;
   
       //Making the change on the db and saving
       ObjectStateEntry osmEntry = _entities.ObjectStateManager.GetObjectStateEntry(model);
       osmEntry.ChangeState(EntityState.Modified);
       _entities.SaveChanges();
   
       var updatedModel = _entities.ToDoTBs;
   
       //returning the new template as json result
       return Json(new { data = this.RenderPartialViewToString("_ToDoDBListPartial", updatedModel) });
   }
   

RenderPartialViewToString is a controller extension which renders your partial view inside your controller and return back a string value for the output. You will find all the code inside the blog post.