Load ASP.NET MVC Partial Views Dynamically Using JQuery

Question

I have a view with a test link on the left side. Each time user clicks the test link, I am adding a tab button and tab content (straight up HTML5 and CSS). This is what it looks like:

Controller Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MDMS_Web.Controllers
{
    public class MainViewController : Controller
    {
        //
        // GET: /MainView/

        public ActionResult MainView(string name)
        {
            ViewBag.Name = name;

            return View();
        }

        //[ChildActionOnly]
        //public PartialViewResult MainContentPartial()
        //{
        //    return PartialView("~/Views/MainView/MainContentPartial.cshtml");
        //}

        public ActionResult GetView()
        {
            return PartialView("~/Views/MainView/MainContentPartial.cshtml");
        }

    }
}

Partial View

<div id="MainContentBox" style="margin: 0em 0em;">
    <h2>Testing</h2>
</div>

Main View

@{
    ViewBag.Title = "Main View";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<main id="mainView">
    <div class="row" style="min-width: 100%; ">

        <div style="float: left; width: 20%; min-height: 870px; margin-top: 0.5em; margin-left: -1em; overflow: hidden; border-style: solid; border-width: thin; border-color: lightgray; ">
            <div id="Test">
                <div class="row" style="background-color: #c2cbfb; margin-left: 0; margin-right: 0; ">
                    <p id="menuTitle" style="width: 100%; text-align: center; margin: 5px 0 5px 0; ">Test</p>
                </div>
                <div class="row content-wrapper">
                    <span style="white-space: nowrap;">
                        <img class="icon" style="width: 30px; height: 30px; " src="Content/images/dashboard/CheckIcon.png" alt="Check icon" />
                        <a id="TestLink">Test Stuff</a>
                    </span>
                </div>
            </div>
        </div>

        <div style="float: left; width: 80%; min-height: 870px; margin-top: 0.5em; margin-left: 0em; overflow: hidden; ">
            <div id="MainContentBox" style="margin: 0em 0em;">
                <div id="tabs" class="tab">

                </div>

                <div id="content">

                </div>
            </div>
        </div>
    </div>


    <div id="loading">

    </div>

</main>

@section scripts{

    @Scripts.Render("~/bundles/App/MainView")

    <script type="text/javascript">
        $(function () { MainView.initModule('@ViewBag.Name') });
    </script>
}

JavaScript

function addTab(evt) {
    stateMap.tabIndex += 1;

    // add tab button
    console.log(evt);
    var tHtml = '<button id="tb' + stateMap.tabIndex + '" class="tablinks">' + "New Tab " + stateMap.tabIndex + '</button>';
    $("#tabs").append(tHtml);

    console.log("we have a new tab!");

    // add tab content section
    var node = document.createElement('div');
    node.setAttribute('id', 't' + stateMap.tabIndex);
    node.className = "tabContent";

    // load partial page place holder
    var contentPlaceHolder = document.createElement('div');
    contentPlaceHolder.setAttribute('id', 'c' + stateMap.tabIndex);
    node.appendChild(contentPlaceHolder);
    document.getElementById("content").appendChild(node);

    console.log("we have new content placeholder for partial view!");


 // HERE IS WHERE MY PROBLEM BEGINS !!!!!!
 // NOTHING I DO WILL LOAD MY PARTIAL PAGE !!!!


    //@{ Html.RenderPartial("MainContentPartial"); }
    //$("#c" + stateMap.tabIndex).load('@{ Html.RenderPartial("MainContentPartial"); }');
    //$("#c" + stateMap.tabIndex).load("GetView");
    $(function () {
        $("#c" + stateMap.tabIndex).load(
            '<%= Url.Action("GetView", "MainViewController") %>'
        );
    })
    //url: 'MainViewController/GetView',
    //$.ajax({
    //    url: 'GetView',
    //    dataType: 'html',
    //    success: function (data) {
    //        $("#c" + stateMap.tabIndex).html(data);
    //    }
    //});
}

JavaScript initModule

var initModule = function (data) { 
    stateMap.currentSection = data;

    //Bind events
    $("#TestLink").on("click", function (event) {
        addTab(event);
    });

    $(document).ready(function () {
        $(".tab").on("click", "button", function (event) {
            openTab(event);
        });
    });

};

return { initModule: initModule };

My issue is with the last part of the JavaScript and probably the Controller. Can someone please tell me the correct way to load the partial view into my dynamically created tab content using JQuery?

Answer 1

You can load Partial View dynamically using Jquery in following way

$(document).on("click", "#TestLink", function () {
        var url = "/MainView/GetView";
        $.get(url, function (data) {
            $("#content").html(data);
        });
 });

Here URL is the URL of action which will return PartialView.