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....
Complete copy and paste from NopCommerce code. Boooo…