使用JQuery

Question

我有一个左侧有测试链接的视图。每次用户点击测试链接时，我都会添加一个标签按钮和标签内容（直接HTML5和CSS）。这就是它的样子：

控制器代码

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");
        }

    }
}

部分视图

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

主视图

@{
    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 };

我的问题在于JavaScript的最后一部分，可能还有Controller。有人可以告诉我使用JQuery将部分视图加载到动态创建的标签内容中的正确方法吗？

Answer 1

您可以使用Jquery以下列方式动态加载部分视图

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

此处URL是将返回PartialView的操作的URL。