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?

Your code would be giving a 404 (Not Found) - its Url.Action("GetView", "MainView") , not "MainViewController" — user3559349
– user3559349, Commented Jan 31, 2018 at 23:00
Are you really using aspx instead of razor? And from your edit, it looks like your script is in an external file which means that you need to use $("#c" + stateMap.tabIndex).load('/MainView/GetView');, (Url.Action is server side code and is not parsed in external js files) — user3559349
– user3559349, Commented Jan 31, 2018 at 23:28
But a better option is to use Url.Action() in the main view to generate the url and pass it to the script — user3559349
– user3559349, Commented Jan 31, 2018 at 23:30
If its razor, then its var url = '@Url.Action("GetView", "MainView")'; to generate the url (or just var url = '@Url.Action("GetView")'; if the method is in the same controller — user3559349
– user3559349, Commented Jan 31, 2018 at 23:32

Waqas Idrees · Accepted Answer · 2018-02-01 12:34:33Z

4

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.

answered Feb 1, 2018 at 12:34

Waqas Idrees

1,4712 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Patricia Over a year ago

The url and the .load syntax is confusing to me. So, I want to be sure I understand. For var url = '@Url.Action("GetView", "MainView")'; is the first parameter the PartialViewResult method name and the second parameter the ActionResult method name? And for var url = "/MainView/GetView"; the MainView is the ActionResult method name in the controller and the GetView is the PartialViewResult method name in the controller?

Waqas Idrees Over a year ago

Yes, you are right, here MainView is the Controller name and GetView is its action which is returning PartialView. If you are writing this js function in your .cshtml page you can use var url='@Url.Action("GetView", "MainView")' but if it is in separate file you have to use '/MainView/GetView'

Collectives™ on Stack Overflow

Load ASP.NET MVC Partial Views Dynamically Using JQuery

Controller Code

Partial View

Main View

JavaScript

JavaScript initModule

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Controller Code

Partial View

Main View

JavaScript

JavaScript initModule

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related