return partial view as string or html and bind with div

admin1 CommentAsp.net, How To, MVC

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
-1

Related posts:

  1. Jquery fullcalendar copy last week events to next week sample code
  2. Mvc web api token based authentication
  3. Bind multiple jquery datatable in one ajax hit in asp.net mvc
  4. [Fixed] Could not cast or convert from System.String to System.Collections.Generic.List