使用JQuery动态加载ASP.NET MVC部分视图 [英] Load ASP.NET MVC Partial Views Dynamically Using JQuery

问题描述

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

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:

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

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

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将部分视图加载到动态创建的选项卡内容中的正确方法吗？

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?

推荐答案

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

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

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

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

这篇关于使用JQuery动态加载ASP.NET MVC部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！