return partial view as string or html and bind with div

Return Partial View as String and bind with a particular div is a great feature of the MVC Razor view engine. During development many times we need to return a whole view as a string and bind with particular div. Its very easy and effective in many cases.

I am going to explain with example, how to render partial view as string or HTML to a div with id.
Very first thing before start this demo, Create a
Controller (JobController)
ActionResult (JobDetails) with parameter job
PartialView (JobDetails)
ViewModel (JobDetailViewModel)

After Create these things put the code from the below to things mentioned above :-

Step 1: Add Controller and View

When you add a controller with name I am using JobController in demo. You can rename whatever you want. It will create a index ActionResult defult. Right Click on it and Add New View. It will add a new view with name Index.cshtml. Then put below code in that view.

<button type="button" id="btnBind" text="BindDiv" title="bind" />
<div id="jobdetail"></div>

Then add below code in the script tag in the Index.cshtml page


<Script type="text/javascript">
  $('#btnBind').on('click', function (e) {           
            var job = 123;
            var url = '@Url.Action("JobDetails", "Job")';
            $.ajax({
                type: "GET",
                url: url,
                data: {job:job},
                dataType: "html",
                success : function (data) {
                        $('div#jobdetail').html(data);
                }
            });
        });
</Script>

Step 2: Add Partial View

Then add a new PartialView with name JobDetails and give design whatever you want to give. I am going to bind only three fields returned from database using ViewModel. Please put the code in partial view like below :-


@model WPW.Web.UI.Common.ViewModels.JobDetailViewModel
<div>
<table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>JobId #</th>
                                       <th>Job Name</th>
                                        <th>Job Cost</th>                                   
                                    </tr>
                                </thead>
                                <tbody>                                   
                                    <tr>
                                        <td>@model.JobId</td>
                                        <td>@model.JobName</td>
                                        <td>@detail.JobCost</td>                                     
                                    </tr>
                                   </tbody>
                            </table>
</div>

Step 3: Add ViewModel

Please add a ViewModel with name JobDetailViewModel. It would be like below :-

 public class JobDetailViewModel
 {
   public string JobId { get; set; }
   public string JobName{ get; set; }
   public string JobCost{ get; set; }
}

Step 4: Add ActionResult to Return Partial View as String

Then add a new Action Result JobDetails in JobController like given below :-

 public ActionResult JobDetails(string job)
 {
 string JobId = string.Empty;
 string JobName = string.Empty;
 string JobCost = string.Empty;

 using (var db = new ADCDataEntities())
 {
 var jobDetails = db.MASTER_JCM_JOB.Where(s => s.Job == job);
 JobId = jobDetails.Job;
 JobName=jobDetails.JobName;
 JobCost=jobDetails.JobCost;
 }
 JobDetailViewModel model = new JobDetailViewModel();
            model.JobId = JobId ;
 model.JobName=query.jobname;
 model.JobCost=query.jobcost;
 var view = RenderPartialViewToString(ControllerContext, ViewData, TempData, "~/Views/Job/JobDetails.cshtml", model);
            result = Json(new { Success = true, PartialView = view }, JsonRequestBehavior.AllowGet);
            return View("~/Views/Job/JobDetails.cshtml", model);
}

Step 5: Copy & Paste Below Code

Then copy and paste below code, It will convert your Partial View/ View to string as HTML.

  public string RenderPartialViewToString(ControllerContext controllerContextontrollerContext,
         ViewDataDictionary viewData, TempDataDictionary tempData, string viewName, object myModel)
        {
            if (string.IsNullOrEmpty(viewName))
                viewName = controllerContextontrollerContext.RouteData.GetRequiredString("action");

            viewData.Model = myModel;

            using (var sw = new StringWriter())
            {
                var viewResult = ViewEngines.Engines.FindPartialView(controllerContextontrollerContext, viewName);
                var viewContext = new ViewContext(controllerContextontrollerContext, viewResult.View, viewData, tempData, sw);
                viewResult.View.Render(viewContext, sw);

                var s = sw.GetStringBuilder().ToString();
                return s;
            }
        }

Hope that code will help to Render Partial View as String / HTML. If you face any problem then feel free to contact me.

Happy Coding....

Posted by | View Post | View Group