Dynamically load partial view using mvc action controller

Introduction

As we all know we can have partial views to do many thing. Here is one of the scenario. Say we have different workflow based on operation selection. Either we have static partial views with full pledge workflow embedded in it or you load workflow as partial view dynamically.

 

With Dynamic Approach

1. We can inject partial view at runtime
2. The mark up will be lean and light as it will be on-demand load.

For proof of concept I choose existing Asp.net MVC razor from vs.

 

About.cshml

 

@model WebApplication3.Models.FullAndPartialViewModel
@{
    ViewBag.Title = "My Master Page";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
 
    $(document).ready(function () {
        $("p").click(function () {
            var categoryId = $("#ddlCategory").val();
           
            $("#dvCategoryResults").load("/home/InitiateWorkflow", { categoryId: categoryId });
        });
        $("#ddlCategory").change(function () {
            var categoryId = $("#ddlCategory").val();
            $("#dvShowSubmissionCriteria").show();

            // $("#dvCategoryResults").load('@(Url.Action("GetCategoryProducts","Home",null, Request.Url.Scheme))?categoryId=' + categoryId);
           //  $("#dvCategoryResults").load("/home/InitiateWorkflow", { categoryId: categoryId});
        });
    });
</script> 
<div id="container">
 
    <label for="ddlCategory"><strong>Select a category</strong></label>
    @Html.DropDownListFor(m => m.CategoryId,
        new SelectList(Model.CategoryList, "CategoryId", "CategoryName", Model.CategoryId), new { id = "ddlCategory", @class = "test" })
    <br /><br />
    <div id="dvShowSubmissionCriteria" hidden="hidden">
        <p>This is submission criteria. Please accept before you proceed</p>
    </div>
    <p><strong>Click here to start Workflow -->.</strong></p>
    <div id="dvCategoryResults">
 
    </div>
</div>  

 

FullAndPartialViewModel.cs

using System.Collections.Generic;
 
namespace WebApplication3.Models
{
    public class FullAndPartialViewModel
    {
        public int CategoryId { get; set; }
 
        public List<CategoryListItem> CategoryList { get; set; }
    }
    public class  CategoryListItem
    {
        public int CategoryId { get; set; }
        public string CategoryName { get; set; }
 
    }
}

HomeController.cs

using System.Web.Mvc;
using WebApplication3.Models;
 
namespace WebApplication3.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
 
        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";
            FullAndPartialViewModel viewModel = new FullAndPartialViewModel();
            viewModel.CategoryList = new System.Collections.Generic.List<CategoryListItem>();
            viewModel.CategoryList.Add(new CategoryListItem() { CategoryId = 1, CategoryName = "Service Operation 1" });
            viewModel.CategoryList.Add(new CategoryListItem() { CategoryId = 2, CategoryName = "Service Operation 2" });
            return View(viewModel);
        }
       
        public PartialViewResult InitiateWorkflow(int categoryId)
        {
            //https://cmatskas.com/update-an-mvc-partial-view-with-ajax/
 
            var service = new Service();
 
            if (categoryId == 1)
            {
                service.Name = "Workflow 1";
                service.Value = "I got 5 Steps!";
                return PartialView("~/Views/Home/_WF1.cshtml", service);
            }
            else
            {
                service.Name = "Workflow 2";
                service.Value = "I got 100 Steps!";
                return PartialView("~/Views/Home/_WF2.cshtml", service);
            }
        }
    }
}

 

Service.cs

namespace WebApplication3.Models
{
    public class Service
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }
}

Partial View Workflow 1: _WF1.cshtml

 

@using WebApplication3.Models
@model Service
<p>@Model.Name</p>
<p>@Model.Value</p>

 

Partial View Workflow 2: _WF2.cshtml

 

@using WebApplication3.Models
@model Service
<p>@Model.Name</p>
<p>@Model.Value</p>

 

Output