How to load the partial view Client Side using Javascript

 

• Create a new div element called divPartialHolder as a container for the partial view.
• Create a Javascript function ShowPartial() to load the partial view into the div created above using jQuery load() function 
• Create a link to show the partial view using href="javascript:ShowPartial()"
• Create a Javascript function HidePartial() to hide the above div using jQuery hide() function 
• Create a link to hide the partial view using href=’javascript:hideBookPartialViewJS() 

In Parent View i.e. Index.cshtml

 <a href="javascript:ShowPartial()">Show Create Div</a>   

<div id="divPartialHolder"> 

  </div>

 function ShowPartial() {
 
        $("#divPartialHolder").load('/Category/CreateCategory');
        $("#divPartialHolder").show();
    }

 function HidePartial() {
       $("#divPartialHolder").fadeOut();
    }
  

//In Category Controller 

public PartialViewResult CreateCategory()
        {
            return PartialView("_CreatePartial");
        } 

 //_CreatePartial.cshtml

<div style="float: right; background-color: aliceblue;">
    <a href="javascript:HidePartial()">Hide</a>
    @* above method is declared in the parent view*@
</div>
 
<br />
@using (Html.BeginForm("SaveCategory", "Category", FormMethod.Post, new { id = "frmCategory" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()
    <fieldset>
        <legend>Category</legend>
          Category Name:@Html.TextBox("CategoryName")
        <br />
         Description: @Html.TextArea("Description")
        <p>
            <input type="submit" value="Create" />
            @*<a href="javascript:document.getElementById('frmCategory').submit()">Create</a>*@

             // above loc also worked i.e to submit the form using JS.

       </p>
    </fieldset>
     
}

// SaveCategory function

 [ValidateAntiForgeryToken()]
 public ActionResult SaveCategory(Category c)
        {

             // db.Categories.Attach(c);
                db.Categories.Add(c);    
                db.SaveChanges();
                return RedirectToAction("Index");

        }

2).  Other way

In place of     <a href="javascript:ShowPartial()">Show Create Div</a>

we could have used Ajax.ActionLink also. i.e 

  @Ajax.ActionLink("Create Category", "CreateCategory", "Category", new AjaxOptions { UpdateTargetId = "divPartialHolder", InsertionMode = InsertionMode.Replace, OnSuccess="fnSuccess"} )
  

  function fnSuccess() {
         $("#divPartialHolder").show();
    }

Posted in: MVC,MVC Scrap